CodeLab Website

Introduction

Our task was to use ReactJS to complete the CodeLab website which will be used by people interested in what CodeLab is about. Users can spectate the work we have done and see our progress. People can even find information on how to join CodeLab through the website.

The Team

Guk il Kim - Applied Mathematics
Christopher Havens - Computer Science and Engineering
Tom Abraham - Computer Science
Vishnu - Computer Science

Timeframe

Oct - Dec 2020 | 7 weeks

Tools

ReactJS with Material-UI
Github

Project Demo

To view the completed site, visit codelabdavis.com.

A couple of the pages on the completed site

Challenges

Starting Out

“The first challenge that I faced throughout this project was starting with ReactJS. This project was the first time I had ever used ReactJS, so I had to learn and adapt to this new style. One specific issue I had was using components and props. I knew how to use them in theory, but actually using them correctly took some bug fixing.”
- Chris

Photo Files in VS Code

“A challenge that I faced while working on this project was the vs_code platform glitch, that denied my access to add png files to the platform. We were unable to figure out how this issue was caused but I requested help from one of our officers to add the png files and to push it back to me.”
- Guk

Media Queries

“A challenge was the mobile device implementation, which we had to use media queries/css to implement the size of images that fits into the grid for the mobile device. It wasn’t an easy process since it was my first time using media queries and finding the right pixel was not easy as the other tasks. Though one of our officers performed it well and gave us the solid way of using it, I was able to implement the images using media queries.”
- Guk

“One challenge I had to deal with towards the end of the project was optimizing my page for mobile platforms. Most of the quarter had been dedicated to building the site for desktop screens, so I had to go back and alter most of the code to add mobile optimization. While this wasn’t too difficult, it was definitely a tedious process because I had to periodically go back and make sure a change I made for the mobile version of the website did not affect the desktop version. Additionally, adjusting images for mobile involved using media queries, which was something I wasn’t familiar with, and it definitely took some practice to get the images to look good on mobile devices.”
- Tom

The Grid

“One challenge that I faced was using Material-UI Grid in order to make my page look good on all screen sizes. It took me some time to figure out exactly how the Grid system works and how I wanted to implement it. Eventually, I got into the rhythm of using Material-UI Grid and was able to make my page look exactly how I wanted it.”
- Chris

“One of the main challenges I faced right off the bat was dealing with the Grid system. This was the first time I had to use this Material-UI library, and gaining intuition on column width and spacing took some time. On my page, there are many elements that are on the same line, and figuring out how to effectively nest grid items in order to present all items properly was difficult at first. However, as with most things, I was able to attain a good grasp on the Grid system through a few hours of practice.”
- Tom

Takeaways

“My major takeaway from this project was using ReactJS and building chemistry with my teammates. It was a solid experience for me of learning how to use ReactJS and was a fun time working with my teammates. Due to covid, we weren’t able to work in person but using slack and Zoom meetings were good enough to communicate and build strong chemistry. It was also a
great experience of using liveshare for the vs_code which allowed us to all work at the same time on a single platform.”
- Guk

“One of my takeaways from this quarter was learning more about ReactJS, and enjoying the various advantages that came with this framework. However, the main takeaway for me was gaining that simulated experience of what it’s like working in industry. It was a pleasure to work with like-minded, driven individuals who were dedicated to finishing this project by the deadline, and I’m looking forward to working with them for future projects.”
- Tom

“Although the main goals of this project were to learn how to use ReactJS, Material-UI Grid, and Github those were not the only skills I can take away from this project. Not only have I been introduced to these skills and grown in them, but I got to work on a team of programmers. This teamwork skill can help me in my future when I get a job where I am to always be working with a team. I also got to meet new people and create new relationships with people who have similar interests as me.”
- Chris

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
CodeLab UC Davis

CodeLab UC Davis

CodeLab is a student-run software development and UX design agency at UC Davis.