Zostel Clone

https://zostel-clone-kerrybli.vercel.app/

We're a team of a total of six members including 2 UX-UI Designer aspirants, and 4 Full-Stack Developer aspirants of Masai School.
We developed a clone of the website of Zostel in just 5 days as a part of our curriculum of construct week in Unit-5.
This blog is all about our journey and the challenges we faced while building the project.

What was our problem statement and how did we approach it:-

So we had a problem statement that we have to create a clone of a website called Zostel.com, by using the MERN stack. We were four members in our development group.
We faced some problems in the styling part while using Bootstrap in React
But we've solved all of those problems by doing collaborative work & flawless communication.

Technology Stack Used:-

In this project we have used the following tech stack:

• Figma (Designing Tool)
• React
• CSS-module
• Styled Component
• BootStrap

Some Snapshots of our project that we made:-

Landing Page:- This is the Landing page (basically home page) when the user enters the website for the first time this page will show up. We have updated some of the carousel effects and animation.

Selected Room Description Page:-

Selected Room with price Description Page:-

Information Page:-

Payment Page:-

Payment Processing PopUp:-

Payment Successful Page:-

How We divided the work in our Team members:-

At first 2 designers have given us the link of Figma where they've already created the structure of the clone, to create the Clone Site.
As we were four members in our team so it was very important to decide how we will approach the work so that in the future we should not face any problem in merging the code, as well as the tasks, get divided into equal parts.
So, on the first day, we made a git repository and everyone was told to make their separate git branch and push their work there and when they feel that they have completed it. They can show it to one of the members and after the approval, they can merge their code to the main branch.
Although we used Slack-Channel and WhatsApp-Group for better communication.

Dada Khalandar was responsible to create the Home Page & Routing.
Akash Kumar was responsible to create the Room Description Page & all.
Akash Kumar was responsible to create the Information Page & all.
And I was responsible to create the Payment Page & all.
Also, we all together modified the CSS & other things in this Project.

The outcome and important learning from the project:-

This entire journey of making the project was awesome. We learned a lot of things while working on this project and it gave us a lot of confidence.
This is our fourth collaborative project and we can say that it's one of our best collaborative projects.
We learned a very important thing that how we work in a team. Although we could have done more, time did not allow us to go further. But we must improve it. I hope we do better in our next project.
If you want to look at the project then you can go to this GitHub link: (https://github.com/kerrybli/zostel-clone.git).
Thanks For Reading.

Team Members and Contributors 😇 :

Designers:
Himani Nakrani
Aparna Jain
Developers:
👤 Akash Chandra https://chandra-akash.github.io/AkashChandra-Portfolio/
👤 Akash Kumar https://akash06-portfolio.netlify.app/
👤 Dada Khalandar https://dada-khalandar-portfolio.vercel.app/#/
👤 Rishabh Anand

End Notes:

All the image and icon links have been taken from the main website (https://www.zostel.com/) & Figma and may be subject to copyright. So, try not to use the images or icons for business purposes or reproduce them without prior approval from the owner. The images and icons used here are just for making this project and for learning purposes.