typing tests were boring, so i built TypeTheLyrics.

I've always wanted to type along with my favourite songs, so I built TypeTheLyrics, an app that lets you do just that.

It syncs lyrics with Spotify music, making typing practice a fun challenge.

What Is TypeTheLyrics?

TypeTheLyrics is a typing test with music. Yes, another name for it would be "MonkeyType for Songs."

You enter a Spotify track URL, and the app fetches the lyrics.

As the song plays, you type the lyrics in sync.
It tracks your speed (WPM) and accuracy, and awards you points based on that. (if you're logged in)

Why I Built It

Typing tests can feel boring. Music makes everything better. I wanted an app that combined both. Simple!

With TypeTheLyrics, you can improve your typing skills while listening to songs you love.

How It Works

1. Enter a Spotify track URL.
2. Choose filters (like lowercase-only or no punctuation).
3. Click “Get Lyrics.”
4. Type along as the song plays.
5. See your WPM and accuracy when you finish.

Features

• Real-time lyrics sync – Type along as the song plays.
• Typing stats – Track WPM, raw WPM, and accuracy.
• Spotify integration – Get song details and lyrics automatically.
• Leaderboard – See top typists and most played songs.
• User accounts – Save your scores and compete with others.
• Custom filters – Remove punctuation or switch to lowercase-only.

---

The Development Process

Building TypeTheLyrics WAS easy and fun too, thanks to Cursor. Here's how I made it.

Technologies Used

I used the popular and good Next.js for the front-end, styled with Tailwind CSS.

For authentication and database, I chose Supabase.

And finally, the Spotify Web API and Spotify Lyrics API from @akashrchandran helps fetch song details and lyrics.

Key API Endpoints

To make everything work, I built several API endpoints.

1. Leaderboard API (/api/leaderboard)

GET – Returns top 10 users and most played songs.

2. Lyrics Fetch API (/api/lyrics)

POST – Takes a Spotify track URL and returns lyrics with sync data.

3. Score Submission API (/api/scores)

POST – Saves typing test scores if the user is logged in.

4. Song Tracking API (/api/songs)

POST – Updates song play count.

---

Want to Try It?

If you love music and want to type faster, give TypeTheLyrics a shot.
Drop a track URL, start typing, and see how fast you can go!

🚀 Try TypeTheLyrics now
💻 Check the source here
🔼 Upvote it on Peerlist

Comments

[Ansell Maximilian]

This is genuinely a really creative project. It would've been a winning Dev Challenge submission.

[Arjun Vijay Prakash]

Thanks, Ansell! 😂
"Accidental Dev Challenge entry speedrun?" Haha. 😎

[ArnavK-09]

Fresh and great project mate 🔥

[Arjun Vijay Prakash]

Thanks a lot, Arnav! 🔥

[Safin Ahmed]

i love democracy

[Arjun Vijay Prakash]

Lmao, "democracy." 😂

[Jedsada]

I tried “don’t look back in anger” and it was a bad idea 😂

[Arseniy]

Very interesting and fresh idea 👍

[Arjun Vijay Prakash]

Glad you found it interesting! 🙌