Match Kit.
Från frustration till produkt — ett AI-verktyg byggt för att lösa ett verkligt problem
MatchKit började som en personlig frustration. Efter att ha skickat otaliga jobbansökningar utan att höra något tillbaka bestämde jag mig för att bygga ett verktyg som berättar exakt hur väl ditt CV matchar en jobbbeskrivning — och vad du behöver förbättra. Det här projektet visar hur moderna AI-APIer kan integreras i en produktionsklar Next.js-applikation med en genomtänkt användarupplevelse.
År
2026
Typ
Webbapplikation
Teknik
Next.js, HTML, TypeScript, Tailwind CSS, Gemini AI API
Roll
Designer och utvecklare
Att skicka CV:n ut i tomma intet
-- PROBLEMET
År 2026 är frontendarbetsmarknaden mättad. Rekryterare får hundratals ansökningar per tjänst och de flesta CV:n filtreras bort av ATS-system innan en människa ens läser dem.
Kärnproblemet är att de flesta kandidater inte vet hur väl deras CV faktiskt matchar en specifik jobbbeskrivning. De ansöker brett, hör ingenting och har ingen signal om vad de bör förbättra.
Jag ville bygga något som ger omedelbar och handlingsbar feedback — en matchningspoäng, identifierade luckor, saknade nyckelord och konkreta omskrivningsförslag — så att kandidater kan sluta gissa och börja förbättra.
Problemet hade flera lager som en enkel nyckelordskontroll inte kunde lösa.
- CV:n optimeras inte per tjänst — kandidater använder en och samma version för allt
- ATS-system filtrerar på nyckelord innan en människa är inblandad
- Generiska feedbackverktyg ger vaga råd, inte specifika omskrivningar
- Kandidater saknar riktmärke för vad som är 'tillräckligt bra'
Design för tydlighet under press
-- DESIGNKONCEPT
Designen behövde kännas skarp, trovärdig och snabb — motsatsen till en generisk SaaS-dashboard. Jag valde en mörkt läge-estetik med en enda högkontrastfärgaccent, en tät typografisk hierarki med DM Sans och DM Mono, och en avsiktligt minimalistisk layout som sätter analysresultaten i centrum.
Varje designbeslut styrdes av användarens känslomässiga tillstånd: någon som är orolig över sin jobbsökning och behöver tydlig, ärlig information — utan brus. Resultatet är ett gränssnitt som känns kliniskt i bästa bemärkelse — precist, lättläst och lugnt.
Designkoncept — mörkt läge, typografisk kombination DM Sans + DM Mono
AI-integration med en säker API-proxy på serversidan
-- ARKITEKTUR
Den centrala tekniska utmaningen var att integrera ett tredjeparts-AI-API på ett rent och säkert sätt. Istället för att exponera en API-nyckel på klientsidan — ett vanligt misstag i AI-demos — byggde jag en serversidig route handler i Next.js som proxar alla förfrågningar till Gemini API:et. Nyckeln lämnar aldrig servern.
AI-svaret struktureras via en noggrant utformad systemprompt som tvingar modellen att alltid returnera strikt JSON — matchningspoäng, sammanfattning, styrkor, luckor, nyckelord och omskrivningspar före/efter. Det gör svaret tillförlitligt tolkningsbart och direkt renderbart i gränssnittet utan gissningar i efterbehandlingen.
Resultatet är en ren separation mellan AI-lagret och presentationslagret — ett mönster som skalar till vilken AI-driven produkt som helst.
Viktiga tekniska beslut som gör detta produktionsklart, inte bara en demo.
- Serversidig API-proxy via Next.js route handler — nyckeln exponeras aldrig för klienten
- Strikt JSON-utdata garanterad genom promptteknik
- Gemini 2.5 Flash för hastighet och kostnadseffektivitet på gratistjänsten
- TypeScript i hela projektet — fullt typade API-svar och komponentprops
- Tailwind CSS för ett konsekvent och underhållsvänligt designsystem
Analysatorn i aktion — desktop och mobil
-- DEN DRIFTSATTA APPEN
Den färdiga applikationen — från landningssidan till ett fullständigt analysresultat med poäng, luckor, nyckelord och omskrivningsförslag. Fullt responsiv på alla skärmstorlekar.
Den driftsatta appen — matchningspoäng, luckanalys, nyckelordschips och omskrivningsförslag.
AI:n är bara så bra som de instruktioner du ger den
-- PROMPTTEKNIK
En av de mest underskattade delarna av att bygga AI-drivna produkter är promptdesign. En dåligt strukturerad prompt returnerar inkonsekvent, otolkningsbar utdata. En välutformad uppträder som ett tillförlitligt API.
För MatchKit instruerar systempromten modellen att agera som specialistanalytiker för CV:n inom frontend- och teknikroller, returnera enbart giltig JSON utan inledning eller markdown, producera omskrivningar som citerar faktiska fraser från CV:t, och säkerställa att styrkor och luckor är specifika för jobbbeskrivningen — inte generiska råd.
Den här nivån av promptprecision är vad som skiljer en fungerande prototyp från ett produktionsklart verktyg.
Promptteknik · Strukturerad JSON-utdata garanterad via systeminstruktion
En produktionsklar AI-produkt byggd under ett enda sprint
-- RESULTATET
MatchKit gick från idé till driftsatt applikation på under en dag. Det visar att AI-integration inte kräver ett komplext backend eller ett stort team — det kräver tydligt produkttänkande, ren arkitektur och disciplinerad promptteknik.
Det här projektet speglar hur jag ser på produktarbete: identifiera ett verkligt problem, designa en fokuserad lösning och leverera något som faktiskt fungerar.
Produktionsdriftsättning · Serverlös funktion på Vercel med säker miljökonfiguration