Airbnb Project

Airbnb is a minimal clone of the popular site of the same name. It was developed using the PERN stack (PostgreSQL, Express, React, Node). It also uses GraphQL for non-RESTful queries as well as JSON Web Tokens for authentication and authorization.

Final

Airbnb - Listings Page

Displays all listings available to a user and allows the user to search for specific listings based off of their address. You do not have to be logged in to view this page.

Airbnb - View Listing Page

Displays listing information and allows a user to book a listing. You do not have to be logged in to view this page however you must be logged in to book a listing.

Airbnb - My Listings Page

Displays all listings that an admin user has created. Displays similar information to the my listings page however allows an admin user to update and delete their listings.

Airbnb - New Listing Page

Page that allows an admin user to create their own listings for the site.

Airbnb - Update Listing Page

Page that allows an admin user to make changes to a previously created listing.

Airbnb - My Bookings Page

Displays all of the bookings that the user has made. Allows the user to cancel or update their current bookings. Users are not able to book dates that have previously been booked.

Airbnb - Change Booking Page

Allows a user to update their booking dates. A user will be allowed to book over the dates in the updated booking but will not be able to book dates that have previously been booked.

Getting Started

Client:

• Install all dependencies (using the npm install command).
• Run the development client using the npm start command.

Server:

• Install all dependencies (using the npm install command).
• Initialize a database to store airbnb data in PostgreSQL.
• Create and .env file using the env example provided.
• Reset the database using the npm run db:reset command.
• Run the development web server using the npm start command.

Dependencies

Client:

• Node.js
• @apollo/client,
• @testing-library/jest-dom
• @testing-library/react
• @testing-library/user-event
• bootstrap
• date-fns
• graphql
• jwt-decode
• moment
• react
• react-date-range
• react-dom
• react-router-dom
• react-scripts
• web-vitals

Server:

• bcryptjs
• cors
• dotenv
• express
• express-graphql
• graphql
• jsonwebtoken
• morgan
• pg