ReactJS AC List Web App

Using ReactJS, along with my API service, I created a simple “todo” list app, specifically catered towards Animal Crossing K.K Songs collections. The purpose of the app is to allow users who play Animal Crossing New Horizons track their K.K Slider songs, and share the list with their friends.

Naturally the app resembles that of a simple todo list, but with the list being pre-filled with all of K.K’s songs. The songs appear as icons of their album art in order to make it easier for the user to identify which songs are in their collection. When a user clicks a song, it toggles it as found or not found, and this state is stored on the server, and tied to that user’s account. The user can then copy the URL to their list, and share it with a friend who will see the most recent results of their selections.

If you would like to try it out for yourself, the link is below, as well as the link to my list.

https://list.jazyserver.com/ac/songs

https://list.jazyserver.com/ac/songs/user/jazy (My list)

Front-end

The front-end is done entirely in ReactJS, with as few libraries as possible. The intention for this project was mostly to learn ReactJS, so I didn’t want to get too distracted by a large library like Redux. The app is built in such a way that it will slightly morph it’s layout to accommodate desktop and mobile screens.

The app is also almost fully tested, using Jest. The app was made using the react-create-app tool. The source code will be linked below.

Back-end

The back-end is using my previously built, Laravel PHP API service. The API is using a RESTful architecture, which the front-end simply has to fetch and post to.

Deployment

The web app is built and deployed with Gitlab CI/CD and Docker. The container is then deployed to my docker swarm, where it is exposed publicly. The resulting docker image only contains the compiled static JavaScript and HTML files, which means the image is light and server-less. Nginx is used to then serve the static files. Although, the app can be distributed across various CDN (Content Delivery Network), allowing it to easily scale, at least on the front-end.

https://gitlab.com/jazy-home-server/reactjs-lister-webapp

Extra

This app was inspired by a quick hack I had previously made for my friends, to help us track which songs we had, and which ones others needed. The hack is a simple HTML file, with some vanilla JavaScript to toggle and track toggled songs. The way in which the songs were tracked (specially for link sharing purposes) was to encode the state of each song into the URL. This resulted in a horrendously long URL, as the encoding was a simple binary string. But this is what my friends and I initially used, and inspired me to create a slightly more sophisticated one. It was also a great opportunity to practice some more ReactJS.

Demo: https://home.jazyserver.com/acnh-songs-list/

Gist: https://gist.github.com/Jazy5552/a01ba8fcae9bb7506a1f7fe4dc159c0f

Thanks for reading 🙂