A database-driven website to store and browse music playlists organized by year, with MongoDB full-text search functionality.
- View playlists by year - Browse all playlists created in a specific year
- View available years - See which years have playlists
- Full-text search - Search for tracks using MongoDB's full-text search
- Database-driven - All data stored in MongoDB, read-only web interface
- Vercel deployment - Easily deploy to Vercel with serverless functions
thebestai/
├── api/
│ ├── _db.js # MongoDB connection and schema helper
│ ├── years.js # GET /api/years
│ ├── playlists.js # GET /api/playlists?year=YYYY
│ ├── search.js # GET /api/search?q=QUERY
│ └── health.js # GET /api/health
├── public/
│ ├── index.html # Main page
│ ├── style.css # Styling
│ └── script.js # Frontend logic
├── server/
│ └── index.js # Express server (legacy, for reference)
├── package.json # Dependencies
├── vercel.json # Vercel configuration
├── .env.example # Environment variables template
└── README.md # This file
The MongoDB best collection stores individual track documents with the following structure:
{
"_id": ObjectId,
"year": "string",
"playlistFolder": "string",
"playlist": "string",
"track": "string",
"album": "string",
"artist": "string",
"albumArtist": "string",
"duration": "number",
"time": "string",
"genre": "string",
"trackNumber": "number",
"author": "string"
}Example Document:
{
"_id": "5c425c23d79687af85bc63c7",
"year": "2007",
"playlistFolder": "2007 - 50 Best Right Now",
"playlist": "Alex's 50",
"track": "Easy Listen' Blues",
"album": "The Trio",
"artist": "Oscar Peterson",
"albumArtist": "",
"duration": 466.8659973,
"time": "7:46",
"genre": "Jazz",
"trackNumber": 3,
"author": "Alex"
}- Clone the repository
- Copy
.env.exampleto.envand configure MongoDB URI:cp .env.example .env
- Install dependencies:
npm install
- Install Vercel CLI (if not already installed):
npm install -g vercel
- Start the development server with Vercel:
This runs the app with Vercel's serverless environment, recognizing the
vercel dev
api/routes. - Open
http://localhost:3000in your browser
Note: Use vercel dev for local testing, not npm start. The app uses Vercel serverless API routes (api/ directory) for backend functionality.
Ensure your MongoDB collection has a text index on the searchable fields:
db.best.createIndex({
"track": "text",
"artist": "text",
"album": "text",
"playlist": "text",
"author": "text",
"genre": "text"
})- Vercel account (https://vercel.com)
- GitHub repository with this code
- MongoDB Atlas URI (or other MongoDB instance with network access)
-
Push to GitHub
git init git add . git commit -m "Initial commit" git remote add origin <your-repo-url> git push -u origin main
-
Import to Vercel
- Go to https://vercel.com/new
- Select "Import Git Repository"
- Choose your repository
- Click "Import"
-
Configure Environment Variables
- In Vercel project settings, go to "Environment Variables"
- Add
MONGODB_URIwith your MongoDB connection string - Add
PORT(optional, defaults to 3000) - Redeploy after adding variables
-
Enable Serverless Functions
- Vercel automatically converts your Express app to serverless functions
- The
vercel.jsonconfiguration handles routing
-
Test Deployment
- Visit your Vercel deployment URL
- Test all functionality (years, playlists, search)
GET /api/years- Get all years with playlistsGET /api/playlists/:year- Get all playlists for a specific yearGET /api/search?q=query- Search tracks using MongoDB full-text searchGET /api/health- Health check endpoint
- The web interface is read-only - data can only be modified via direct database access
- Full-text search requires a text index on the MongoDB collection
- MongoDB Atlas free tier supports text search
- Ensure your MongoDB instance has network access enabled for Vercel's IP addresses