CatchMusic

//overview

//stack

1
// what CatchMusic is built with
2
const stack = {
3
frontend: ["React", "TypeScript"],
4
backend: ["Next.js API Routes", "TypeScript"],
5
tools: ["Bun", "NextAuth", "Redis", "Browser cache storage", "BullMQ", "sessionStorage"],
6
database: ["Postgresql", "Drizzle ORM"],
7
} ;
8
 
9
export default stack;

//preview1 file

zoom

//how it works

1. 01

   Pick your favorite singers

   The first time you log in, you select the singers you like. This is what the rest of the app is built on.

2. 02

   Top 20 songs are fetched

   For each selected singer, CatchMusic searches for their top 20 songs.

3. 03

   Your home page is built

   The home page shows your favorite singers' profiles, along with song suggestions from other singers based on your picks.

4. 04

   Songs are cached in the browser

   Songs are stored in the browser's cache storage. They stay there until you delete them or clear your browser cache, so they can play again without a connection.

5. 05

   Search, like and organize

   Search for songs with debounced input, like the ones you love, and add them to your own playlists.

6. 06

   Pick up where you left off

   Recently played songs are saved, so your last listens are always one tap away.

//features7 total

1. No premium, no ads

   Just search, play, and enjoy—no premium plan or ads to get in the way.

2. Suggestions from other singers

   The home page recommends songs from other singers, shown along with the profiles of your favorite singers.

3. Like songs

   Like a song to keep it with the ones you love.

4. Playlist creation

   Create your own playlists and add the songs you want to them.

5. Add and remove songs from cache

   Choose which songs are stored in the browser's cache storage, and remove them whenever you want. They stay until you delete them or clear the cache.

6. Pagination

   Songs are loaded page by page, so long lists stay fast instead of rendering all at once.

7. Recently played

   Recently played songs are saved, so you can jump back to what you were listening to.

//problems & fixes

• Listening without internet

  −Problem: A streaming app stops being useful the moment the connection drops.

  +Solution: Cache songs in the browser's cache storage, so they can play again offline until the user deletes them.

• A request on every keystroke

  −Problem: Searching on every key press floods the search with requests and makes results flicker.

  +Solution: Debounce the search input, so a request goes out only after the user stops typing.

• Search failing when the music service is busy

  −Problem: Songs, artists, playlists and albums come from a third-party music service. Under heavy load it sometimes fails, and then a song search can fail with it, which is outside my control.

  +Solution: The app does not break or hang when a request fails. It shows a clear "try again later" message instead, so the user knows it is a temporary issue and can simply search again. Songs already cached in the browser keep playing meanwhile, so listening is not interrupted.