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.
Construct Week at Masai: Building a Fastrack Website Clone.
Explore the exciting journey of Construct Week at Masai, where students collaborate to build a Fastrack website clone, gaining real-world project experience and teamwork skills.
Construct Week at Masai goes beyond mere website development; it's a comprehensive learning experience that teaches students the art of teamwork, effective communication, and project execution. This article delves into the intricacies of Construct Week and its significance in the Masai curriculum.
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.
Overcoming Challenges
As we began connecting the front end to the backend, we encountered a CORS error, which we promptly resolved by integrating the Cors package into the backend. Another hurdle arose when accessing MongoDB Atlas, the cloud-based version of MongoDB. We had to adjust network access settings to ensure connectivity from anywhere.
However, an unexpected twist occurred during the final hours before the project deadline. Although individual pages functioned seamlessly, merging files led to the breakdown of the user interfaces across multiple pages, even though each page had its separate CSS file. This necessitated a complete rewrite of the CSS code, a race against time, considering the impending video presentation.
The video presentation is a critical aspect of Construct Week, where team members explain their contributions and showcase the project. Given the time constraints imposed by free Zoom accounts, we practised rigorously, taking short breaks and sharing Zoom links regularly. Eventually, we resolved all CSS issues and verified the functionality one last time just an hour before the deadline.
The Final Push
With Masai's strict deadlines looming over us, we had no choice but to rehearse and submit the video presentation within a limited timeframe. We crafted a compelling presentation video in just 30 minutes thanks to our effective communication and coordination. Subsequently, we submitted the video and the repository link and performed some code cleanup.
The following day, the top three projects were announced, and it was a pleasant surprise to witness someone I knew on the runner-up team. Each team presented their project, highlighting their achievements. This recognition was a testament to the hard work and dedication we invested in our Fastrack project.
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.
Conclusion
Construct Week at Masai is not merely about website development; it's a transformative experience that equips students with the skills and confidence to tackle real-world challenges in the tech industry. This program builds impressive portfolios and fosters a sense of accomplishment and camaraderie among participants. The lessons learned during Construct Week will undoubtedly prove invaluable as we look ahead to our careers.
FAQs
Why is Construct Week considered a pivotal part of the Masai curriculum?
Construct Week at Masai holds immense significance as it provides students with a hands-on, real-world project experience. It goes beyond technical skills and teaches vital aspects of teamwork, effective communication, and project management. Students collaborate to build a website clone, applying what they've learned throughout the month. This program equips them with practical skills and confidence to succeed in the tech industry.
How are team members selected, and how is leadership determined for Construct Week projects at Masai?
Team composition for Construct Week projects is determined by Masai, often resulting in diverse teams comprising students from different parts of the country. Within each team, one member is elected as the project leader by the team itself. This leadership role involves overseeing project planning and execution. Masai allows students to manage the entire project process independently, with minimal intervention, while providing access to Instructional Associates (IAs) for technical guidance when needed.