Note: This project is currently not in active development. Spotify's updated API regulations prevent solo developers from accessing the extended API plans required to deploy and share this application. However, you can still clone this repository and run the app locally to explore the functionality.
Transform your favorite Spotify playlists into organized monthly collections. Monthlify automatically creates new playlists for each month based on when songs were added, with dynamically generated cover images.
- Spotify OAuth Integration -Secure authentication with your Spotify account
- Smart Playlist Selection -Browse existing playlists or paste a Spotify URL
- Monthly Organization -Automatically sorts songs by the month they were added
- Preview Mode -Review monthly playlists before creating them in Spotify
- Auto-Generated Covers -Dynamic cover images for each monthly playlist
- Playlist Generation -Creates multiple playlists with custom naming
- Custom Cover Images -Generates unique cover art for each month/year
- Smart Track Management -Adds tracks while avoiding duplicates
- Direct Integration -Works with liked songs or any Spotify playlist
1. Landing Page - Authenticate with Spotify and select your playlist
2. Playlist Library - Browse and search through your saved playlists
3. Preview Mode - Review the monthly organization before creating playlists
4. Successfully Created - View your newly organized monthly playlists in Spotify
| Layer | Technologies |
|---|---|
| Frontend | Next.js, React, TypeScript, Tailwind CSS, Zustand, Radix UI, Lucide React |
| Backend | Python, Flask, Spotipy, Pillow, python-dotenv |
| Authentication | Spotify OAuth 2.0 |
| API | RESTful endpoints |
Before you begin, ensure you have the following installed:
- Node.js (v16 or higher) -Download
- Python (v3.8 or higher) -Download
- npm or yarn -Comes with Node.js
- Git -Download
- Spotify Developer Account -Create one here
- Go to the Spotify Developer Dashboard
- Create a new application
- Accept the terms and create the app
- Copy your Client ID and Client Secret
- Set the Redirect URI to
http://127.0.0.1:5000/callback(for local development)
- Clone the repository:
git clone https://github.com/thp728/monthlify__playlist-organizer.git
cd monthlify__playlist-organizer-
Set up the backend - see server/README.md for detailed instructions
-
Set up the frontend - see client/README.md for detailed instructions
Once both services are running, visit http://localhost:5000 in your browser.
monthlify__playlist-organizer/
├── client/ # Next.js frontend application
│ ├── src/
│ │ ├── app/ # Next.js app router
│ │ ├── components/ # Reusable React components
│ │ ├── store/ # Zustand state management
│ │ └── utils/ # Helper functions
│ ├── .env.example # Environment variables template
│ └── README.md # Frontend documentation
├── server/ # Flask backend application
│ ├── app.py # Main Flask application
│ ├── requirements.txt # Python dependencies
│ ├── .flaskenv.example # Environment variables template
│ └── README.md # Backend documentation
└── README.md # This file
For local development, you'll need to run both the backend and frontend:
# Terminal 1 - Backend
cd server
source venv/bin/activate # or .\venv\Scripts\activate on Windows
flask run
# Terminal 2 - Frontend
cd client
npm run devVisit http://localhost:5000 in your browser.
- Frontend changes: Hot reload automatically updates at
http://localhost:5000 - Backend changes: Restart Flask server with
flask runto see changes
- Frontend Setup & Development -See client/README.md
- Backend Setup & API Docs -See server/README.md