make readme with documentation and ki declarations

README.md

@@ -1,24 +1,148 @@
-# T04-Project-1
+# Music Wiz
 
-Repository for team IT2810-H26-T04 in IT2810-H26.
+Link to the web application: http://it2810-04.idi.ntnu.no/project1/
 
-## Working in this repository
+## About the project
 
-`main` is protected — you cannot push to it directly. Work on a branch and
-open a pull request:
+This project is a web application for exploring music using the Spotify API. The application fetches music data and gives the user an overview of tracks, albums, and artists.
 
-```bash
-git checkout -b my-feature
-git push -u origin my-feature
-```
+In the application, users can search for music, mark songs as favorites, visit a dedicated favorites page, play song previews, and open songs directly in Spotify through a link.
 
-Before a pull request can be merged:
+An important goal of the project was to gain a better understanding of how to work with external APIs, how data is fetched, and how that data can be used and presented in a frontend application with React.
 
-1. **A member of IT2810-H26-T04 must approve it.** You cannot approve your own pull
-   request, and approvals from staff do not count — you review each other's
-   code.
-2. **Every review comment must be marked resolved.** Reply to each one, fix it
-   or explain why not, then click *Resolve conversation*.
-3. **Pushing new commits dismisses the approval**, so if you change something
-   after being approved, ask for another review. This is deliberate: what was
-   approved is what gets merged.
+## Functionality
+
+The application includes the following features:
+
+- search for music through the Spotify API
+- display tracks, albums, and artists
+- mark songs as favorites
+- dedicated favorites page
+- play song previews when available
+- open songs directly in Spotify through a link
+- display information and images from the API in the user interface
+
+## Technologies
+
+The project was developed using the following technologies and tools:
+
+- React – used to build the user interface and component structure
+- TypeScript – used for type safety and more structured code
+- TanStack Query – used for handling data and API requests
+- Vite – used as the development and build tool for the application
+- Git – used for version control and collaboration
+- Spotify API – used to fetch music data
+
+## Choices and Reasoning
+### Working with the Spotify API and Frontend Development
+
+A large part of the project involved both integrating the Spotify API and building the frontend of the application.
+
+We wanted to understand how data is fetched from an external API, how the response is structured, and how that data can be used in the application. At the same time, we spent a significant amount of time developing the frontend ourselves using React and TypeScript.
+
+We worked with:
+
+- API requests
+- Searching through the Spotify API
+- Processing response data
+- Fetching tracks, albums, and artists
+- Building React components
+- Displaying API data in the user interface
+- Implementing functionality such as search and favorites
+- Handling data with TanStack Query
+- Structuring and styling parts of the frontend
+
+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.
+
+### 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.
+
+A large part of the frontend functionality and component structure was developed by us. This gave us practical experience with building components, handling data, and connecting the user interface to the API.
+
+TypeScript was used to give us better control over the types of data we were working with. This was especially useful when working with data from the Spotify API, since the returned objects contain many different values and structures.
+
+### TanStack Query
+
+TanStack Query was used to manage data fetching from the API.
+
+This made it easier to organize API requests and handle the returned data. It also gave us a cleaner way to work with loading states, errors, and the results of API requests.
+
+Using TanStack Query helped connect the API functionality with the frontend and made it easier to manage the data displayed in the application.
+
+### 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.
+
+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.
+
+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.
+
+## 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.
+3. View search results fetched from the Spotify API.
+4. View information about tracks, albums, and artists.
+5. Mark songs as favorites.
+6. Go to the favorites page to view your favorite songs.
+7. Play a preview if one is available for the song.
+8. Use the Spotify link to open the song directly in Spotify.
+
+## Testing
+
+## How we used AI
+We mainly used ChatGPT when working on the user interface of the application.
+
+ChatGPT was used for:
+
+- developing parts of the UI
+- suggestions for layout and structure in the user interface
+- help with styling and presentation of content
+- generating images used in the application
+- explanations and suggestions during the development process
+
+We chose to use AI mainly for this part of the project because we wanted to spend as much time as possible understanding the API integration ourselves.
+
+### Images
+
+The images we added ourselves as part of the visual design of the application were generated using ChatGPT.
+
+Music data and images provided by Spotify are fetched through the Spotify API.
+
+### Our Experience Using AI
+
+Our experience was that AI was useful as a supporting tool during development, especially when working with the UI and visual elements.
+
+By using ChatGPT for parts of the user interface, we were able to spend more time understanding how the Spotify API worked and how to fetch and use data from the API.
+
+At the same time, it was important to us not to simply copy solutions without understanding them. We therefore tried, as far as possible, to write and understand the code ourselves, and AI-generated suggestions had to be adapted to fit our own application.
+
+We found that AI worked best as a supporting tool and as a way to help us move forward, rather than as a replacement for understanding how the solution works.
+
+## What We Have Learned
+
+Through this project, we have gained more experience with:
+
+- React and component-based development
+- TypeScript
+- TanStack Query
+- working with external APIs
+- fetching and processing data from the Spotify API
+- handling asynchronous API requests
+- displaying API data in a user interface
+- version control with Git
+- using AI as a supporting tool in the development process
+
+The most important learning outcome for us has been gaining a better understanding of how API integration works in practice.
+
+## Future Improvements
+
+If the application were to be developed further, possible improvements could include:
+
+- expanding the favorites functionality
+- improving the user interface further
+- adding more features from the Spotify API
+- adding more advanced filtering or sorting
+- improving error handling for API requests
+- improving responsiveness and support for different screen sizes
+- adding more tests