Spotify Clone

المعمارية العامة للمشروع

المشروع مكوّن من 3 أجزاء رئيسية:

Backend (الخادم)

Admin Dashboard (لوحة التحكم)

Client App (تطبيق المستخدم النهائي)

وكلهم يتواصلون عبر REST API.

1. الـ Backend

التقنيات:

Express.js (Node.js)

MongoDB (قاعدة البيانات)

Cloudinary (تخزين الصور والملفات الصوتية)

المهام الأساسية:

إنشاء ألبومات جديدة

رفع صور الغلاف إلى Cloudinary

رفع ملفات الصوت (الأغاني) إلى Cloudinary

ربط كل أغنية بألبوم معيّن

جلب قائمة الألبومات والأغاني

حذف ألبوم أو أغنية

هيكلة نموذجية للبيانات:

Album:

title

coverImageUrl

createdAt

Song:

title

audioUrl

imageUrl (صورة الأغنية)

albumId (مرجع للألبوم)

2. Admin Dashboard

التقنيات:

React

Vite

Tailwind CSS

وظائف لوحة التحكم:

إدارة الألبومات:

إنشاء ألبوم جديد

رفع صورة الغلاف

عرض جميع الألبومات

حذف ألبوم

إدارة الأغاني:

رفع أغنية (ملف صوت + صورة)

اختيار الألبوم المرتبطة به

عرض جميع الأغاني

حذف أغنية

تتواصل مع الـ Backend عبر:

POST /albums

POST /songs

GET /albums

GET /songs

DELETE /albums/:id

DELETE /songs/:id

3. Client App (تطبيق المستخدم)

التقنيات:

React

Vite

Tailwind CSS

الوظائف الأساسية:

جلب الألبومات من الـ API

عرض قائمة الألبومات

عند الدخول على ألبوم:

عرض الأغاني التابعة له

تشغيل الصوت باستخدام <audio> أو مكتبة مخصصة

ميزات مشغل الصوت:

تشغيل / إيقاف

التالي

السابق

السحب (Seek)

إظهار الوقت الحالي ومدة الأغنية

تدفّق العمل (Flow)

الأدمن يضيف ألبوم من لوحة التحكم

يتم رفع صورة الغلاف إلى Cloudinary

يتم حفظ بيانات الألبوم في MongoDB

الأدمن يضيف أغنية:

يرفع صورة + ملف صوت

يختار الألبوم

يتم رفع الملفات إلى Cloudinary

تُحفظ الروابط في MongoDB

تطبيق المستخدم:

يجلب الألبومات والأغاني من الـ API

يشغّل الصوت مباشرة من روابط Cloudinary