WSA Internship - Synthesia - Mohd Kaif

Описание: Project Showcase: Synthesia - Full-Stack MERN Music Streaming Platform
Overview
Synthesia is a high-performance, Spotify-inspired music streaming application built entirely on the MERN stack. This project was developed during my intensive 4-week internship at WebStack Academy, where I focused on transforming theoretical knowledge into a production-ready system.

Technical Highlights

Persistent Audio Playback: Implemented a global state using the React Context API to ensure music continues playing seamlessly while navigating across different pages (Home, Search, Favorites).


Media Player Logic: Built using the HTML5 Audio API and React's useRef hook for granular control over playback, volume, and seeking.

Secure Authentication: Integrated JWT (JSON Web Tokens) for session management and Bcrypt.js for 10-round password salt hashing to ensure user data security.

Database Design: Leveraged MongoDB's relational design (ObjectId references) to link users to their unique playlists and favorite song collections.

Internship Curriculum Timeline

Week 1: Web Foundations (HTML, CSS, JS basics).

Week 2: Dynamic Web Development (DOM, Responsive UI).

Week 3: State Management & React (Hooks, Routing, State Patterns).

Week 4: Backend Integration (RESTful APIs, Express.js, MongoDB).

Key Features

Advanced Search: Effortlessly filter music by artist, album, or genre.

Playlist Management: Full CRUD operations (Create, Read, Update, Delete) for personalized collections.

Real-time Interaction: Instant UI updates when toggling favorite songs.

Responsive Design: A modern dark-themed UI with glassmorphism effects optimized for desktop and mobile devices.

Project Structure
The application is divided into a modular Backend (Node/Express) and a Static Frontend (React/Vite) to ensure a clean separation of concerns and professional scalability.

Presented by: Mohd Kaif Internship Provider: WebStack Academy (WSA) Tech Stack: MongoDB, Express.js, React.js, Node.js