404 Fashion
Project Github:
The home page of our group project ecommerce website, '404 Fashion'.
Overview
404 Fashion was a fashion boutique e-commerce site built for a group project using Handlebars.js, MySQL and Express.js. We were tasked with collaborating on a full-stack web application, using technologies of our choosing.
Project Purpose and Goal
The goal of this project was to develop a full-stack application as a team, practising skills in project management, Git workflows, and collaborative software development. We were given the freedom to choose what to build and which technologies to use, and we decided on an e-commerce platform to create a feature-rich application with a familiar structure. The project nurtured our technical skills and our ability to work together as a team.
Web Stack and Explanation
The site was built using Handlebars.js as the templating framework, with a MySQL database configured using Express.js.
Challenges and Process
One of the biggest challenges we faced was designing the database. Despite initial planning and schema diagramming, we needed to iterate on our database multiple times as we learned more about the data points we required. Additionally, Handlebars.js was new to us, and understanding dynamic templating took time.
The e-commerce site included user authentication and a product catalogue, though we ran out of time to fully implement the shopping cart functionality. Seeding the product data was a challenge that took us time to implement, but it was rewarding to see the site take shape with real product images, prices, and variants—it made the application feel real.
Working as a team on this project also required us to think deeply about effective task division, communication, and collaboration. At times there were breakdowns of communication when autonomous decisions were made without everyone being on the same page. Working through these challenges was a helpful exercise in improving our communication and workflow. Additionally, working through Git workflows was challenging as we were all new to handling merge conflicts.
Lessons Learned
The biggest takeaway from this project was learning how to effectively collaborate as a team on a complex application. Having a clear plan, maintaining good communication, and updating each other frequently were key to managing the project successfully. It also taught me a lot about the full-stack development process, including database design, dynamic templating, and handling the challenges of Git workflows as part of a team.
The skills gained from working with Handlebars.js later also proved valuable in my current role, where our team predominantly uses Twig templating for our Craft CMS projects.
Mapping out our design process.
Our MySQL database schema.