Project Overview

Artist Discography is a web application powered by the Spotify Web API, designed to provide users with detailed insights into the discographies of their favorite artists. It offers functionalities for searching artists, exploring their complete discographies, and interacting with album details.

Problem Solved

The project addresses the challenge of easily searching for artist discographies and exploring their music on Spotify without needing to create a Spotify account.

Key Features

Artist Search: Utilizes the Spotify Web API's search functionality to enable users to search for artists by name.
Discography Overview: Presents a comprehensive view of an artist's discography, including albums and top tracks.
Album Sorting: Allows users to sort the discography in ascending or descending order by release date, facilitating ease of exploration.
Albums Modal: Provides a modal window for each album, showcasing album cover, release date, and tracklist details upon selection.
Album Pagination: Implements pagination for albums, displaying six albums per page to enhance navigation through extensive discographies.

Technologies Used

Languages: HTML, CSS, JavaScript
Frameworks/Libraries: React.js, React Router, Bootstrap, Sass, Axios
Tools: Vite, React Icons

Challenges Faced

Component Routing: Organizing and structuring the routing system to ensure seamless navigation between different components. This involved creating a logical and intuitive flow for the user interface, making it easy for users to transition between artist search results, discography views, and album details without confusion.
API Data Manipulation: Efficiently sorting and organizing API data to present accurate and relevant information to the user.

Key Learnings

Routing in React: Enhanced my understanding of state management to optimize application performance and responsiveness.
Data Fetching: Developed proficiency in handling asynchronous operations and integrating a third-party API to deliver data.
React Bootstrap: Gained experience working with React Bootstrap, a derivative optimized for React, to streamline UI development.

Conclusion and Reflection

This project provided a valuable opportunity to work with the Spotify Web API and develop a feature-rich web application. It allowed me to deepen my skills in React, API integration, and responsive design. Artist Discography effectively solves the problem of easily accessing and exploring artist discographies.