🎵 PlayLoud - Online Music Streaming Platform

A modern, full-featured music streaming web application with premium subscriptions

Features • Tech Stack • Getting Started • Screenshots • License

📖 About The Project

🎶 PlayLoud brings your music to life! A feature-rich, full-stack streaming platform designed for music lovers who want a seamless, ad-free listening experience.

PlayLoud is built with modern web technologies and powered by Appwrite for backend services, offering everything from user authentication to cloud storage. Whether you're creating playlists, discovering new artists, or going premium for exclusive perks, PlayLoud has got you covered! 🚀

🌟 Why PlayLoud?

✅ 100% Beginner-Friendly - Easy setup with step-by-step guides
✅ Modern Tech Stack - Built with latest React, Vite, and Tailwind CSS
✅ Secure Payments - Integrated with Razorpay for safe transactions
✅ Cloud-Powered - Appwrite handles auth, database, and storage
✅ Responsive Design - Works perfectly on all devices 📱💻
✅ Open Source - Learn, contribute, and grow! 🌱

✨ Features

🎧 Core Music Features

🎵 Music Playback - Persistent audio player across all pages
🔍 Browse & Search - Discover songs, artists & genres
📝 Smart Playlists - Create, edit & manage custom playlists
❤️ Liked Songs - Save your favorite tracks instantly
🕒 Recently Played - Track your listening history
🎸 Genre & Artist Pages - Explore by category
🎚️ Volume Control - Adjust playback settings
⏭️ Skip/Previous - Easy track navigation

👤 User Management

🔐 Secure Authentication - Email/Password login
🔑 Google OAuth - One-click social login
👨‍💼 User Profiles - Customizable with avatar
🖼️ Avatar Upload - Personalize your profile
🔒 Session Management - Token-based security
📧 Password Recovery - Reset forgotten passwords
✏️ Edit Profile - Update name & details
🎯 User Preferences - Save your settings

💎 Premium Features

💳 3 Subscription Plans - Monthly, Quarterly, Half-Yearly
🛡️ Secure Payments - Razorpay integration
🚫 Ad-Free Listening - No interruptions
📥 Offline Playback - Download & listen offline
⏩ Unlimited Skips - Skip as many songs as you want
🎁 Exclusive Content - Access premium tracks
🏆 Priority Support - Get help faster
🚀 Early Access - Be first to hear new releases
🎯 Personalized Recommendations - AI-powered suggestions

🎨 UI/UX

📱 Fully Responsive - Perfect on all devices
🌙 Dark Theme - Easy on the eyes
⚡ Fast & Smooth - Optimized performance
🎭 Modern Design - Clean Tailwind CSS interface
🔄 Real-time Updates - Instant content loading
🎬 Smooth Animations - Delightful interactions
🧭 Easy Navigation - Intuitive sidebar & navbar
🎨 Beautiful Cards - Aesthetic song displays
🖱️ Hover Effects - Interactive elements

🛠️ Tech Stack

Frontend Technologies

Backend Technologies

Cloud & Database

📦 Key Dependencies

Category	Technology	Version	Purpose
Framework	React	19.1.1	UI Library for building components
Build Tool	Vite	7.1.2	Fast development & build tool
Styling	Tailwind CSS	4.1.13	Utility-first CSS framework
Routing	React Router	7.9.1	Client-side routing
Icons	Heroicons	2.2.0	Beautiful hand-crafted SVG icons
Backend	Express	5.1.0	Web framework for Node.js
Payments	Razorpay SDK	2.9.6	Payment gateway integration
BaaS	Appwrite	20.1.0	Backend services platform
Server SDK	node-appwrite	20.0.0	Appwrite server-side SDK
CORS	cors	2.8.5	Cross-origin resource sharing
Env	dotenv	17.2.3	Environment variable management

🚀 Getting Started

💡 New to coding? Don't worry! We'll guide you through every step. Just follow along! 🌟

✅ Prerequisites

Before starting, make sure you have these installed on your computer:

Tool	Version	Purpose	Download Link
🟢 Node.js	v18+	JavaScript runtime	Download
📦 npm	Latest	Package manager	Comes with Node.js
☁️ Appwrite Account	Free	Backend services	Sign Up
💳 Razorpay Account	Free	Payment gateway	Sign Up
💻 Code Editor	Any	VS Code recommended	Download
🌐 Web Browser	Modern	Chrome/Firefox/Safari	Any modern browser

📥 Installation Guide

Step 1: Clone the Repository 📂

# Open your terminal and run:
git clone https://github.com/ChiragVasava/PlayLoud.git
cd playloud

💡 Tip: Not sure how to open terminal?

Windows: Press Win + R, type cmd, press Enter

Mac: Press Cmd + Space, type terminal, press Enter

Linux: Press Ctrl + Alt + T

Step 2: Frontend Setup ⚛️

# Make sure you're in the playloud folder
# Install all frontend dependencies (this might take a few minutes ☕)
npm install

Create your environment file:

# For Windows users:
copy .env.example .env

# For Mac/Linux users:
cp .env.example .env

Edit .env file (use any text editor):

# 🔧 Copy these values from your Appwrite Console
VITE_APPWRITE_ENDPOINT=https://cloud.appwrite.io/v1
VITE_APPWRITE_PROJECT_ID=your_project_id_here
VITE_APPWRITE_DATABASE_ID=your_database_id_here
VITE_APPWRITE_BUCKET_ID=your_bucket_id_here
VITE_APPWRITE_STORAGE_ID=your_storage_id_here

🤔 Where do I find these values? Don't worry! We'll show you in Step 4: Appwrite Setup below.

Step 3: Backend Setup 🖥️

# Go to backend folder
cd playloud-backend

# Install backend dependencies
npm install

# Create environment file
# For Windows:
copy .env.example .env

# For Mac/Linux:
cp .env.example .env

Edit playloud-backend/.env file:

# 💳 Razorpay Configuration (Get from Razorpay Dashboard)
RAZORPAY_KEY_ID=rzp_test_XXXXXXXXXXXX
RAZORPAY_KEY_SECRET=XXXXXXXXXXXXXXXX

# ☁️ Appwrite Configuration (Same as frontend + API Key)
APPWRITE_ENDPOINT=https://cloud.appwrite.io/v1
APPWRITE_PROJECT_ID=your_project_id_here
APPWRITE_API_KEY=your_server_api_key_here
APPWRITE_DATABASE_ID=your_database_id_here

# 📊 Collection IDs (We'll get these from Appwrite)
SUBSCRIPTIONS_COLLECTION_ID=your_subscriptions_collection_id
PAYMENTS_COLLECTION_ID=your_payments_collection_id

# 🔧 Optional Settings
WEBHOOK_SECRET=your_webhook_secret_here
CORS_ORIGIN=http://localhost:5173
PORT=5000

📌 Important: Never share your .env files or commit them to GitHub!

Step 4: Appwrite Setup ☁️

Appwrite provides backend services so you don't need to build your own server! Here's how to set it up:

🔷 4.1 Create Appwrite Project (Click to expand)

Go to Appwrite Console
Click "Create Project"
Name it: PlayLoud
Click Create
📋 Copy your Project ID (you'll see it at the top)
Paste it in both .env files for PROJECT_ID

🔷 4.2 Configure Authentication (Click to expand)

In your project, click "Auth" in sidebar
Click "Settings" tab
Enable Email/Password:
- Toggle "Email/Password" to ON ✅
Enable Google OAuth:
- Toggle "Google" to ON ✅
- Follow the instructions to set up Google OAuth
- Add callback URL: https://cloud.appwrite.io/v1/account/sessions/oauth2/callback/google/YOUR_PROJECT_ID

🔷 4.3 Create Database (Click to expand)

Click "Databases" in sidebar
Click "Create Database"
Name: PlayLoud_DB
Click Create
📋 Copy the Database ID
Paste it in both .env files

🔷 4.4 Create Collections (Click to expand)

Now we'll create tables (called Collections) to store our data. Create these 7 collections:

Collection 1: 🎵 songs

Click "Create Collection" → Name: songs → Create
Then add these attributes (Click "Add Attribute"):
- title → String → Size: 255 → Required ✅
- artist → String → Size: 255 → Required ✅
- album → String → Size: 255
- genre → String → Size: 100
- duration → Integer → Required ✅
- audioFileId → String → Size: 255 → Required ✅
- coverImageId → String → Size: 255
- releaseDate → DateTime

Collection 2: 📝 playlists

- userId → String → Size: 255 → Required ✅
- name → String → Size: 255 → Required ✅
- description → String → Size: 1000
- coverImageId → String → Size: 255
- isPublic → Boolean → Default: false
- createdAt → DateTime → Required ✅

Collection 3: 🔗 playlist_songs

- playlistId → String → Size: 255 → Required ✅
- songId → String → Size: 255 → Required ✅
- addedAt → DateTime → Required ✅
- order → Integer → Default: 0

Collection 4: ❤️ liked_songs

- userId → String → Size: 255 → Required ✅
- songId → String → Size: 255 → Required ✅
- likedAt → DateTime → Required ✅

Collection 5: 🕒 recently_played

- userId → String → Size: 255 → Required ✅
- songId → String → Size: 255 → Required ✅
- playedAt → DateTime → Required ✅

Collection 6: 💎 subscriptions

- userId → String → Size: 255 → Required ✅
- planId → String → Size: 50 → Required ✅
- planName → String → Size: 100 → Required ✅
- amount → Integer → Required ✅
- status → String → Size: 20 → Required ✅
- startDate → DateTime → Required ✅
- endDate → DateTime → Required ✅
- razorpayPaymentId → String → Size: 255

Collection 7: 💳 payments

- userId → String → Size: 255 → Required ✅
- planId → String → Size: 50 → Required ✅
- planName → String → Size: 100 → Required ✅
- amount → Integer → Required ✅
- currency → String → Size: 10 → Required ✅
- status → String → Size: 20 → Required ✅
- razorpayPaymentId → String → Size: 255
- razorpayOrderId → String → Size: 255
- paidAt → DateTime → Required ✅

💡 Pro Tip: For subscriptions and payments collections:

After creating, click on the collection

Look at the URL: .../collection-XXXXX

Copy that XXXXX - that's your Collection ID!

Paste in backend .env file

🔷 4.5 Create Storage Bucket (Click to expand)

Click "Storage" in sidebar
Click "Create Bucket"
Name: media
File Size Limit: 50MB
Allowed File Extensions: mp3, mp4, jpg, jpeg, png, webp
Permissions:
- Read: role:all (anyone can view)
- Create: role:users (logged-in users can upload)
Click Create
📋 Copy the Bucket ID
Paste it in frontend .env as BUCKET_ID and STORAGE_ID

🔷 4.6 Generate API Key (Click to expand)

This is for your backend server to securely access Appwrite:

Click "Settings" (bottom of sidebar)
Click "API Keys" tab
Click "Create API Key"
Name: Backend Server
Expiration: Never (or set a date)
Scopes: Select ALL of these ✅
- databases.read
- databases.write
- collections.read
- collections.write
- documents.read
- documents.write
- files.read
- files.write
Click Create
📋 COPY THE KEY IMMEDIATELY (you won't see it again!)
Paste in backend .env as APPWRITE_API_KEY

Step 5: Razorpay Setup 💳

Razorpay handles all payment processing securely!

🔶 5.1 Create Razorpay Account (Click to expand)

Go to Razorpay
Sign up with your email
Complete verification
Switch to Test Mode (toggle at top)

🔶 5.2 Get API Keys (Click to expand)

Go to Settings → API Keys
Click "Generate Test Key"
You'll see:
- Key ID (starts with rzp_test_)
- Key Secret (click eye icon to reveal)
📋 Copy both
Paste in backend .env:
- RAZORPAY_KEY_ID
- RAZORPAY_KEY_SECRET

⚠️ Important: Never share your Key Secret!

🔶 5.3 Test Cards (Click to expand)

Use these cards for testing payments:

✅ Successful Payment:

Card: 4111 1111 1111 1111
CVV: 123
Expiry: Any future date
Name: Your name

❌ Failed Payment:

Card: 4000 0000 0000 0002

UPI:

UPI ID: success@razorpay

🎬 Running the Application

Now let's start both servers!

Terminal 1: Start Backend 🖥️

# Make sure you're in playloud-backend folder
cd playloud-backend

# Start the backend server
npm run dev

# ✅ You should see:
# 🚀 Server running on http://localhost:5000
# ✅ Razorpay Key ID: Configured
# ✅ Appwrite API Key: Configured

Terminal 2: Start Frontend ⚛️

Open a NEW terminal window and run:

# Go back to project root (if you're in backend folder)
cd ..

# Start the frontend
npm run dev

# ✅ You should see:
# VITE v7.1.2  ready in XXX ms
# ➜  Local:   http://localhost:5173/

🎉 Success! Open Your Browser

Open your browser
Go to: http://localhost:5173
You should see PlayLoud homepage! 🎵

🎊 Congratulations! You've successfully set up PlayLoud!

🏗️ Production Build

When you're ready to deploy:

# Build frontend for production
npm run build

# This creates a 'dist' folder with optimized files

# Preview production build locally
npm run preview

# For backend in production
cd playloud-backend
npm start

🔒 Security & Best Practices

🛡️ Environment Variables Never commit `.env` files to Git Add `.env` to `.gitignore` always Use different keys for dev/production Rotate API keys every 3-6 months Store secrets in secure vaults Never hardcode sensitive data	🔐 Backend Security Keep Razorpay Secret server-side only Validate ALL payment signatures Use minimal API key permissions Implement rate limiting Enable CORS with whitelist Log all security events
🔒 Frontend Security Never expose secrets in code Validate all user inputs Implement auth checks Use secure session management Sanitize displayed data Enable HTTPS in production	✅ Production Checklist Switch to Live Razorpay keys Enable HTTPS everywhere Set up error monitoring Configure backup systems Test all payment flows Update CORS origins Enable rate limiting

🧪 Testing Your Setup

Quick Test Checklist

# 1. Test Backend Health
curl http://localhost:5000/
# Should return: {"status": "Server is running ✅"}

# 2. Test Frontend
# Open http://localhost:5173 in browser
# You should see PlayLoud homepage

# 3. Test Authentication
# Try signing up with a test email
# Try Google login

# 4. Test Music Player
# Play a song (if you have songs in database)
# Check if audio plays correctly

# 5. Test Payment (Use Test Cards!)
# Go to Premium page
# Click "Subscribe Now"
# Use card: 4111 1111 1111 1111
# CVV: 123, Expiry: 12/25
# Check backend logs for payment verification

Razorpay Test Cards

Scenario	Card Number	CVV	Result
Success	4111 1111 1111 1111	123	Payment successful
Failure	4000 0000 0000 0002	123	Payment fails
3D Secure	4000 0000 0000 3220	123	Requires OTP

Test UPI: success@razorpay

📸 Screenshots

🏡 Home Page

*Main landing page with featured songs and persistent music player*

🔍 Search Page

*Discover new music, artists, and genres with smart search*

🎧 Library Page

*Your personal collection: playlists, liked songs, and recently played*

➕ Create Playlist

*Easy playlist creation with custom cover images*

❤️ Liked Songs

*Quick access to all your favorite tracks*

📝 Sign Up Page

*Simple registration with email or Google OAuth*

👤 Profile Page

*Manage your account, avatar, and preferences*

💎 Premium Page

*Choose your subscription plan with detailed features comparison*

💳 Payment Gateway

*Secure Razorpay checkout with multiple payment options*

✅ Payment Success

*Confirmation page after successful subscription*

🔒 Security Best Practices

Environment Variables

Never commit .env files to version control
Add .env to .gitignore
Use different API keys for development and production
Rotate API keys periodically

Backend Security

Keep Razorpay Key Secret server-side only
Validate all payment signatures on backend
Use Appwrite API keys with minimal required permissions
Implement rate limiting for API endpoints
Enable CORS with specific origin whitelist

Frontend Security

Never expose sensitive keys in frontend code
Validate user inputs
Implement proper authentication checks
Use secure session management

🧪 Testing Payment Integration

Test Cards (Razorpay Test Mode)

Successful Payment:

Card Number: 4111 1111 1111 1111
CVV: 123
Expiry: Any future date
Name: Any name

Failed Payment:

Card Number: 4000 0000 0000 0002

UPI:

UPI ID: success@razorpay

📁 Project Structure

PlayLoud/
├── playloud-backend/          # Backend server
│   ├── .env                   # Backend environment variables
│   ├── server.js              # Express server entry point
│   └── package.json           # Backend dependencies
│
├── src/                       # Frontend source code
│   ├── components/            # React components
│   │   ├── auth/             # Authentication components
│   │   ├── pages/            # Page components
│   │   ├── profile/          # User profile
│   │   └── ui/               # Reusable UI components
│   ├── context/              # React Context (state management)
│   ├── lib/                  # Configuration files
│   │   └── appwrite.js       # Appwrite client setup
│   ├── utils/                # Helper functions
│   ├── App.jsx               # Main App component
│   └── main.jsx              # Entry point
│
├── public/                    # Public assets
├── .env                       # Frontend environment variables
├── package.json               # Frontend dependencies
└── README.md                  # This file

🐛 Troubleshooting

Common Issues

"Razorpay is not defined"

Solution: Razorpay SDK is loaded dynamically in Premium.jsx. Ensure your internet connection is stable.

Payment Verification Failed

Solution:

Verify Razorpay Key Secret in backend .env
Ensure backend server is running
Check signature verification logic

CORS Errors

Solution:

Verify CORS_ORIGIN in backend .env matches your frontend URL
Ensure backend is running before starting frontend

Appwrite Connection Issues

Solution:

Verify all Appwrite IDs in .env files are correct
Check Appwrite project settings
Ensure API key has required permissions

Collection Not Found

Solution:

Get actual Collection IDs from Appwrite Console
Collection ID is in the URL when viewing a collection
Update backend .env with correct IDs

📚 API Endpoints

Backend Routes

Method	Endpoint	Description
GET	`/`	Health check
POST	`/create-order`	Create Razorpay order
POST	`/verify-payment`	Verify payment signature
POST	`/webhook`	Handle Razorpay webhooks

🚢 Deployment

Frontend Deployment (Vercel/Netlify)

Build the project:
```
npm run build
```
Deploy dist folder to:
- Vercel: vercel --prod
- Netlify: Drag & drop dist folder
Add environment variables in hosting platform

Backend Deployment (Railway/Render/Heroku)

Push backend to separate repository
Configure environment variables on platform
Deploy and note the production URL
Update frontend to use production backend URL

Production Checklist

Switch Razorpay to Live Mode
Update all API keys to production values
Enable HTTPS
Configure production CORS origins
Set up monitoring and logging
Test all payment flows
Configure webhooks with production URL

🤝 Contributing

Contributions are welcome! Please follow these steps:

Fork the repository
Create a feature branch (git checkout -b feature/AmazingFeature)
Commit your changes (git commit -m 'Add some AmazingFeature')
Push to the branch (git push origin feature/AmazingFeature)
Open a Pull Request

📄 License

This project is licensed under the terms specified in LICENSE.txt.

🙏 Acknowledgments

Appwrite - For providing excellent BaaS platform
Razorpay - For secure payment processing
React - For the amazing frontend framework
Tailwind CSS - For rapid UI development
Vite - For blazing fast development experience

📧 Contact

For questions or support, please open an issue on GitHub or contact:

Project Repository: PlayLoud
Email: v.chira.007@gmail.com

Made with ❤️ by Chirag Vasava

⭐ Star this repo if you find it helpful!

Name		Name	Last commit message	Last commit date
Latest commit History 16 Commits
docs		docs
playloud-backend		playloud-backend
public		public
src		src
.gitignore		.gitignore
LICENSE.txt		LICENSE.txt
README.md		README.md
eslint.config.js		eslint.config.js
index.html		index.html
package-lock.json		package-lock.json
package.json		package.json
postcss.config.js		postcss.config.js
tailwind.config.js		tailwind.config.js
vercel.json		vercel.json
vite.config.js		vite.config.js

Folders and files

Latest commit

History

Repository files navigation

🎵 PlayLoud - Online Music Streaming Platform

📖 About The Project

🌟 Why PlayLoud?

✨ Features

🎧 Core Music Features

👤 User Management

💎 Premium Features

🎨 UI/UX

🛠️ Tech Stack

Frontend Technologies

Backend Technologies

Cloud & Database

📦 Key Dependencies

🚀 Getting Started

✅ Prerequisites

📥 Installation Guide

Step 1: Clone the Repository 📂

Step 2: Frontend Setup ⚛️

Step 3: Backend Setup 🖥️

Step 4: Appwrite Setup ☁️

Step 5: Razorpay Setup 💳

🎬 Running the Application

Terminal 1: Start Backend 🖥️

Terminal 2: Start Frontend ⚛️

🎉 Success! Open Your Browser

🏗️ Production Build

🔒 Security & Best Practices

🛡️ Environment Variables

🔐 Backend Security

🔒 Frontend Security

✅ Production Checklist

🧪 Testing Your Setup

Quick Test Checklist

Razorpay Test Cards

📸 Screenshots

🏡 Home Page

🔍 Search Page

🎧 Library Page

➕ Create Playlist

❤️ Liked Songs

📝 Sign Up Page

👤 Profile Page

💎 Premium Page

💳 Payment Gateway

✅ Payment Success

🔒 Security Best Practices

Environment Variables

Backend Security

Frontend Security

🧪 Testing Payment Integration

Test Cards (Razorpay Test Mode)

📁 Project Structure

🐛 Troubleshooting

Common Issues

"Razorpay is not defined"

Payment Verification Failed

CORS Errors

Appwrite Connection Issues

Collection Not Found

📚 API Endpoints

Backend Routes

🚢 Deployment

Frontend Deployment (Vercel/Netlify)

Backend Deployment (Railway/Render/Heroku)

Production Checklist

🤝 Contributing

📄 License

🙏 Acknowledgments

📧 Contact

About

Topics

Resources

License

Uh oh!

Stars

Watchers

Packages