Le Contexte & Le Concept (La Consigne)
Le projet Rétrozik (réalisé dans le cadre de la SAÉ 203) est une application web complète permettant de découvrir, d'écouter et de partager des webradios. L'objectif n'était pas de faire un simple lecteur audio, mais de créer une véritable plateforme communautaire avec une identité forte. Nous avons choisi de développer un univers "rétro", un hommage visuel et sonore aux décennies passées. L'application permet d'écouter des radios triées par genres (Rock, Jazz, Hip-Hop des années 80/90...), mais surtout de se créer un profil pour sauvegarder ses stations favorites dans une "collection" personnelle et d'interagir en laissant des commentaires. Le défi majeur de ce projet était sa dimension "Full-Stack" : il fallait gérer l'intégralité de la chaîne de production, du design de l'interface mobile jusqu'à la gestion sécurisée des bases de données sur le serveur.
La Recherche & Le Processus
La création de Rétrozik a demandé une grande rigueur, alliant créativité visuelle et logique de développement pur. Nous avons structuré notre processus en plusieurs grandes étapes :
• Direction Artistique et Maquettage (UI/UX) : Nous avons conçu des maquettes haute fidélité pour une utilisation prioritairement mobile. Nous avons opté pour une palette de couleurs chaleureuses et vintage (marron profond, rouge rétro, jaune moutarde) et nous avons poussé le concept graphique en représentant les radios sous forme de "cassettes audio". L'interface comprend une navigation fluide (Accueil, Lecteur Radio filtrable, Espace Connexion/Inscription et une page Profil personnalisable).
• Architecture des Données (MCD) : Avant de coder, nous avons modélisé l'ensemble du système via un Modèle Conceptuel de Données (MCD) strict. Cela nous a permis de structurer les interactions entre les tables : les Utilisateurs (pseudo, mots de passe cryptés, emails), les Radios, les Genres musicaux, et les tables de liaison pour gérer le système de "Favoris" et l'historique des "Commentaires".
• Développement Front-End & Validation Client : Nous avons développé l'interface en HTML5 et CSS (Tailwind), en y intégrant un JavaScript natif et rigoureux (sans frameworks externes). L'un de nos gros focus a été l'Expérience Utilisateur lors de la saisie des formulaires. Nous avons mis en place un système de vérification côté client très poussé utilisant des Expressions Régulières (Regex) complexes pour valider instantanément le format des adresses mails, la robustesse des mots de passe et l'unicité des pseudonymes, évitant ainsi la frustration de l'utilisateur.
• Développement Back-End & Sécurité Serveur : Côté serveur (PHP et SQL), nous avons mis en place une architecture robuste utilisant la méthode PDO pour interagir avec la base de données MariaDB. Nous avons géré les sessions utilisateurs de manière sécurisée et nous avons implémenté une seconde couche de vérification des données (côté serveur) pour garantir une protection totale contre les failles et les injections SQL, tout en respectant les normes RGPD.
Les Livrables Finaux
Le projet a abouti à une application web Rétrozik entièrement fonctionnelle, responsive (adaptée aux mobiles et bureaux), et déployée en ligne sur un serveur distant. Les livrables incluent également toute la documentation technique en amont : le Modèle Conceptuel de Données (MCD) justifiant l'architecture logicielle, ainsi que les maquettes d'interface complètes illustrant la direction artistique du projet.
Processus de Création de la DA
L'Identité Visuelle & Logo
Conception graphique du logo officiel de Rétrozik. Nous avons dessiné un logo rétro et moderne, mêlant des typographies lofi et des formes épurées pour asseoir l'identité visuelle de la webradio.
Architecture & Modélisation (MCD)
Avant de coder, nous avons structuré les interactions entre nos tables (Utilisateurs, Radios, Favoris, Commentaires) via un Modèle Conceptuel de Données (MCD) strict.
Interface Utilisateur (UI/UX)
Conception de maquettes haute fidélité pensées 'Mobile-First'. L'esthétique s'inspire des cassettes audio vintage avec des teintes chaudes et nostalgiques de marron et de jaune moutarde.
