ArchiveCore

ArchiveCore est une plateforme innovante de streaming musical, proposée sous forme de site web et d'application. Son objectif principal est de préserver et de rendre accessible un catalogue musical unique, comprenant :

1. Des œuvres d'artistes ayant choisi de retirer leur musique des plateformes de streaming traditionnelles.
2. Des morceaux rares, méconnus ou oubliés, difficiles à trouver ailleurs.
3. Des extraits musicaux exclusifs, teasés par des artistes lors de performances live ou partagés sur les réseaux sociaux.

Cette initiative vise à créer une archive musicale complète, offrant aux auditeurs la possibilité de redécouvrir des trésors musicaux perdus ou difficiles d'accès, tout en préservant le patrimoine musical dans sa diversité.

V.1.0

Frontend

Pour le frontend, j'ai appris à utiliser le framework Vue.js qui m'a permis de gérer les différentes pages du site et de les lier entre elles, grâce à Vue Router.

J'ai aussi appris à utiliser le système de composants et de store de Vue.js pour pouvoir gérer les données de l'utilisateur et les afficher sur le site.

Backend

Pour le backend, j'ai appris à réaliser un système d'authentification avec Node.js et Express.js que j'ai connecté directement avec ma base de données MySQL.

J'ai aussi appris à utiliser le système de routes d'Express.js pour pouvoir gérer les différentes requêtes de l'utilisateur.

Conclusion

Ce projet m'a permis de mettre un premier pied dans le monde des frameworks et de découvrir l'utilité de pouvoir modifier le DOM en temps réel.

V.2.0

Frontend

Pour le frontend, j'ai appris à utiliser le framework permettant de créer des applications desktop Electron.js. J'ai pu ainsi créer une application de bureau qui permet de gérer les différentes pages du site et de les lier entre elles, grâce à Vue Router.

J'ai également utilisé le framework Tailwind CSS pour styliser mon site, ce qui m'a permis de gagner du temps et de ne pas avoir à écrire de CSS.

J'ai aussi appris à utiliser le système de store qui me permet de gérer le lecteur audio de mon site.

Pour faciliter la gestion des erreurs, j'ai typé mon code avec TypeScript, ce qui m'a permis de voir les erreurs avant de lancer et de compiler mon application.

Code permettant de récupérer les données d'une musique et de les afficher sur la page en utilisant des types :

import { useRoute, useRouter } from 'vue-router';
import {onMounted, Ref, ref, watch} from 'vue';
import axios, {AxiosError, AxiosResponse} from 'axios';
import ArtistBubble from "../components/artist/ArtistBubble.vue";
import { getSvgPath } from 'figma-squircle';
import Tracks from "../components/tracks.vue";
import Notfound from "../components/notfound.vue";
import Buttons from "../components/button/buttons.vue";
import {Player} from "../stores/account.js";
import {Artist, Song} from "../interface"
let player = Player();
const route = useRoute();

const song : Ref<Song> = ref(null);
const cover : Ref<HTMLDivElement> = ref(null);
const rounded : Ref<string> = ref(null);
const error : Ref<boolean> = ref(false);
const artist : Ref<Artist[]> = ref([]);
const lyrics : Ref<string> = ref('');

function fetchSongData(id : string) : void {
    axios.get(`https://192.168.1.158:5132/api/song/find/${id}`, {
        withCredentials: true
    })
        .then((response : AxiosResponse<any>) => {
            song.value = response.data;
            artist.value = [];
            for (let i = 0; i < response.data.Featurings.length; i++) {
                artist.value.push(response.data.Featurings[i].artist);
                console.log(artist.value);
            }
            setTimeout(() => {
                roundedClipPath();
            }, 1);

            axios.post('https://192.168.1.158:5132/api/song/lyric', {artist: song.value.artist.name, title: song.value.title}, {
                withCredentials: true
            }).then((response : AxiosResponse<{lyrics: string}>) => {
                if(!response.data.lyrics) {
                    lyrics.value = '';
                    return;
                }
                lyrics.value = response.data.lyrics.replace(/\n/g, '<br>');
            }).catch((err : AxiosError) => {
                console.error(err);
            });


        })
        .catch((err : AxiosError) => {
            error.value = true;
        });
}

Backend

Pour le backend, j'ai encore utilisé le framework Express.js pour gérer les différentes requêtes de l'utilisateur, mais j'ai également utilisé le framework WebSocket Socket.io pour pouvoir gérer les notifications et les demandes d'amis en temps réel.

Je me suis initié à une nouvelle base de données suite à une erreur de ma part, je suis donc parti sur PostgreSQL avec l'ORM Prisma. Cela m'a permis de faire des requêtes plus facilement et plus proprement.

Code visant à récuperer les amis d'un utilisateur et à envoyer une notification en temps réel à ces amis lorsqu'il commence à écouter une musique :

    socket.on('startListening', (song) => {
        console.log('startListening');
        let userId = Object.keys(onlineUsers).find(key => onlineUsers[key] === socket.id);
        console.log(userId);
        getFriendsByUserId(parseInt(userId)).then((friends) => {
            friends.forEach((friend) => {
                io.to(onlineUsers[friend.requesterId]).emit('friendListening', {song, userId});
                io.to(onlineUsers[friend.accepterId]).emit('friendListening', {song, userId});
            })
        })
    })

Site web

Pour le site web, je suis parti sur le framework Nuxt.JS avec la librairie Nuxt UI ce qui m'a permis d'utiliser des composants déjà existants. J'ai également utilisé Nuxt Content un module qui permet de gérer du contenu statique. J'ai donc réalisé un changelog, une page de présentation et une page de téléchargement.

Je me suis inspiré d'une tendance actuelle qui est la landing page type SaaS, j'ai donc réalisé une landing page pour mon application.

Code permettant de gérer les couleurs et le style de l'application :

export default defineAppConfig({
    ui: {
        primary: 'fuchsia-blue',
        container: {
                base: 'mx-auto',
                padding: 'p-5'
        },
        button: {

        },

        accordion: {
            wrapper: "w-full flex flex-col gap-4",
            container: "border-b border-primary border-opacity-10",
        }

    }
})

Github Release

Pour la gestion des versions de mon application, j'ai utilisé les releases de Github. Cela me permet de voir les différentes versions de mon application et de pouvoir les télécharger. L'application est automatiquement compilée et publiée sur Github à chaque nouvelle version. Et lorsque utilisateurs ouvrent l'application, ils sont notifiés d'une nouvelle version disponible grâce à la librairie electron-updater.

Image montrant la page de téléchargement de l'application :