Créer un Clone de Spotify (Fullstack) avec Spring boot 3, Angular 17, Bootstrap 5, PostgreSQL (2024)
Cyril from CodeCake
0:00 / 0:00
Créer un Clone de Spotify (Fullstack) avec Spring boot 3, Angular 17, Bootstrap 5, PostgreSQL (2024)
18 359 просмотров · 2 года назад
Cyril from CodeCake
7,24 тыс. подписчиков
18 359 просмотров · 2 года назад
Dans cette vidéo, nous plongeons dans la création d'un clone de Spotify, en utilisant Spring Boot 3 pour le backend, Angular 17 pour le frontend, avec Bootstrap 5 pour le design, PostgreSQL pour la base de données, et Auth0 pour l'authentification. Que vous soyez débutant ou expérimenté, ce guide pas à pas vous fournira les connaissances et les compétences nécessaires pour construire une application fullstack robuste et moderne.
Fonctionnalités clés :
🔐 Sécurisation avec Auth0 (Oauth2)
🎶➕ Upload Musique
🎧 Streaming Audio
🔍 Fonction Recherche
❤️ Favoris Utilisateurs
📱💻 UI Responsive Bootstrap
🅰️ Dernières fonctionnalités d'Angular: Signal, Standalone component, New Control flow syntax
Source code Frontend (Angular) :
https://github.com/C0de-cake/spotify-...
Source code Backend (Spring boot) :
https://github.com/C0de-cake/spotify-...
Chaque commit correspond à un chapitre
Chapitres:
00:00 Introduction
00:54 Création du projet frontend
15:58 Création du projet backend
39:00 Configuration d'Auth0 (Backend)
57:09 Configuration d'Auth0 (Frontend)
01:16:39 Ajout de musique (Frontend)
01:44:31 Ajout de musique (Backend)
01:57:48 Affichage musique (Backend)
01:59:54 Affichage musique (Frontend)
02:14:39 Affichage musique librairie (Frontend)
02:19:34 Lecteur de musique (Backend)
02:22:15 Lecteur de musique (Frontend)
02:53:54 Recherche de musique (Backend)
02:56:53 Recherche de musique (Frontend)
03:10:06 Gestion des favoris (Backend)
03:23:28 Gestion des favoris (Frontend)
03:39:06 Conclusion
Ressources:
Lien vers le spring boot starter (backend)
https://start.spring.io/#!type=maven-...
Fichiers utiles :
Configuration de bootstrap :
https://github.com/C0de-cake/spotify-...
Schema de la DB (liquibase)
https://github.com/C0de-cake/spotify-...
https://github.com/C0de-cake/spotify-...
application.yml (Configuration de spring boot)
https://github.com/C0de-cake/spotify-...
Objet State front
https://github.com/C0de-cake/spotify-...
Objet state back
https://github.com/C0de-cake/spotify-...