Create a Full Stack Airbnb clone with Angular 17, PrimeNG, Spring boot 3, PostgreSQL (2024 project)

🚀 Welcome to this complete full-stack development guide where we're creating an Airbnb clone using some of the latest and most efficient technologies in 2024! In this YouTube tutorial, we'll dive deep into using Spring Boot 3 for our backend development, Angular 17 for the frontend, and integrate PrimeNG for sleek and responsive UI components. Our database management will be handled by PostgreSQL, ensuring robust data handling, and for secure authentication, we're utilizing Auth0.

Key Features :
- 📅 Booking management for travelers
- 🏠 Landlord reservation management
- 🔍 Search for houses by criteria (location, date, guests, beds, etc)
- 🔐 Authentication and Authorization (Role management) with Auth0 (OAuth2)
- 🏢 Domain-driven design

🎯 By the end of this tutorial, you'll have a fully functional Airbnb clone and a deeper understanding of how to create a full-stack application from scratch. You'll be equipped with the knowledge to tackle similar large-scale projects and incorporate these technologies into your future endeavors.

💬 Join the conversation! Drop your questions and feedback in the comments section below. Don’t forget to subscribe and hit the notification bell to stay updated on more tutorials like this.

Let's get coding and bring this project to life! Happy coding!

Source code (Angular) :
Source code Backend (Spring boot) :

Each commit comes with a chapter

Chapitres:
- 01:16 Generate the frontend and the layout (Frontend)
- 31:48 Generate Backend (Backend)
- 52:59 Authentication and Authorization (Auth0) (Backend)
- 01:22:32 Authentication and Authorization (Auth0) (Frontend)
- 01:40:07 Create a listing for landlord (Backend)
- 02:02:07 Create a listing for landlord (Frontend)
- 03:28:59 Landlord listing (Backend)
- 03:39:39 Landlord listing (Frontend)
- 04:08:19 Listing by category (Backend)
- 04:12:05 Listing by category (Frontend)
- 04:27:04 Display listing (Backend)
- 04:34:06 Display listing (Frontend)
- 04:52:18 Reservation system (Backend)
- 05:05:47 Reservation system (Frontend)
- 05:26:35 My booking (Backend)
- 05:36:28 My booking (Frontend)
- 05:49:32 My reservation (Backend)
- 05:56:29 My reservation (Frontend)
- 06:05:16 Search (Backend)
- 06:13:13 Search (Frontend)
- 06:40:08 Conclusion

Resources:

Lien vers le spring boot starter (backend)

Font folder :

Folder theme PrimeNG

Style sheet

Folder DB ChangeLog (Liquibase configuration)

Objet State front

Objet state back

[code-cake]

If you have an error related to the schema (airbnb_clone), it's because you need to create it manually :
- You need to connect to the DB first => the credential of the PG DB is the one you put inside the compose.yml
- Once you are connected you need to create the schema manually

[allessioyassine]

coninue like this .. and you will be one of the pioneers of Java Stack community on the entire Web Brother

[shreyojitdas]

angular and springboot the best....all the other youtube go with easy and same nextjs and for more such awesome content and learn more

[ahmed]

Great to see an up-to-date project. Following an old tutorial is a nightmare with the fast pace of framework updates. Thanks !

[henrybenedict]

I've been learning spring boot and angular for the last week, this video is the best

[ayushs_k]

was waiting for someone to put Spring boot tutorials, and there you are!!! Thank you :)

[nassima-ag]

Soo Good thank you for this. all angular and springboot project i find on youtube are eather simple and common or not very well explained. hope for more content like this

[QuickCodeClips]

Thank you for superb video. I greatly thankful to watch your video.

[az]

On veut des projets comme ça toujours en spring boot et angular 🔥🔥

[ertemeren]

Good to see that you begin english videos

[aniketdesai]

Got the solution!
Needed to use the credentials defined in docker and setup those in pgadmin to connect and then create a schema first to ensure no error when starting the spring boot application for first time!
In video these steps should have been included. Many people faced same issue

[liqwis]

Great job on the Airbnb clone! It’s an impressive application. I’d love to see more of your work. Could you consider creating other clones as well, such as a doctor appointment scheduling web app or an e-commerce platform using Spring Boot with Angular or React? Your expertise would be incredibly valuable, and it would be fantastic if you could teach us how you build these applications.

Looking forward to your future projects!

[Nokoredev]

merci beaucoup, j'apprends tellement de votre contenu

[houssemzaier]

En tant que francophone, je ne peux que vous soutenir. Merci pour la qualité

[Ludo]

Bonjour,
Ce tutoriel projet est très intéressant.

De manière général, je pense qu'il est plus aisé pour des tutoriels aussi long de découper en plusieurs vidéos de 1h ou 2h si il faut, et d'en faire une playlist. ça organise le tutoriel et la navigation de celui ci. (oui, j'ai bien vu les marqueurs de temps dans la description ne t’inquiète pas). Plus une vidéo est longue plus il est difficile d'y naviguer avec la souris par exemple.

Référencement 👌

[mirsaid-ahmadkhujamurtazoe]

Hi everyone. Can somene share with this project's git hub repo ?

[DooomeGames]

any one encounter this error after register with oauth library ? [invalid_id_token] An error occurred while attempting to decode the Jwt: The ID Token contains invalid claims: {iat=2024-08-01T08:38:52Z}

[nickgatej]

Hi, awesome tutorial! Keep up the good work! :D Could you please show us in an upcoming video how to Dockerize the application and deploy it?

[bartekdurczak]

great content!!! Could you make a project with Angular SSR like e commerce store or cool portfolio site ?

[adityagautam]

in angular 17, do we not need to create feature modules instead of only components and then load them lazy to boost load time etc which used to frequent practice in older version ?? has all of that gone with new version??