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.
- 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.
- 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.
- Access the
server
directory via a new terminal and run the commandnpm install
- After the installation is completed, run one of the following commands
nodemon server
ornpx nodemon server
- You should be prompted with a message in the console that the server-side is currently running:
- Access the
client
directory via a new terminal and run the commandnpm 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/
- 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 theEmail address
associated with your existing account and theNew Password
that you'd like to have on your account
- 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 yourAccount
or toLog out
- If you'll click the
GET STARTED
button you will scroll to a selection of fifteen popular locations that are animated withParallax Layers
on each scroll, which once clicked will redirect you to that location'sAvailable 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 theBack-To-Top
button that will scroll you back up.
- 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 theListings
found for the location, additionally you can sort the listings byPrice/night
orRating
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 yourFavorites
list, that can be later removed/accessed to check the availability from theAccount
pageCheck availability
: which will redirect you to the listing's page where you can book it for a timeframe
- Once you've accessed a
Listing
you shall find all of it's details including: Listing Type
Photos
that are animated automatically on a sliderNumber of rooms and bathrooms
Amenities List
Reviews
that are within our DBReservation detaills
required if you're willing to book- Desktop
- Tablet
- Mobile
- Once you've inserted the
Check in date
and theCheck out date
if they are not grayed out ( already occupied ) you shall be prompted with the message that your booking was successfull