From 85c3e7db76e398f0855027ee4acfc0b311e43376 Mon Sep 17 00:00:00 2001 From: Martin Sunnset Date: Fri, 18 Sep 2026 13:23:54 +0200 Subject: [PATCH 1/3] Updated README with how to run the application locally --- README.md | 42 ++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 42 insertions(+) diff --git a/README.md b/README.md index e049399..3aca5dd 100644 --- a/README.md +++ b/README.md @@ -88,6 +88,48 @@ The code and suggestions generated with ChatGPT were adapted to fit our applicat 7. Play a preview if one is available for the song. 8. Use the Spotify link to open the song directly in Spotify. +## How to run the Application locally + +Before you begin, make sure [Node.js](https://nodejs.org/) is installed. + +#### 1. Open the application folder + +Open a terminal in the project folder and navigate to `webdev-prosjekt1`: + +```bash +cd webdev-prosjekt1 +``` + +#### 2. Add Spotify credentials + +Create a `.env` file inside the `webdev-prosjekt1` folder: + +```env +VITE_SPOTIFY_CLIENT_ID=your_client_id +VITE_SPOTIFY_CLIENT_SECRET=your_client_secret +``` + +You can get these credentials by creating an app in the [Spotify Developer Dashboard](https://developer.spotify.com/dashboard). Do not commit the `.env` file to Git. + +> **Note:** The version running on the virtual machine already has valid credentials configured. + +#### 3. Install dependencies + +```bash +npm install +``` + +#### 4. Start the development server + +```bash +npm run dev +``` + +Open the local URL shown in the terminal. + +Press `Ctrl+C` to stop the development server. + + ## Testing We created automated tests using **Vitest** and **React Testing Library** to verify some of the main functionality in the application. From 8ad2efc5ed91f8adcf74b99906bb660bad598e89 Mon Sep 17 00:00:00 2001 From: Martin Sunnset Date: Fri, 18 Sep 2026 13:36:25 +0200 Subject: [PATCH 2/3] Added some of our interpretations for the project requirements #54 --- README.md | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/README.md b/README.md index 3aca5dd..cfb3379 100644 --- a/README.md +++ b/README.md @@ -54,6 +54,8 @@ We worked with: Our goal was to understand both how the application communicates with the Spotify API and how the data could be turned into a functional and usable frontend. +One of the functional requirements was that users should be able to navigate back and forth through the application. Since this requirement was somewhat vague, we interpreted it as supporting navigation with arrow buttons while ensuring that the relevant application states remained persistent when moving between views, including search terms and filtering options. + ### React and TypeScript We used React to build the application using components. This made it possible to divide the user interface into smaller and more manageable parts. @@ -78,6 +80,10 @@ For some parts of the frontend, especially visual elements, styling, layout, and The code and suggestions generated with ChatGPT were adapted to fit our application rather than being used without review. This allowed us to combine our own frontend development with AI-assisted work where it was useful. +### Linking commits and pull requests + +We have experience linking commits to pull requests and understand how this workflow should be used. We started applying it later than intended, but wanted to clarify that we are familiar with the process from earlier projects. + ## How to Use the Application 1. Open the web application using the link at the top of the README file. 2. Search for the music you want. From d2ffb3de1dbb41235594bf331f5d73517b8d6293 Mon Sep 17 00:00:00 2001 From: Martin Sunnset Date: Fri, 18 Sep 2026 13:52:29 +0200 Subject: [PATCH 3/3] Added some small changes in the README #54 --- README.md | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/README.md b/README.md index cfb3379..555bc47 100644 --- a/README.md +++ b/README.md @@ -74,7 +74,7 @@ Using TanStack Query helped connect the API functionality with the frontend and ### Use of ChatGPT in the Frontend -We tried, as far as possible, to develop and understand the code ourselves. This included both the API integration and a large part of the frontend functionality. +We tried, as far as possible, to develop and understand the code ourselves using generative AI as an supporting tool. This included both the API integration and a large part of the frontend functionality. For some parts of the frontend, especially visual elements, styling, layout, and UI improvements, we used ChatGPT as a supporting tool. This helped us complete parts of the interface while still allowing us to focus on writing and understanding the core functionality ourselves. @@ -137,8 +137,7 @@ Press `Ctrl+C` to stop the development server. ## Testing -We created automated tests using **Vitest** and **React Testing Library** to verify some of the main functionality -in the application. +We created automated tests using **Vitest** and **React Testing Library** to verify some of the main functionality in the application. The tests cover: - Adding and removing favorite tracks, including saving them in 'localStorage'