Créer un Clone de Spotify (Fullstack) avec Spring boot 3, Angular 17, Bootstrap 5, PostgreSQL (2024)

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-clone-front Source code Backend (Spring boot) : https://github.com/C0de-cake/spotify-clone-back.git 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-project&language=java&platformVersion=3.2.2&packaging=jar&jvmVersion=21&groupId=fr.codecake&artifactId=spotify-clone-back&name=spotify-clone-back&description=Spotify%20Clone%20API&packageName=fr.codecake.spotify-clone&dependencies=devtools,web,security,oauth2-client,okta,liquibase,postgresql,data-jpa Fichiers utiles : Configuration de bootstrap : https://github.com/C0de-cake/spotify-clone-front/blob/main/src/assets/scss/_bootstrap-variables.scss Schema de la DB (liquibase) https://github.com/C0de-cake/spotify-clone-back/blob/main/src/main/resources/db/changelog/00000000000000_initial_schema.xml https://github.com/C0de-cake/spotify-clone-back/blob/main/src/main/resources/db/changelog/master.xml application.yml (Configuration de spring boot) https://github.com/C0de-cake/spotify-clone-back/blob/main/src/main/resources/application.yml Objet State front https://github.com/C0de-cake/spotify-clone-front/blob/main/src/app/service/model/state.model.ts Objet state back https://github.com/C0de-cake/spotify-clone-back/tree/main/src/main/java/fr/codecake/spotifyclone/infrastructure/service/dto