Hello, Readers, I hope you all are doing great.

I am Sagar Dhyani. I joined Masai School 5 months ago. In the fifth construct week, I along with three other team members got the project of cloning the Vrbo website. In this post, you will get to know in detail about how we cloned a website called Vrbo.com and the various challenges we faced associated with it. Before starting the project, I was unclear and having a lot of doubts related to the development of the project. Here are some of the big ones:

• The key points to focus on.

• Implementation of the flow of the functionalities.

• Fetching data from Mongodb atlas according to the requirements of the project.

• Division of the tasks amongst the team members considering their respective strengths.

But, all the challenges and questions were answered along the initial analysis process where we brainstormed on the various aspects of the project.

A brief overview of the Vrbo.com:

Vrbo is an American vacation rental online marketplace originally known as Vacation Rentals by Owner or VRBO. It was acquired by HomeAway in 2006.[3] Expedia Group acquired HomeAway on December 15, 2015. On March 27, 2019, VRBO was re-branded Vrbo, including a new logo, capitalization, and pronunciation. In July 2020, HomeAway and Vrbo websites became a single Vrbo website.

Acknowledgments

This Web-app is made :

• React.js

• MongoDB — Atlas

• Node.js

• Express

• Mongoose

A quick walkthrough:

Landing page:

The first thing a user encounter in a website is a landing page/home page. We decided to create a beautiful landing page that will attract users. Our main focus here was not only designing the page but ensuring that users are able to understand the flow of the website.

Sign-up and login page

With a sign-up and login page, the website looks more functional and provides users with an option to proceed further. So we have created a sign-up page where the users can register themselves. We have used mongodb atlas for saving the details of the users as soon as they register. With the same details, the user can login to the main website.

Various places offered by Vrbo:

Vrbo provides a variety of courses. We have created the same UI where a user can choose any place from the list and rent for the same. All the required data is coming from backend side.

A user can then easily filter the places according to prices and ratings.

After selecting the place, user is redirected to the payment page. As soon as user enter their card details, a popup with payment successful message will be shown to the user and he is again redirected to the home page.

Roles and responsibilities :

Sagar Dhyani (me) and Ananda Gouda worked on Backend part.

Anurag and Ravinder worked on the frontend part.

What I learned from this collaborated project:

• Understand the process and divide the task into sub-tasks.

• Time management

• Effective communication

Conclusion:

It was a great experience collaborating with team members to develop this project. It helped me to enhance my skills and understand the process of developing the project in collaboration. I am thankful to Masai School for giving me an opportunity to learn the skills and implement them for this project.