CodeLab Website
Fall 21 Spark Project
Introduction
Our goal for this project was to revamp the current CodeLab website to better display all that our organization has to offer. That way more of our fellow Aggies will be able to take interest in CodeLab.
The Team
Timeframe
Oct–Nov 2021 | 6 weeks
Tools
Figma
ReactJS
Node
The Project
View our completed website here: https://www.codelabdavis.com/
Design
Our Project Manager, Edward, designed the wireframes using the software Figma for the revamped website before the project term started. We consulted them as a reference point throughout development.
Development
Creating the components
Our initial step on the project was creating all the necessary components that we would use multiple times across all pages for the website.
Page Skeletons
Next was the process of creating the skeletons of all the pages in the website. This process included adding and configuring components that we previously created as well as positioning them on each page according to the wireframe.
Global Styling
Now we had to style the website so our website would look like it does in the Figma wireframe. This was a huge portion of the project where we styled each element of the pages and made everything work in a grid system using bootstrap grid and flexbox.
Responsiveness
We then had to make the website responsive so it looks amazing on any screen size. This was primarily done through utilizing media queries with respective screen widths.
Page-Specific Styling
Our final part of the project was doing page-specific styling and cleaning up any nonresponsive elements in our pages. This was a matter of using the Chrome development tools to pinpoint which styling is messing up the whole page’s responsiveness
Takeaways & Challenges
Implementing Email Functionality
One of the major features of the website that integrated both backend and frontend development, this was one of the biggest challenges we faced since integrating email frameworks like Nodemailer and EmailJS was new to all of us. It took a lot of communication and learning off of each other to implement a responsive version that works with the website.
Learning Bootstrap
Another challenge we faced was using Bootstrap to build the website. Previously, we had solely used flexbox to manage layout and mobile styling, but we soon discovered that Bootstrap allowed us to quickly and easily implement responsive layouts and dynamic sizing for everything from images to margins. Although learning Bootstrap concepts was fairly easy, it was more difficult to integrate them efficiently into our code.
Working with Git Version Control
Using a system of version control, while necessary and beneficial in the long run, was challenging especially in the early stages of development. Getting used to a fluid and developing codebase as well as styling pages without causing unintended changes in others’ work was an obstacle that slowed us down initially but once understood, became a source of confidence in the team’s collective effort.
Conclusion
We would like to thank CodeLab for the opportunity to build a tangible website that allowed us to showcase all of our skills and helped us improve our front-end development abilities. We would also like to thank Edward, for consistently answering our questions and helping us form better code-writing habits. Our hope is that we built a website for the organization that will last and is easy to modify.
