Music Collection

Music Collection is a demo app with a frontend written in NextJS, and the backend API written using NestJS.

Frontend

The frontend app can be accessed at https://music.anatid.net/album, showing a list of Albums added through the app. Clicking on the (+) symbol will allow the user to add an Album with the attributes of Album Title, Artist and Genre. Each Album listed also has controls for editing and deleting. (TODO: Add dialog to warn of deletion). Clicking on the Album Title will allow the user to view the full track list, showing each Songs Title, Duration and Track number. The user can also add, edit or delete each Song. (TODO: Add dialog to warn of deletion). Messages from the API are returned to the user via a Toast style pop-up. (TODO: Authentication, User Accounts)

Backend

The backend API can be accessed at https://api.anatid.net/album and https://api.anatid.net/song, showing the GET requests of the API in the browser.

Swagger Docs are available at https://api.anatid.net/api showing all endpoints for GET, POST, PUT and DELETE.

Docker

The frontend and backend are built as Docker Images, running with Docker Compose behind a Swag based reverse proxy to enable SSL provided by LetsEncrypt, with the API suppored by a Postgres database for persistence.

services:
 music-collection-frontend:
   image: git.anatid.net/tabris/music-collection-frontend:main
   restart: unless-stopped
   depends_on:
     - music-collection-backend
   networks:
     - frontend

 music-collection-backend:
   image: git.anatid.net/tabris/music-collection-backend:main
   restart: unless-stopped
   environment:
     - DB_NAME=${MUSIC_DB_NAME}
     - DB_USER=${MUSIC_DB_USER}
     - DB_PASSWORD=${MUSIC_DB_PASSWORD}
     - POSTGRES_HOST=${POSTGRES_HOST}
     - POSTGRES_PORT=${POSTGRES_PORT}
     - PORT=3000
   depends_on:
     - postgres
   networks:
     - frontend
     - database

 postgres:
   image: postgres:17.4
   restart: unless-stopped
   environment:
     - PUID=${POSTGRES_PUID}
     - PGID=${POSTGRES_GUID}
     - POSTGRES_USER=${POSTGRES_USER}
     - POSTGRES_PASSWORD=${POSTGRES_PASSWORD}
   volumes:
     - ./data/postgres/data:/var/lib/postgresql/data:rw
     - ./data/git/anatid-config/init/create-multiple-postgresql-databases.sh:/docker-entrypoint-initdb.d/create-multiple-postgresql-databases.sh:ro
   networks:
     - database

 swag:
   image: lscr.io/linuxserver/swag:3.2.0
   cap_add:
     - NET_ADMIN
   environment:
     - PUID=${SWAG_PUID}
     - PGID=${SWAG_GUID}
     - TZ=Europe/London
     - URL=${SWAG_DOMAIN}
     - SUBDOMAINS=${SWAG_SUBDOMAINS}
     - VALIDATION=${SWAG_VALIDATION}
     - DNSPLUGIN=${SWAG_DNS_PLUGIN}
   volumes:
     - ./data/swag/config:/config:rw
     - ./data/git/anatid-web/user:/config/www/user:rw
   ports:
     - 80:80
     - 443:443
   networks:
     web:
     frontend:
       aliases:
       - api.anatid.net
       - anatid.net
   restart: unless-stopped
networks:
 web:
   external: true
   driver: bridge
 database:
   external: false
 frontend:
   external: false

Repository

The code can be found at https://git.anatid.net/tabris/music-collection, and is continuously deployed to the Docker network on commit by a pipeline Runner.

Improvements

As this was very much a "learn as I went" project, there are many things that can be improved.

• Test coverage is low, covering some basic API functions in Album.Service and Album.Controller.
• The Pages in the NextJS app are mammoth, as I hadn't gotten to grips with NextJS's Components features. Splitting the Modal, Toast messages and other function handling to components would be where I concentrate next.
• Adding a User module, as well as Authentication, and reworking the Albums and Songs to be owned by each User would allow for multiple Users to maintain their own collections.
• Swagger Docs aren't quite complete, as they don't show the format of the Body in POST and PUT requests.
• Running locally in a development environment was not working for me easily, so I relied on the CI/CD pipelines to test and deploy the application during development. This probably cost more time than it saved as I've seen both NestJS and NextJS can recompile on the fly for rapid development.
• The CSS and Layout were put together in a rush and I'd like to spend more time on this aspect of the design, adding in the ability to upload Album artwork to display on the Album detail page.

Final Thoughts

Overall, I enjoyed this project, and would happily continue to develop both it and my skills in NestJS and NextJS in the future. Due to my lack of experience with these Frameworks, and the limited time I had to complete the work, I feel I struck a good balance between achieving the brief, and showing off my strong infrastructure skills.