Create your own K-pop girl group! A React app served by a Node.js backend with a REST API. Connects to a MongoDB database, the Spotify API, and the YouTube API.
This is my first ever full-sized web development project. I learned a lot along the way, but there is a lot I would improve on and fix if I were to make this again. It's messy, and there are a lot of questionable coding decisions (why did I keep calling function components?), but the functionality's all there. I'm pretty proud of what I was able to create for my first web app. I've definitely learned a lot from this project.
Produce 404 can be found on Heroku.
Please note that the website will take a short moment to load once opened.
If you want to launch the app locally, follow these steps.
cdto the/pd404directorynpm run buildnpm start- open
http://localhost:8080/
The UI is simple and user friendly. Data that is returned from the server is presented in a clean and consistent interface.
Profile and user group pages display extra links and buttons if the owner is logged in. If viewing another person's pages, extra links and buttons are disabled. The images below demonstrate a page when one is the owner, and the same page when one is not the owner.
Some components are able to be interacted with. Aside from buttons and input fields, there are also decorative aspects, most notably the leaderboard entries and song buttons which are highlighted when they are hovered over.
The React app is hosted on an Express server, which also hosts the API for the app. When the server starts, it gets an authorization token from the Spotify API to be used for requests. This token is refreshed when it expires. The server's API handles all database requests, including login/registration services and access to the idol database. The server also calculates the score for a performance given a user's group and song choice. Using this song choice, the server contacts the YouTube search API and returns the first video result for the song. This allows the user's chosen song to be played in the client's embedded player.
The database is hosted on the MongoDB Atlas cloud hosting service. The database is accessed using a special url stored on the server.
The collections in the database are as follows:
groups- real life group names, company names, spotify artist idsleaderboard- leaderboard entriesmembers_info- individual idol informationuser- user login infouser_group_members- idols added to each custom groupuser_profile- user profile info
The entry at #1 on the leaderboard will determine the song initially played by the embedded YouTube video player at the top of the page. Selecting any other song on the list will replace the currently playing song with the chosen one.
Each idol has three skill values between 1-4 (inclusive). These skills are sing, rap, and dance. The skills for a group are the average of its members' skills (sing_average, rap_average, dance_average). The Spotify API returns specific features for a given song. The features used for score calculation are speechiness, energy, and danceability.
The formula used to devise performance scores is:
(([sing_average * (1 - speechiness)] + [rap_average * energy ] + [dance_average * danceability]) * 1000000) / 6
The server-side handles all external database and API requests for security and to reduce client load. The frontend and backend are handled by the same Express server, so requests from client to server will be handled quickly.
A lot of websites were used to help me make this.