Background:

Summer break. I decided to build a my very first web app that focuses on Spotify, that performs data analysis by making use of it's Developer API. Most of already exisitng projects out there use either Python or Javascript to serve the backend hence I thought it will be challenging to use Java instead. This project has served me well as it introduced new concepts related to full stack development which I aim to do in the future.

test.mov

Some noteworthy things I have learnt are

• Fullstack development
• OAuth 2.0, Auth PKCE Flow
• Java Spring Boot & Spring MVC
• Jakarta HTTP Session management
• XSS, CRSF attacks
• RESTful API calls, interacting with Spotify Web API & understanding its limitations
• WebSockets & Long polling (Realised later on that Spotify Web API does not provide necessary endpoints)

What I can improve on:

• Software Engineering principles
• Better reusability of code

Progression provides greater insight

Tech Stack used:

Frontend / Client

• HTML
• Tailwind CSS
• JavaScript
• ReactJS

Backend / Server

• Java 21
• Spring boot 3.2.5
• Spring MVC

Others:

• Docker / Docker Desktop

Resources:

• Spotify Web API
• Authorization PKCE
• Spotify Java Web API

If you would like to try this application out Follow these steps.

0. Ensure Java 21, Maven & React are all already installed before proceeding.

1. Clone the repository git clone https://github.com/ryanmoolala/DJ-Lite.git or

    git clone git@github.com:ryanmoolala/DJ-Lite.git

2. Create A New App In Spotify Developers Console & Create app

3. Set Redirect URL to http://localhost:8080/callback

4. Copy the client-id generated for the above app along with redirect-uri and configure them in spotifytool/src/main/java/com/example/spotifytool/AuthorizationFlowPKCE/SpotifyDetails.java

5. Copy the Redirect URL above and paste it in the same file in Step 4.

6. Open up your terminal and follow these commands:

   cd spotifyclient

   mvn clean install

   mvn spring-boot:run

7. Open another terminal window and follow these commands:

   cd frontend

   npm install react-scripts

   npm start

8. Remember that both terminals must be up and running (frontend & backend)

9. Frontend runs on localhost:3000 and Backend runs on localhost:8080