BeatFlow is a modern, social platform for creating and sharing EDM beats. With a futuristic cyberpunk interface and powerful beat-making capabilities, it's the perfect place for both beginners and experienced producers to create, share, and discover electronic music.
- 64-step beat sequencer with multiple tracks:
- Kick drum
- Snare/Clap
- Hi-hats
- Synth
- Real-time playback with Tone.js
- Adjustable BPM (60-180)
- Pattern randomization
- Save and load beats
- Share your beats with the community
- Like and comment on beats
- Follow other creators
- User profiles
- Genre-based discovery
- Real-time updates with Socket.IO
- Cyberpunk-inspired design
- Responsive interface
- Dark mode
- Interactive animations
- Beat visualization
- Node.js (v14 or higher)
- MongoDB
- pnpm (recommended) or npm
- Clone the repository:
git clone https://github.com/yourusername/beatflow.git
cd beatflow- Install dependencies:
# Install frontend dependencies
cd frontend
pnpm install
# Install backend dependencies
cd ../backend
pnpm install- Set up environment variables:
# Backend (.env)
PORT=3000
MONGODB_URI=mongodb://localhost:27017/beatflow
JWT_SECRET=your-super-secret-jwt-key
FRONTEND_URL=http://localhost:5173
# Frontend (.env)
VITE_API_URL=http://localhost:3000/api
VITE_SOCKET_URL=http://localhost:3000- Start the development servers:
# Start backend
cd backend
pnpm dev
# Start frontend (in a new terminal)
cd frontend
pnpm dev- Open your browser and navigate to
http://localhost:5173
- React with Vite
- Chakra UI
- Tone.js for audio synthesis
- Socket.IO client
- Framer Motion for animations
- Axios for API calls
- Express.js
- MongoDB with Mongoose
- Socket.IO
- JWT authentication
- Multer for file uploads
The UI follows a cyberpunk aesthetic with:
- Neon accents
- Dark backgrounds
- Glowing elements
- Futuristic animations
- Responsive grid layouts
BeatFlow is fully responsive and works on:
- Desktop browsers
- Tablets
- Mobile devices
- JWT-based authentication
- Secure password hashing
- Protected API endpoints
- File upload validation
- Rate limiting
The application is configured for deployment on:
- Frontend: GitHub Pages
- Backend: Any Node.js hosting (Heroku, DigitalOcean, etc.)
- Database: MongoDB Atlas
This project is licensed under the MIT License - see the LICENSE file for details.
- Fork the repository
- Create your 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