The ITZY Archives

The ITZY Archives är ett hobbyprojekt som vuxit fram under det senaste året. Det är ett omfattande arkiv som samlar all relevant information om gruppen, istället för att bara fokusera på de senaste nyheterna. Här finns allt från medlemsprofiler och diskografi till artiklar och turnédatum.

I detta projekt har jag kombinerat modern teknik med retroinspirerad design. Teknikstacken består av Strapi och PostgreSQL i backend samt Next.js och TypeScript i frontend. Den visuella identiteten hämtar inspiration från en scrapbooking-stil som präglade många fansajter under mitten av 2000-talet (en stil som också påminner om den tid då mitt eget intresse för webbutveckling tog fart).

Jag valde Strapi som headless CMS för dess open source-modell och flexibilitet. Eftersom det kan självhostas är jag inte beroende av en specifik molntjänst för CMS eller databas, utan kan själv välja var infrastrukturen ska köras. I det här projektet föll valet på Railway. Jag uppskattar också Strapis intuitiva admingränssnitt och Dynamic Zones, som erbjuder ett flexibelt sätt att bygga upp innehåll likt Flexible Content-fält i WordPress.

För frontend valde jag Next.js, framförallt för möjligheterna att kombinera serverrendering och statisk generering med effektiv cachning. Det ger goda förutsättningar för snabb laddning, sökmotoroptimering och en effektiv hantering av innehåll. Inbyggda funktioner som <Link> och <Image> förenklar dessutom navigering, prefetching och bildoptimering. Genom att använda Next.js inbyggda cachning och ISR kan sajten visa innehåll snabbt utan att behöva hämta samma data från Strapi vid varje sidvisning. Innehållet kan samtidigt uppdateras löpande, vilket ger både låg belastning på backend och en snabb användarupplevelse.

Fokus i projektet:

• REST API som bro mellan Strapi och Next.js
• En genererad TypeScript-fil med samtliga datatyper från Strapi
• Cloudinary som CDN för uppladdade mediefiler i Strapi
• Optimerad Instagram-integration via Apify med asynkron laddning
• CSS Modules med handskrivna globala klasser och breakpoints
• AI-assisterat arbetssätt med ChatGPT och GitHub Copilot som stöd i problemlösning och det dagliga utvecklingsarbetet

Läs mer på itzyarchives.com