We created a KICKSTARTER.com clone in 6 days!
These were challenging 6 days but the outcome was worth it!
Hello Bloggers!
At Masai School’s Full Stack Web Developer course, every unit (unit 2 onward) concludes with a construct week. This week is 6 days dedicated only to working as a team to apply everything we’d learnt so far in the course and clone one of the existing websites. At present, I am in unit 5 and I’ve learnt React-Redux. So for Front-end we used React, Redux, Styled Components, Routing, Context API’s, useEffect, Forms, ref and Events, RESTful API’s and for Back-end we used NodeJS, MongoDB, ExpressJS, NodeMailer, and Multer. As the construct week for unit 5 comes to an end, I am writing this blog to document everything we’d experienced so far and the project we built.
Our team is five members strong:
- Ashwini Rathod(me!)
- Rohit Kumar Sahu
- Ravi Kumar Patel
- Mukesh Kumar
- Aakash Upadhyay
We were assigned the Kickstarter website to clone. Kickstarter is an American public benefit corporation based in Brooklyn, New York, that maintains a global crowdfunding platform focused on creativity. The company’s stated mission is to “help bring creative projects to life”. As of July 2021, Kickstarter has received nearly $6 billion in pledges from 20 million backers to fund 205,000 projects, such as films, music, stage shows, comics, journalism, video games, technology, publishing, and food-related projects.
People who back Kickstarter projects are offered tangible rewards or experiences in exchange for their pledges. This model traces its roots to subscription model of arts patronage, where artists would go directly to their audiences to fund their work.
As a team, first we established common channels of communication — Slack and Zoom along with a GitHub repository for collaboration and committing our code. Each one of us went through the website to look at its layout and the flow that a user goes through while browsing the website.
Once we’d done our individual research, we got together on our very first Zoom call as a team and divided our project into modules:
- Landing page and home page
- Sign-in and sign-up pages
- Product list and individual product pages
- Start a project and checkout pages
- Project details page
The initial two days were spent on creating the individual pages — sign-in, sign-up, landing page, home page, product list and individual product pages and project details page. Rohit was taken responsibility was creating the Backend and Ravi was taken responsibility was creating the landing page, home page, navigation bar and I was taken responsibility was creating the start a project page and styled components to be placed at the start a project page. Once the start a project page was ready, we added it to all our individual pages.
Our first challenge and revelation:
I’ll start with the revelation, each one of us had computers with different screen resolutions. So when we saw how our pages were displayed on each other’s screen, we realized what looked perfect on my own screen while I was creating it, did not look so when the same page was displayed on my team member’s screen.
The challenge was to ensure that our React component was written in such a manner that it adapted to different screen resolutions, prioritizing percentages over hard coding the dimensions. A major portion of day three was spent debugging the codes we’d written so far with Rohit taking the lead in figuring out where and what kind of changes were required. We’d fortunately learnt this important lesson just in time.
For Front-end we are used React, Redux, Styled Components, Routing, Context API’s, useEffect, Forms, Ref, Events and RESTful API’s and for Back-end we used MongoDB, NodeJS, ExpressJS, Multer and NodeMailer:
For creating the product list, individual product pages, cart page and the checkout page, the Front-end and Back-end came in handy since we were using the same layout to display different values from the same datasets — the product database and the user’s cart page product list. We were using back-end on the MongoDB Atlas to store these databases along with the user database. The back-end also acted as a go-between when we had to pass data back-and-forth between pages. We was the first one implement the code that fetched and used the data from the back-end to the front-end.
Overcoming challenges individually and as a team:
Individually, we faced issues and challenges as well. To overcome them, we revisited our concepts and attempted to resolve them ourselves. If resolving these issues on our own proved difficult, we’d frequently get on zoom calls to help each other out.
My task was to create the Styled-components, Modules and Start a Project pages. For the start a project and form pages, a major breakthrough was figuring out the categories and subcategories on the basis of which the user can click through the projects and narrow down choices. I also learnt how to create Styled Component, Modules and Start a Project pages, Form pages !
Experience so far…
This project has been a truly memorable and fruitful experience. It has taught me how to collaborate well — since each one of us were from different educational backgrounds, explaining a technical concept/solution in a way that everyone in the team understood was a good learning experience. It has also made me more assertive. I’d frequently give suggestions on improvements/changes, some were implemented and some were not. I am glad that my suggestions were heard and reviewed fairly. Our constant communication both on Slack and Zoom created a really good environment for team building and I truly enjoyed my time with my team members.
