Artist API Project

Project Summary

This project is an Artist API built with .NET/C# for the backend and React with TypeScript for the frontend. Originally a three-day exam assignment focused on basic CRUD operations for artists, I have since added features like album and song entities with relationships, database initialization, search functionality, user feedback, error handling, styling and more.

GitHub Repository

Project Process

1. Relation Setup and Mockup

The first step involved setting up the relationships between the main entities: artists, albums, and songs. This included creating mockups to visualize the data structure and relationships.

Screenshot of Swagger testing the API endpoints

2. Initial Setup and Planning

I started by setting up the web API with models, interfaces, and controllers in .NET/C#. Once the initial setup was complete, I tested the endpoints using Swagger to ensure they worked correctly.

3. Database Initialization

I added a `DbInitializer` class to populate the database with initial data, including twelve artists, each with two albums and songs.

Code snippet showing the DbInitializer class

4. Frontend Setup

With the backend working, I set up the frontend using React and TypeScript. I created a service using Axios to fetch data from the backend and a context class to manage the state.

Code snippet of the Axios service in the frontend

Code snippet of the Context class in the frontend

5. Building UI Components

I built UI components such as `ArtistItem` and `ArtistList` to display artists. These components made use of the service and context to fetch and manage data.

6. Adding Functionality

I added functionality for searching, adding, updating, and deleting artists. This included setting up form components and implementing error handling and user feedback features.

Screenshot showing user feedback implementation

7. Enhancing UX

I refined the user experience by adding confirmations for delete actions, tooltips, and error handling. This made the application more user-friendly and robust.

Screenshot of error handling and tooltips

8. Applying Design Principles

Throughout the project, I applied design principles and best practices to ensure a high-quality user interface. This included using consistent design patterns and ensuring accessibility.

Screenshot showing consistent design implementation

Screenshot showing accessibility features

9. Future Improvements

Currently, the application allows viewing artists, albums, and songs, but CRUD operations for albums and songs are not implemented. Future improvements include adding these operations and further refining the user experience.