CodeLab Website
Fall 20 Spark Project
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.
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
