Airbnb Clone

Full Stack Airbnb Clone

A full stack Airbnb clone application using Angular for the frontend, Spring Boot Java for the backend, PostgreSQL as the database, and Auth0 for authentication and authorization. The application includes booking management for travelers, reservation management for landlords, and comprehensive search functionalities.

Table of Contents

1. About The Project
   • Built With
2. Roadmap
3. Instructions
4. Screencaps

About The Project

The project focuses on creating a full stack Airbnb clone application. The backend is built with Spring Boot Java, interfacing with a PostgreSQL database. The frontend is developed with Angular, providing a dynamic and responsive user interface. The application includes full user authentication and authorization with Auth0, supporting role management. It features booking management for travelers, reservation management for landlords, and search functionalities by various criteria like location, date, and number of guests.

The project is deployed on an AWS EC2 instance self-hosted through Coolify. For the CI/CD process, I implemented Github actions to automatically create frontend and backend docker image is pushed to my docker hub and redeployed through Coolify.

Live Demo 🔗

(back to top)

Built With

• 
• 
• 
• 
• 
• 
• 
• 
• 
• 

(back to top)

Roadmap

• ✔️ Implement user authentication and authorization with Auth0
• ✔️ Develop a dynamic frontend using Angular
• ✔️ Build a robust backend with Spring Boot and PostgreSQL
• ✔️ Implement booking management for travelers
• ✔️ Implement reservation management for landlords
• ✔️ Develop search functionalities by location, date, guests, and other criteria
• ✔️ Utilize Docker for containerized deployment and easy setup across different environments
• ✔️ Deployed on AWS EC2 and self-hosted through Coolify
• ️️✔️ Migrated cloud server to Hetzner Cloud to reduce costs by 50%
• ✔️ Used Github Actions for CI/CD to automatically create and push docker image of app backend

(back to top)

Instructions for Local Setup

1) Setup .env file from .env.example

AUTH0_CLIENT_ID=
AUTH0_CLIENT_SECRET=

Auth0 Setup

• Create a Java Sprinboot Auth0 application. Ensure the following details are added:
  • Under application settings:
    • Replace Domain, Client ID, Client Secret on application.yml (inside server/src/main/resources and .env above)
    • Allowed Callback URLs: http://backend:8080/login/oauth2/code/okta, http://localhost:8080/login/oauth2/code/okta, http://localhost:4200/login/oauth2/code/okta, http://frontend:4200/login/oauth2/code/okta
    • Allowed Logout URLs and Allowed Web Origins: http://localhost:4200
    • Allow Cross-Origin Authentication and CORS: http://localhost:4200
  • Under Application APIs Machine To Machine Applications:
    • Ensure Permissions are on for:
      • read:client_grants, create:client_grants, delete:client_grants, update:client_grants, read:users, update:users, delete:users, create:users, read:users_app_metadata, update:users_app_metadata, create:users_app_metadata, read:roles, update:roles, read:role_members
  • Under User Management Roles:
    • Ensure Roles are created for:
      • ROLE_ADMIN, ROLE_LANDLORD, ROLE_TENANT
      • Under ROLE_Landlord, get the Role ID and replace that in the application.yml

2a) Docker Installation (Recommended)

• Ensure Docker is installed and running on your system
  • See https://docs.docker.com/ for installation instructions

1. Build the Docker image and ensure no previous cache is used:

   • docker-compose build --no-cache

2. Compose the Docker image:

   • docker-compose up
   
   
   

2b) Manual Installation

• Client frontend:

  1. npm install
  2. ng serve

• Server backend:

  1. maven clean install
  2. mvn spring-boot:run

• In the case that there are duplicate tables in the airbnb_clone database:

  • In server/src/main/resources/application.yml uncomment
    • drop-first: true
  • Run the application
    • mvn spring-boot:run
  • Recomment drop-first: true for future runs

(back to top)

Screencaps

(back to top)