Jag frågade AI och kom fram till att React är något som är inne och bra att kunna men med lite längre inlärningskurva. Hur svårt kan det vara tänkte jag.

Projektet byggdes på en modern frontend-stack med React som kärna och Vite som byggverktyg för snabb utveckling. All kod skrevs i TypeScript för att få tydligare typer och bättre struktur när appen växte. Gränssnittet skapades med Lucide React-ikoner, Tailwind CSS och komponenter från shadcn/ui, vilket gav en ren och modulär design. För visualiseringarna användes D3.js, som gjorde det möjligt att ha ett interaktivt gränssnitt med zoom, pan och relationer. Temahanteringen byggdes upp med dynamiska data-theme-klasser i CSS, så att användaren kunde växla mellan olika färgteman. Projektet använde Vite + React Router för snabba sidövergångar, React Context för delad state (t.ex. användar- och temainställningar) och en modulär mappstruktur med barrel-filer för importer.

Koden organiserades i mappar som components/, pages/, services/ och types/, med alias-stöd via tsconfig.json och vite.config.ts.

Syftet var att skapa en frontend som kunde kopplas till ett Flask- eller FastAPI-backend, med möjlighet att visa relationer, dokument och statistik i ett interaktivt gränssnitt.

Tusen imports senare

Jag fastnade tidigt i strukturfrågor – aliasvägar som inte fungerade, barrel-filer som krockade, typfel i TypeScript som jag inte ens förstod hur jag skulle tolka. Jag försökte skapa ordning men varje gång något löstes uppstod ett nytt mysterium. Bara att få Vite, imports och komponenter att spela snällt ihop tog veckor.

Sedan kom D3-visualiseringarna. Jag fick kämpa med zoom som slutade fungera, pilar som pekade åt fel håll och noder som hoppade iväg som vilda ballonger. Kod som såg logisk ut i teorin betedde sig som om den hade egen vilja.

Till slut insåg jag att projektet inte skulle bli färdigt – inte i den här formen i alla fall. För varje framsteg kom nya problem, och jag tappade glädjen mitt i all felsökning. Men jag lärde mig massor: hur React tänker, hur Vite hanterar sina byggflöden, och hur viktigt det är att dokumentera varje liten del.

Nya tag

Något jag lärt mig sedan tidigare är att det är bättre att börja om ifall det blir för rörigt eller för många fel som inte går att lösa. Nästa gång finns det med en del kunskap så vissa fallgropar kan undvikas från början. Andra gånger är det bättre att ta ett steg tillbaka och angripa problemet från en helt annan vinkel. Så fick det bli denna gång. I backend går jag tillbaka till Flask och SQLAlchemy med Marshmallow, databas: SQLite (lokalt) och PostgreSQL (produktion), i frontend tänker jag testa Quasar (Vue 3, Vite, Pinia, Router). Istället för att bygga brett tänker jag börja med att få fungerande användaradmin först eftersom sådant kan ställa till det när en bygger lite här och där. Sedan ska jag skapa teman, layout och sådant. Först när grunden är lagd ska jag bygga på de specifika funktioner som gjorde att jag ville bygga just den appen.