Construct Week at Masai: Building a Fastrack Website Clone
Construct week is much more than just building a full-fledged website, it teaches how to coordinate with teammates, communicate, and how to get things done.
Authored by- Santhosh Sundararajan
A Masai student and a marketer-turned-developer who is interested to jump in on any sci-fi related talk and probably wants to startup someday.
What is Construct Week at Masai?
One of the most exciting things at Masai, for the students, is project week. Generally, 5 or 6 students come together to build a project. The project is usually a clone of a popular existing site so that the students don’t have to worry about design and can concentrate on the functionalities and reverse engineering to achieve them.
The project week happens at the end of every month so that the students can apply what they learned the whole month to the project. Though there are daily assignments, project week is where different parts of the site are put together to create a complete website. At the end of the project week, three winners are selected based on the quality of the project.
Students learn to split tasks into smaller chunks, estimate the time required to build, and assign among themselves based on each other’s strengths and weaknesses. Time estimation is a crucial skill for software developers which is only possible through experience, which is what project week is all about.
The team members are decided by Masai. It is usually a mix of people with different performance levels. As Masai is a fully remote learning curriculum, chances are that each team member might be from a different part of the country. One among the team is voted as the project leader by the team. From planning to execution, everything is handled by the students without any intervention from Masai. Of course, the IAs(Instructional Associates) are readily available to help the students in case of technical doubts. Since IAs are mostly former students, they know the pulse of the project week.
About Our Team’s Project
The project week site that was assigned to us was - Fastrack, which is one of the well-known apparel brands in India. They have a visually stunning, smooth, and well-performant website as they cater mostly to a young audience. They had a variety of product categories as well as an eye-catching UI. We wanted to make justice to the design and tried our best to do so.
Unfortunately, since Heroku terminated all the projects that were hosted on their free plan, I am not able to submit the cloned Fastrack website that my team and I built.
Features and functionalities we focused on:
- A visually pleasing design
- Fast loading time and smooth navigation between pages
- Complete customer flow on the website, from the homepage to the product page to the cart and payment page.
Project starts
As we analyzed the site, we understood that it had a lot of work on CSS as well as front-end functionalities.
The front-end was built using React, the backend was running on NodeJS and the database chosen was MongoDB. As we were from the MERN batch and had worked on multiple assignments, we were comfortable with this tech stack.
We were a team of 5. While two members took care of the CSS of a few pages and the category page, I worked on the product page as well as the backend, and my other two teammates built cart, order, and shipment pages.
As the two members working on CSS were coordinating among themselves, we three were coordinating on designing the backend and passing the data from one page to another.
Since I had learned NodeJS and MongoDB a month ago, I had to revise mongoose to build document relationships. There were three main collections - users, categories, and products.
The first small issue we faced when connecting to the front-end was the cors error. We solved it by adding the cors package in the backend.
Another issue we faced was when accessing the MongoDB Atlas, which is MongoDB on cloud. I had to change the network access to access from anywhere.
Here comes the twist:
Though we had planned to complete all the pages the day before the deadline and have the final day only for merging files and solving conflicts, there were delays. We had 6 hours to merge files, check the whole flow of the site, record the video presentation and click the submit button.
The pages worked completely fine individually and as we all five team members hopped on a call to merge files, there was a surprise waiting for us. UIs of almost all the pages broke after merging, even though every page had a separate CSS file.
This meant we had to write all the CSS from scratch. We were fighting against time and we had a video presentation to make.
The video presentation is nothing but a project showcasing where team members one after the other explains the features they have built and record it. Since video presentations are important, we had to practice and make a good submission.
We sat the whole 6 hours, took multiple less-than-10 minutes-breaks, and shared zoom links every 60 minutes, as free zoom accounts had limited free connect time.
Finally, after fixing all the CSS issues, we checked all the functionalities again. We were only an hour away from the deadline.
Since Masai has a strict deadline for assignments, assessments, and project weeks, we had no option other than to practice for the video presentation in 60 minutes and submit it. We had less than three chances to rehearse 3 to 4 times before making the final video.
As everyone’s communication in the team was on par (thanks to CSBT and skillathon classes), we managed to practice and make a good presentation video in 30 minutes. We finally submitted the video and repo link and cleaned some code.
A successful project really gives a sense of accomplishment and an impressive work portfolio to showcase to companies.
The next day, the top three projects were announced, and someone I knew was on the runner-up team. All three teams presented their project. It was good to see someone I knew bag second place.
Learnings from the project
- We should have merged the code daily to avoid last-minute surprises.
- Construct week is much more than just building a full-fledged website, it teaches how to coordinate with teammates, communicate, and how to get things done.
- It also gives us a glimpse of the future projects we would work on when we're employed in big tech companies.
- Though the scale and complexity are small, it gives a sense of how a real-time project works, which is possible mostly in a cohort and community-based learning platform like Masai.