Banana Music is a 15-week web development project that delivers an ad-free audio streaming experience designed for college students. Inspired by Spotify, the platform allows users to upload and enjoy music and podcasts, create personalized playlists, and discover new content through an integrated chatbot for tailored recommendations.
This project emphasizes modern web development practices, responsive design, and real-world full-stack functionality.
Banana Music aims to provide a clean, distraction-free alternative to traditional audio streaming platforms. By removing ads and integrating personalization features, users can focus on enjoying and organizing the content they care about most.
Key goals of the project include:
- Building a full-stack web application from scratch
- Designing an intuitive, mobile-friendly user interface
- Implementing authentication, playlists, and audio playback
- Exploring AI-assisted music discovery concepts
- Practicing collaborative development using GitHub
- User authentication (sign up & log in)
- Browse songs, podcasts, and playlists
- Audio playback (play, pause, skip)
- Create, edit, and manage playlists
- Like and save favorite tracks
- Responsive design for desktop and mobile
- Chatbot-based recommendation experience
Frontend
- React (Hooks)
- React Router
Backend
- Node.js
Tools & Platforms
- Git & GitHub (version control)
- Postman (API testing)
- Vite (development tooling)
The frontend of Banana Music is deployed using GitHub Pages, making it easy to view the live site without running the project locally.
Once deployed, the site can be accessed at:
https://<your-github-username>.github.io/<repository-name>/
(Replace <your-github-username> and <repository-name> with the actual values.)
-
Navigate to the repository on GitHub
-
Go to Settings → Pages
-
Under Source, select:
- Branch:
main - Folder:
/docsor/root(depending on your setup)
- Branch:
-
Save the changes
-
GitHub will generate the public URL for the site
Any future pushes to the selected branch will automatically update the live website.
| Week | Focus Area |
|---|---|
| 1 | Planning, tech stack selection, Figma wireframes |
| 2 | Frontend setup and navigation |
| 3 | Authentication (signup/login, JWT) |
| 4 | Database and user models |
| 5 | Music player UI and controls |
| 6 | Backend APIs (songs & playlists) |
| 7 | Song upload and storage |
| 8 | Playback and queue logic |
| 9 | Playlist management |
| 10 | Like/follow functionality |
| 11 | Mobile responsiveness & UI polish |
| 12 | Search & recommendation features |
| 13 | Testing and debugging |
| 14 | Deployment |
| 15 | Final presentation & documentation 🎉 |
- This project was built as part of a college web development course.
- The application is intended for educational and demonstration purposes.
- Backend services may require separate deployment and configuration.