Drillbi – Detaljerad projektöversikt

Teknisk översikt

Tech stack: React 19 + TypeScript (frontend), Spring Boot 3.4 + Java 21 (backend)
State management: React Context API för global state, custom hooks för lokal state
Autentisering: OAuth2 (Google/GitHub) + JWT-tokens, Spring Security
Deployment: Docker-containers, CI/CD med GitHub Actions
Testning: JUnit 5 med JaCoCo-täckningsrapporter för backend

Arkitektur & integrationer

Drillbi är byggd med en modern mikroservice-arkitektur där frontend och backend är helt separerade. Systemet integrerar flera externa tjänster för att leverera en komplett lärplattform.

REST API: Backend exponerar ett RESTful API med versionshantering (/api/v2/)
OpenAI Integration: GPT-modeller för att generera quizfrågor och AI-förklaringar
Anthropic Claude: Alternativ AI-modell för frågegenerering (Claude 3 Haiku)
OCR med Tesseract: Extraherar text från uppladdade bilder för att skapa quiz
Stripe Payments: Hanterar prenumerationer och betalningar för premium-funktioner
MySQL Database: Persistent lagring av användare, kurser och frågor
H2 Database: In-memory databas för utveckling och testning
JPA & Hibernate: ORM för databashantering med automatisk schema-generering

Nyckelfunktioner

AI-genererade frågor: Skapa automatiskt quizfrågor från valfri text med OpenAI eller Claude
Bild-till-quiz: Ladda upp bilder av läroböcker eller anteckningar, OCR extraherar texten och AI genererar frågor
Adaptiv repetition: Felaktigt besvarade frågor läggs tillbaka i kön efter 10-15 frågor för effektiv inlärning
AI-förklaringar: Få detaljerade förklaringar på varje fråga och svar med hjälp av AI
Flerspråkigt stöd: Fullständigt stöd för svenska och engelska med i18next
Kurshantering: Skapa, redigera och organisera kurser med anpassade frågor
Frågeredigering: Manuellt redigera AI-genererade frågor eller skapa egna från grunden
Statistik & progress: Realtidsstatistik över rätta svar, felfrekvens och framsteg
Premium-funktioner: Stripe-integration för prenumerationer med utökade AI-funktioner

Skärmbilder

Inloggningsvy där användare kan ange uppgifter eller logga in med Google — 1. Inloggningsflödet med stöd för traditionell inloggning och Google-auth.

Kurstabell med flera valbara quizkurser och språkknappar — 2. Kursöversikt med språkväxlare för att starta rätt quiz.

Quizfråga där ett rätt svar markeras i grönt — 3. Frågesession som markerar korrekt svar och visar progression.

Quizfråga med fel svar i rött och AI-förklaring — 4. AI-genererad förklaring efter fel svar för fördjupad förståelse.

Formulär för att skapa en ny kurs — 5. Enkel kurskapare med validering av namn och valfri beskrivning.

Formulär för att lägga till nya frågor till en kurs — 6. Frågeeditor där du kan skriva frågor, svar och ladda upp bilder.

Text-till-quiz vy där text klistras in och språk väljs — 7. Text-till-quiz generering med liveberäkning av uppskattat antal frågor.

Foto-till-quiz kort där användare kan extrahera text från bild — 8. Foto-till-quiz flöde som laddar upp bilder och extraherar text.

Lärdomar

Backend-utvecklingen av Drillbi har varit en djupdykning i modern Java-utveckling med Spring Boot. Projektet har gett omfattande erfarenhet av att bygga robusta REST APIs, hantera komplex affärslogik och integrera externa tjänster som OpenAI, Anthropic Claude och Stripe. Att arbeta med Spring Security för OAuth2-autentisering och JWT-tokens har gett solid förståelse för säker autentiseringshantering i produktionsmiljö.

Integration med flera AI-modeller (OpenAI GPT och Claude) krävde omfattande arbete med prompt-engineering, felhantering och parsing av JSON-svar från olika API:er. Att hantera OCR med Tesseract för bild-till-text-funktionalitet var också en lärorik utmaning, särskilt kring bildbehandling och textextraktion. Stripe-integrationen lärde mig hur man hanterar webhooks, betalningsflöden och prenumerationshantering på ett säkert sätt.