One week of dedication and hard work.. 😄
Hello Readers, I’m Subham Abhishek Jaiswal and in this blog, I would like to share with you a project that I and my team members have worked on. I hope you will also get to know something new here. First of all, I would like to thank you Masai school to give me a wonderful opportunity.
We have tried to build a pixel-perfect clone of the original website Agoda.com. Agoda is an online travel agency and metasearch engine for hotels, vacation rentals, flights, and airport transfers. It was founded in 2003 and later acquired by Booking Holdings, becoming a subsidiary of the company.
About the Project
Tech Stacks used:
React js, Redux, HTML5, CSS3, JavaScript, Material-UI.
A glimpse of the project and a simple walk-through of the website.
The website lands on the Home Page where we have a Navbar with various routes to different paths for different categories, a body, a Footer. These are all reusable components and we have used them in all routing pages as well. User can create an account by clicking Create Account button to create a new account if you don’t have one or we can also use Google authorisation for the same. This will help you to log in to the website without entering the details for the next time.
Landing page
On the landing page, You will see various popular Indian and International destinations, Reviews written by travellers. We have provided a search bar where you can search for hotels by name of the city. On hitting the search button you will be redirected to the city page where you can see various hotels being listed.
Sign-up/Sign-in Page
We have integrated the Google authorization for registration and login functionality.
Hotel List Page
This is the hotel listing page, where users can see all hotels in the selected area, you can segregate them by highest and lowest stars, reviews given by various travellers and various other parameters.
Hotel Details page
On this page, users can see all details of the selected hotel, they can see available prices, reviews, hotel location on the map, nearby places, facilities, etc.
Checkout Page
On this page, users have to provide their details and they can also see all prices and taxes and they can select preferences as well.
Payment Page
On this page, we have integrated Gpay as the payment mode. Here users can pay using Google pay. After successful payment, their hotel will be booked.
Booking History page
On this page, users can see their booked history and they delete them as well.
How we started
We were a team of four people. We started with a Zoom meeting as soon as we were assigned the project and our teammates. In the meeting, firstly we decided on how to proceed, and how would we divide the workload, what might get in the way, what resources we can use, etc.
We started with creating a repository on GitHub, created issues, and assigned them to the respective person and a milestone accordingly. It helped us a lot in completing the project within the deadline.
Roles and Responsibility of team members
Team members
Subham Abhishek Jaiswal, Abhishek Kumar Singh, Millind Anand, Avinash Kumar.
For me it is very difficult to thank them, they did very hard work on this project. So, it is better to let their work speak for them.
- Millind Anand was responsible for making the Hotel listing page.
- Avinash Kumar was responsible for making the Hotel detail page.
- Abhishek Kumar Singh was making Registration, Checkout and Bookings related pages.
- I was the in-charge of making a Landing page and handling the Git management and Routing part of the website.
Challenges
We had to face some challenges while making the clone. Producing exact layouts was a challenge. It was difficult to make the code work in everyone’s system.
Merging codes was a great challenge. There were many merge conflicts while pushing codes to GitHub that took much of our time to resolve.
Also, we were not co-located, so we faced some challenges in communication as well.
How we approached our challenges
We just focused on our strengths and taken time to understand team members and did communication according to that. Worked as per plan. We found our errors and worked on fixing them with team support.
Key learning points during this journey
- How to work and communicate with the team.
- How to present the project with the team.
- How to improve my productivity and accuracy.
- How to create real-life websites.
- How to improve self-learning capacity.
Conclusion
It was a very awesome experience, working with new team members always increase team working ability, and every time it gives new lesson with experience. In this project, I did many functionalities the first time and also, I also learned that how to implement educational skills in the project. Overall, I enjoyed working on this project. If you want to look at the project then you can go to this GitHub. In the end, I hope you liked our efforts I would like to thank you for sticking around to the end. Please like, share, and comment your suggestions down below.