Name => Ayush kumar Shanu
Student code => fw22_0099
Construct week project NXM101 Batch Project starts on 21-02-2023 and completed on 25-02-2023
Project Code => Trim-pollution-4883
Website Name => Tripadvisior.com
Deployed lin => https://curious-cactus-16d1c5.netlify.app
Project type => E-commerce
Collaborative / Solo => Solo
TripAdvisor is a popular travel website that provides information about hotels, restaurants, and attractions around the world. The website was founded in February 2000 by Stephen Kaufer, Langley Steinert, and a small team of engineers in Massachusetts, USA.
Initially, the website was designed to provide unbiased reviews of hotels and resorts, but it has since expanded to include reviews of restaurants, attractions, and vacation rentals. TripAdvisor's mission is to help travelers plan and book the perfect trip, and it has become one of the most popular travel websites in the world.
TripAdvisor's business model is based on user-generated content, with travelers leaving reviews and ratings of hotels, restaurants, and attractions they have visited. The website also allows users to book hotels and other travel-related services through its partnerships with online travel agencies and direct bookings with hotels and other providers.
Over the years, TripAdvisor has grown to become a global platform with over 860 million reviews and opinions covering over 8.7 million accommodations, restaurants, and attractions in 49 markets worldwide. The company has also acquired a number of other travel-related companies, including Viator, SeatGuru, and FlipKey, to expand its services and offerings.
Today, TripAdvisor is a leading travel platform that helps millions of travelers around the world plan and book their trips.
Building a clone of a popular website like TripAdvisor using HTML, CSS, JS, MongoDB, Express, Netlify, and other technologies can be a great way for developers to practice and improve their skills. In this documentation, we will go over the process of building a clone of TripAdvisor and implementing user CRUD functionality.
Firstly, let's discuss the tech stack used for this project. HTML, CSS, and JS were used to create the front-end of the website. MongoDB was used to store and retrieve data, while Express was used to handle HTTP requests and provide a RESTful API. Netlify was used for deployment and hosting. Cyclic, a task scheduler, was used to automate repetitive tasks.
To start with, we created a wireframe and mockup of the website's layout and design using tools like Figma or Adobe XD. Then, we implemented the HTML and CSS for the site's pages, including the homepage, search page, and listing page. We also added JS functionality to allow users to interact with the site, such as filtering search results, leaving reviews, and rating listings.
Next, we set up a MongoDB database to store the website's data. This included creating collections for users, listings, and reviews. We then used Express to create API routes that would allow the front-end of the website to communicate with the database. This included routes for creating and updating users, creating and updating listings, and creating and updating reviews.
After implementing the back-end functionality, we tested the API routes using tools like Postman to ensure that they were working correctly. We then integrated the front-end and back-end, allowing users to register, log in, search for listings, and leave reviews.
Finally, we used Netlify to deploy and host the website. We set up a build process using Cyclic, which allowed us to automatically deploy changes to the website when new code was pushed to GitHub.
In terms of user CRUD functionality, we implemented the following:
User Registration: Users can create an account by providing their email, username, and password. User Login: Users can log in to their account using their email and password. User Profile: Users can view and update their profile information, including their name, profile picture, and bio. Listing Creation: Users can create new listings by providing information about the place, such as its name, location, and description. Listing Update: Users can update their existing listings, changing information such as the listing's description or images. Review Creation: Users can leave reviews for listings, including a rating and comments. Review Update: Users can update their existing reviews, changing the rating or comments. Overall, building a clone of TripAdvisor using HTML, CSS, JS, MongoDB, Express, Netlify, and Cyclic provided an excellent opportunity to learn and practice web development skills. Implementing user CRUD functionality was a key aspect of the project, allowing users to interact with the site and create and manage their accounts, listings, and reviews.