Skip to content

Haley-Crawford/Web-Development-Project

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

99 Commits
 
 
 
 
 
 

Repository files navigation


🍌 Banana Music

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.


🌟 High-Level Overview

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

🎧 Core Features

  • 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

🛠️ Tech Stack

Frontend

  • React (Hooks)
  • React Router

Backend

  • Node.js

Tools & Platforms

  • Git & GitHub (version control)
  • Postman (API testing)
  • Vite (development tooling)

🌐 Accessing the Website (GitHub Pages)

The frontend of Banana Music is deployed using GitHub Pages, making it easy to view the live site without running the project locally.

🔗 Live Site

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.)

📌 How GitHub Pages Is Set Up

  1. Navigate to the repository on GitHub

  2. Go to Settings → Pages

  3. Under Source, select:

    • Branch: main
    • Folder: /docs or /root (depending on your setup)
  4. Save the changes

  5. GitHub will generate the public URL for the site

Any future pushes to the selected branch will automatically update the live website.


📆 Project Timeline

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 🎉

📌 Notes

  • 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.

Releases

No releases published

Packages

No packages published

Contributors 5