Guess the Release Year of Random Songs
Chronotune is an interactive music trivia game where your knowledge of music history gets put to the test.
The challenge is simple but addictive: listen to a short preview of a song and guess the year it was released.
- 🎧 Think you can tell the difference between a 90s hit and a 2000s anthem?
- 🎤 Are you the type of person who instantly knows “oh, that’s definitely early 80s!”?
- 📀 Or maybe you’ll be surprised how often your brain tricks you.
Chronotune makes music discovery a game — combining Spotify’s massive library with a fun scoring system, clean UI, and plenty of replay value.
Pulls in real songs from Spotify’s API so every game feels fresh. You’ll hear 30-second previews directly in the app.
- Guess the year by typing it in or sliding across an interactive year range (1920–present).
- Quick feedback keeps the pace fast and exciting.
- 100 points for a perfect guess
- Lose 2 points for each year off
- Minimum score: 0 (sorry, no points for thinking a Beatles song came out in 2010 😉)
- Choose 3, 5, or 10 songs per session
- Track your best scores for each game length
Built with Next.js + Tailwind CSS, so the game feels great on both desktop and mobile.
- Start a game – Pick how many songs you want to play.
- Listen carefully – Each song gives you a short preview.
- Make your guess – Type or slide to the year you think is right.
- See your score – Watch the points stack up.
- Finish strong – At the end, view your total, compare with past runs, and challenge yourself again.
Warning
You will be surprised how many songs are older (or newer) than you think.
Want to help make Chronotune even better? Or just try it out locally to test your music knowledge? Follow this guide:
Before you jump in, make sure you have:
- ⚡ Node.js 18+
- 📦 npm or yarn
- 🎵 A Spotify Developer Account (to get API credentials)
💡 Tip: Don’t have a Spotify Developer account?
You can create one [here](https://developer.spotify.com/dashboard/). Once you create an app, you’ll get your **Client ID** and **Client Secret**, which you’ll use in `.env.local`.- Clone the repository
git clone https://github.com/yourusername/chronotune-next.git
cd chronotune-next📝 Tip: Fork first if you plan to contribute via a PR.
- Install dependencies
npm install⚡ Or use
yarn installif that’s your preference.
- Set up your environment variables
Create a
.env.localfile in the project root and add your Spotify credentials:
SPOTIFY_CLIENT_ID=your_spotify_client_id
SPOTIFY_CLIENT_SECRET=your_spotify_client_secret
NEXT_PUBLIC_BASE_URL=http://localhost:3000💡 Tip: NEXT_PUBLIC_BASE_URL
Make sure this URL matches where you’re running the app locally. For production, update it to your deployed URL.- Run the development server
npm run dev🌐 Your app should now be live at http://localhost:3000 with hot reload enabled.
- Open and play! Visit the app in your browser, log in with Spotify, and start guessing the release years of songs!
Project Structure
components/– Reusable UI componentshooks/– Game state & logic hooksutils/– Helper functionserrors/– Custom error classesapp/– Pages (Next.js App Router)
Adding Features or Fixes
- Create a new branch:
git checkout -b feature/awesome-feature- Make changes & commit:
git commit -m "Add awesome feature"- Push & open a Pull Request
Testing Changes
- Play multiple rounds to ensure scoring, song previews, and UI all work correctly
- Follow TypeScript typings and Tailwind conventions for consistency
🎉 You’re ready to explore, improve, and contribute to Chronotune!
Every tweak, bug fix, or new feature makes the game more fun for everyone.
- Spotify Web API – the music backbone
- Next.js – modern React framework
- Tailwind CSS – sleek, responsive styling
- FontAwesome – icons
MIT — free to use, modify, and share.