New Music Releases

New Music Releases

A full-stack TypeScript application that automatically creates a Spotify playlist and updates it with new releases from user-saved artists. Built with React and Express using a monorepo architecture and Clean Code principles.

Frontend

I chose Vite as the underlying build tool for the frontend, as it provides a 'faster and leaner development experience' with hot module reloading and a lightning-fast production build. It takes 4-5 seconds to build the frontend for production, which is served sas static assets on the backend. The GUI is built with TypeScript and React, using Tanstack Query for server state management and Tanstack Router for secure Spotify OAuth integration.

I created my endpoints using Axios, and Tanstack Query helped to manage server state, caching, and automatic data synchronization using mutations.

Backend

Express.js is minimal and flexible compared to Nest.js, so I chose the simplest option for myself. I wanted to focus more on the backend, so this Node.js web app framework was the right choice with all the help and documentation online. I used TypeScript and MongoDB for data persistence. I focused on a Clean Architecture pattern and my layers were separated into Router, Controller, Service, and Repository.

The router defined endpoints. The controller validated requests and formatted responses. The service contained core business logic and Spotify API integration. The repository handled MongoDB data access and persistence.

I never really grasped Inversion of Control when I used Spring Boot, so it was a great opportunity to learn more about it. I used dependency injection to manage the lifecycle of my services and repositories which was all managed from the index.ts file.

The core feature I wanted was adding a daily cron job to scan and process new releases from tracked artists on MongoDB. The persistent data stores the ids of the Spotify artists, checks their releases daily, and adds them to the playlist if they are new.

Infrastructure

I used Railway for deployment, as it was a simple and easy way to deploy my app. I used a monorepo structure for the project, which allowed me to share configurations and models across the frontend and backend. The Express server handled both API requests and static asset serving, and the app was end-to-end TypeScript with shared type definitions.

Liked songs

The app displays a table of the users liked songs from Spotify, which they can add to their favourites.

Playlist updates

The app displays a table of the new music releases from Spotify from their favourite artists.

Saved artists

The app displays a table of the users favourited artists from Spotify.

#React.js #Express.js #CRON #MongoDB #Spotify API