HomesAndCondoRentals

Project description:

This is a project that we've created a website where you'd be able to create an account and afterwards look for rental units based on the location specified and book it if the timeframe selected is available, followed by a prompt to make a review for the experience.

Tehnologies Used :

• MongoDB : Utilized for storing the users along with their details, the bookings created for the listings, and the reviews made for the listings.
• ExpressJS : Employed as the web application framework for Node.js to handle the server-side development, routing, and middleware integration.
• React : Utilized for building the website's frontend, providing a dynamic and efficient user interface for seamless user interaction.
• NodeJS : Utilized for emulating the server-side of the website, enabling efficient and scalable handling of concurrent connections and requests.

Challenges :

• Session Tokens : Implementing secure session management and handling session tokens efficiently to ensure user authentication and authorization while maintaining data integrity and security.
• Storing the data on MongoDB : Ensuring effective data modeling and management for storing user information, booking details, and reviews in the MongoDB database, optimizing data retrieval and minimizing potential data inconsistencies.
• Secure Communication: Implementing secure communication protocols (such as HTTPS) to protect sensitive data during transmission, ensuring data confidentiality and integrity between the client and the server.

Setup

Backend setup

• Access the server directory via a new terminal and run the command npm install
• After the installation is completed, run one of the following commands nodemon server or npx nodemon server
• You should be prompted with a message in the console that the server-side is currently running:

Frontend setup

• Access the client directory via a new terminal and run the command npm install --force in order to install React and all the other dependencies
• After the installation is completed, start the website with the command npm start
• The website shall open within a new tab in the default browser configured with the route http://localhost:3000/

How to use

Registration

• In order to register you will have to click on the LOGIN / REGISTER option from the top right corner, afterwards you'll be redirected to the Sign-Up/Sign-In page.
• !! Since this project was made on our own cluster, you'll need to have the IP Address whitelisted in order to be able to register a new user within the database!!
• The two options of Sign-Up and Sign-In can be switched in between by clicking on their specific Tabs.
• REGISTER
• LOG-IN
• Within the Log-In tab we can find a Forgot Password option that once clicked will ask you to input the Email address associated with your existing account and the New Password that you'd like to have on your account

Main Page navigation

• Once you've successfully logged in, you will be prompted with a Snack Bar that'll confirm the log in process was successful and you will have a default avatar based on your First Name, that once clicked will give you the options to navigate to your Account or to Log out
• If you'll click the GET STARTED button you will scroll to a selection of fifteen popular locations that are animated with Parallax Layers on each scroll, which once clicked will redirect you to that location's Available Listings
• Desktop
• Tablet
• 
• Mobile
• 
• Once you've scrolled past all the popular locations you will have find at the bottom of the page the Footer alongside the Back-To-Top button that will scroll you back up.

Listings search

• Once you've clicked on a location or selected a search result from the Navbar's search option's results, you shall be redirected to a page that will show the Listings found for the location, additionally you can sort the listings by Price/night or Rating ascending or descending
• Desktop
• Tablet
• 
• Mobile
• 
• Each card has the Listing's first image, Listing's name, Host's avatar, Average rating alongside the number of reviews, Price/night, If the host is a SuperHost or not and by clicking/tapping on the + button you will have two options:
• Add to favorites : which will add the listing to your Favorites list, that can be later removed/accessed to check the availability from the Account page
• Check availability : which will redirect you to the listing's page where you can book it for a timeframe

Listing

• Once you've accessed a Listing you shall find all of it's details including:
• Listing Type
• Photos that are animated automatically on a slider
• Number of rooms and bathrooms
• Amenities List
• Reviews that are within our DB
• Reservation detaills required if you're willing to book
• Desktop
• Tablet
• 
• Mobile
• 
• Once you've inserted the Check in date and the Check out date if they are not grayed out ( already occupied ) you shall be prompted with the message that your booking was successfull