Skole · Kristiania · 2023
Artist API
Fullstack-løsning der et plateselskap holder orden på artistene sine: opprett, vis, endre og slett artistprofiler.
Sammendrag
Et artist-API med .NET/C# i backend og React og TypeScript i frontend. Det startet som en eksamensoppgave over tre dager, med fokus på grunnleggende CRUD for artister. Et par uker etter eksamen bygde jeg videre med album og sanger og relasjonene mellom dem, seeding av databasen, søk, tilbakemeldinger til brukeren, feilhåndtering, styling og mer, for å gjøre det til et mer gjennomarbeidet produkt.
Prosessen
Datamodell og relasjoner
Først tegnet jeg datamodellen i Draw.io, med entitetene artist, album og sang og relasjonene mellom dem. Slik hadde jeg en tydelig retning før jeg begynte å kode.
Oppsett av API-et
Deretter satte jeg opp API-et med modeller, interfaces og kontrollere i .NET/C#, og testet endepunktene i Swagger underveis.
Seeding av databasen
Med API-et på plass lagde jeg en DbInitializer-klasse som fyller databasen med testdata: tolv artister med to album hver, med sanger.
Oppsett av frontend
Da backend var klar, satte jeg opp frontend med React og TypeScript. Jeg lagde en service med Axios for kallene mot API-et og en context-klasse for å håndtere state.
Komponenter
Så lagde jeg komponenter som ArtistItem og ArtistList for å vise artistene, og koblet dem til servicen og contexten.
Mer funksjonalitet
For å gjøre løsningen mer komplett la jeg til søk og full CRUD for artister i frontend, med egne skjemakomponenter, feilhåndtering og tilbakemeldinger til brukeren.
Finpuss av brukeropplevelsen
Deretter finpusset jeg opplevelsen med en bekreftelsesdialog før sletting, hjelpetekster og bedre feilhåndtering. Det gjorde appen både enklere å bruke og mer robust.
Designprinsipper
Gjennom hele prosjektet fulgte jeg designprinsipper og beste praksis, med vekt på konsistent design og universell utforming.
Veien videre
Foreløpig kan man se artister, album og sanger, men det er bare artistene som kan opprettes, endres og slettes. Et naturlig neste steg er å få det samme på plass for album og sanger.
