Скачать или смотреть Build a Full Stack WhatsApp Clone project with Spring Boot 3, Angular, and Keycloak

🚀 Welcome to this complete full-stack development guide where we create a Whatsapp 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 18 for the frontend, and integrate Bootstrap 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 Keycloak.

Key Features :
💬 Real-time messaging
👥 Conversations management
📁 File sharing (images, videos, documents)
🔐 Authentication and Authorization (Role management) with Keycloak (OAuth2)
🏢 Hexagonal architecture

🎯 By the end of this tutorial, you'll have a fully functional Whatsapp clone and a deeper understanding of creating 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) :
https://github.com/C0de-cake/whatsapp...

Source code Backend (Spring boot) :
https://github.com/C0de-cake/whatsapp...

Each commit comes with a chapter

Chapters:
01:42 Generate the frontend and the layout (Frontend)
13:04 Generate Backend (Backend)
22:10 Domain architecture + DB setup (Backend)
01:22:54 Authentication and Authorization (Keycloak) (Backend)
01:49:12 Authentication and Authorization (Keycloak) (Frontend)
02:17:28 Create conversations (Backend)
03:04:37 Create conversations (Frontend)
04:11:48 Server sent event implementation (Backend)
04:24:34 Server sent event implementation (Frontend)
04:34:01 User presence (WA Header) (Backend)
04:39:56 User presence (WA Header) (Frontend)
04:55:38 Sending messages (Backend)
05:13:31 Sending messages (Frontend)
05:44:15 Messages UI (Backend)
05:57:19 Messages UI (Frontend)
06:34:28 Conclusion

Resources:

Lien vers le spring boot starter (backend)
https://start.spring.io/#!type=maven-...

Style sheets
https://github.com/C0de-cake/whatsapp...
https://github.com/C0de-cake/whatsapp...

Folder DB ChangeLog (Liquibase configuration)
https://github.com/C0de-cake/whatsapp...

application.yml (Configuration de spring boot)
https://github.com/C0de-cake/whatsapp...

Shared package (Backend)
https://github.com/C0de-cake/whatsapp...

Wire package (Backend)
https://github.com/C0de-cake/whatsapp...

Keycloak docker
https://github.com/C0de-cake/whatsapp...