Hoppa till huvudinnehåll

Slutprojekt - Bygg Din Drömhemsida 🚀

Projektöversikt 🎯​

Detta är ditt stora examinerande projekt där du får chansen att bygga en komplett webbapplikation som demonstrerar alla kunskaper du lärt dig under kursen. Du har fullständig kreativ frihet att välja vad du vill bygga - det enda kravet är att du använder alla tekniska koncept vi gått igenom.

Tänk på detta som din portfolio-piece - något du kan visa upp för framtida arbetsgivare eller använda som grund för egna projekt!

Projektet är ditt! 💡

Detta handlar om att träna på programmeringskoncept genom att bygga något du verkligen bryr dig om. Välj något som motiverar dig att koda!

Tekniska krav - Alla koncept måste användas 📋​

Du måste demonstrera förståelse för alla dessa koncept i ditt projekt:

🛠️ Obligatoriska tekniska komponenter:​

  1. Dynamisk routing - Olika sidor/vyer baserat på URL
  2. Databasmodeller - Strukturerad data med Prisma
  3. Databasrelationer - Kopplingar mellan olika datatyper
  4. Inloggning - Användare kan skapa konto och logga in
  5. Kryptering - Säker hantering av lösenord och känslig data
  6. Hosting i molnet - Deploy till Render
  7. Realtidsdata - Live uppdateringar (SSE)
  8. Bilduppladdning - Användare kan ladda upp bilder
  9. Layout groups - Olika layouts för olika grupper av routes.
  10. Authentication tokens - Säker session-hantering

Projektexempel - Inspirera dig! 💡​

🎮 Gaming & Community​

Exempel: Gaming Tournament Platform

  • Routing: /tournaments, /tournament/[id], /profile, /leaderboard
  • Database: Users, Tournaments, Matches, Teams med relationer
  • Real-time: Live tournament brackets, chat under matcher
  • Images: Team logos, user avatars, tournament banners
  • Auth: Spelare loggar in för att anmäla sig till tournaments

🏋️ Fitness & Hälsa​

Exempel: Workout Tracker Community

  • Routing: /workouts, /workout/[id], /progress, /social
  • Database: Users, Exercises, Workouts, Progress med relationer
  • Real-time: Live workout sessions, motivation feed
  • Images: Exercise demonstrations, progress photos
  • Auth: Personliga workout plans och progress tracking

🎨 Kreativt & Portfolio​

Exempel: Artist Collaboration Platform

  • Routing: /gallery, /artist/[id], /collaborate, /projects
  • Database: Artists, Artworks, Projects, Collaborations
  • Real-time: Live drawing sessions, project updates
  • Images: Artwork uploads, work-in-progress shots
  • Auth: Artists showcasar sina verk och hittar collaborators

📚 Utbildning & Lärande​

Exempel: Study Group Finder

  • Routing: /courses, /study-groups, /group/[id], /calendar
  • Database: Users, Courses, StudyGroups, Sessions
  • Real-time: Live study sessions, instant messaging
  • Images: Course materials, study notes
  • Auth: Studenter ansluter till relevanta study groups

🌱 Hobbies & Intressen​

Exempel: Garden Sharing Community

  • Routing: /gardens, /garden/[id], /marketplace, /tips
  • Database: Users, Gardens, Plants, MarketItems
  • Real-time: Garden care reminders, marketplace updates
  • Images: Plant photos, garden progress
  • Auth: Trädgårdsentusiaster delar tips och bytar plantor

Fas 1: Planering och koncept 📝​

Steg 1: Välj ditt projekt​

Brainstorma och välj:

# Min projektidé

## Projektnamn:
[Vad heter din hemsida?]

## Målgrupp:
[Vem är denna hemsida för?]

## Huvudsyfte:
[Vad ska användare kunna göra på din hemsida?]

## Varför valde jag detta:
[Vad motiverar dig att bygga just detta?]

## Inspiration:
[Finns det liknande sidor som inspirerar dig?]

Steg 2: Skissa din hemsida​

Rita upp din vision:

Din uppgift 1: Skapa wireframes/mockups

  • Rita huvudsidorna (startsida, profil, etc.)
  • Visa navigation och layout
  • Markera var olika tekniska komponenter används
  • Kan vara handritade sketcher eller digital design

Tips för skissning:

[Header med navigation]
[Main content area - vad visas här?]
[Sidebar - live updates? user info?]
[Footer med länkar]

Steg 3: Teknisk mappning​

Planera hur du använder varje koncept:

Din uppgift 2: Fyll i denna mall

# Teknisk implementation för [Ditt projekt]

## 1. Dynamisk routing
**Vilka sidor/routes kommer jag ha:**
- / (startsida)
- /[specifik route för ditt projekt]
- /[annan route]
- /[user-specifik route]
**Exempel på dynamiska parametrar:** /user/[id], /post/[slug]

## 2. Databasmodeller
**Vilka huvudsakliga data-typer behöver jag:**
- User (name, email, password, profile_pic)
- [Din huvudsakliga content-typ]
- [Relaterad data-typ]
- [Ytterligare data om behövs]

## 3. Databasrelationer
**Hur är min data kopplad:**
- User har många [foo] (one-to-many)
- Olika [foo] kan tillhöra flera Users (many-to-many)
- [Beskriv andra relationer]

## 4. Inloggning
**Vad kan inloggade användare göra som ej-inloggade inte kan:**
- [Specifik funktionalitet]
- [Annan funktionalitet]
- [Personlig data/inställningar]

## 5. Kryptering
**Vilken känslig data behöver skyddas:**
- Lösenord
- [Annan känslig data i ditt projekt]
- [Personlig information]

## 6. Hosting i molnet
**Var planerar jag deploya:**
- ???

## 7. Realtidsdata
**Vad ska uppdateras live:**
- [Specifik funktionalitet som behöver real-time]
- [Notifications/meddelanden]
- [Live stats/counters]

## 8. Komponentbibliotek (frivilligt)

**Undersök dessa:**
- https://carbon-components-svelte.onrender.com/
- https://flowbite-svelte.com/
- https://www.shadcn-svelte.com/
- https://www.skeleton.dev/

**Vilka teranvändbara komponenter behöver jag:**
- Header/Navigation?
- [Projekt-specifik komponent]
- Modal/Dialog?
- [Form]

## 9. Bilduppladdning
**Var använder jag bilder:**
- Profilbilder för användare
- [Huvudsaklig bild-content för ditt projekt]
- [Thumbnails/previews]

## 10. Layout groups
**Hur organiserar jag mina layout groups:**
- Vilka olika routes ska klumpas i olika grupper och därmed dela visuell layout och server-logik.

## 11. Authentication tokens
**Hur hanterar jag säkra sessioner:**
- Säker cookie-hantering
- Session management

Fas 2: Projektstruktur och Trello 📊​

Steg 1: Skapa din Trello board​

Organisera ditt arbete:

Din uppgift 3: Sätt upp Trello med dessa kolumner:

TODO | DOING | DONE

Steg 2: Fyll din Trello med kort​

Lägg till kort för varje komponent:

Obligatoriska kort (minimum):

Setup & Infrastructure:

  • Skapa SvelteKit projekt
  • Sätt upp databas (Prisma)
  • Konfigurera authentication
  • Setup hosting

Core Features:

  • Implementera användarregistrering
  • Implementera inloggning/utloggning
  • Skapa huvudlayout med navigation
  • Implementera [din huvudfunktionalitet]
  • Lägg till bilduppladdning för [specifik användning]

Database & Relations:

  • Skapa User model
  • Skapa [din content] model
  • Implementera databasrelationer
  • Seeda databas med testdata

Advanced Features:

  • Implementera realtidsdata (SSE)
  • Skapa responsiv design (mobil + desktop)
  • Lägg till säkerhetsvalidering
  • Implementera authentication tokens

Polish & Deploy:

  • Testing och buggfixar
  • Performance optimization
  • Deploy till produktion
  • Dokumentation

Exempel på mer specifika kort baserat på projekttyp:

För Gaming Tournament Platform:

  • Skapa Tournament model med relations
  • Implementera tournament bracket UI
  • Live tournament updates med SSE
  • Team logo upload funktionalitet

För Workout Tracker:

  • Skapa Exercise och Workout models
  • Progress tracking dashboard
  • Live workout session timer
  • Progress photo upload

Steg 3: Detaljera dina kort​

Gör varje kort actionable:

Exempel på väl detaljerat kort:

Titel: "Implementera användarregistrering"

Beskrivning:
- Skapa registreringsformulär (/register)
- Validera email format och lösenordsstyrka
- Hasha lösenord
- Spara ny användare i databas
- Redirect till profil efter lyckad registrering
- Visa error messages vid fel

Acceptanskriterier:
- [x] Form validering fungerar
- [x] Lösenord hashas säkert
- [x] Email duplicates förhindras  
- [x] Användare redirectas efter registrering

Fas 3: Inlämning och presentation 📤​

Steg 1: Dokumentation​

Skapa din inlämning:

Din uppgift 4: Skriv slutgiltig projektrapport

# Projektrapport: [Ditt projekt]

## Projektöversikt
[Kort beskrivning av vad du byggt]

## Teknisk implementation

### Dynamisk routing
[Beskriv dina routes och hur de fungerar]
[Screenshot av olika sidor]

### Databasmodeller och relationer
[Beskriv din databasstruktur]
[ER-diagram eller screenshot av Prisma schema]

### Authentication & Security
[Hur implementerade du inloggning och säkerhet]
[Screenshots av login/register]

### Realtidsdata
[Vad uppdateras i real-time och hur]
[Demo av live funktionalitet]

### Hosting och deployment
[Var är appen deployed]
[Länk till live version]

### Övriga tekniska komponenter
[Bilduppladdning, komponentbibliotek, layout, etc.]

## Utmaningar och lösningar
[Vad var svårt och hur löste du det]

## Vad lärde du dig
[Reflektion över processen]

## Nästa steg
[Vad skulle du vilja lägga till/förbättra]

## Demo
[Länk till live appen]
[Länk till GitHub repository]
[Länk till Trello board]

Steg 2: Live demo​

Förbered din presentation:

Presentation checklist:

  • Live appen fungerar och är deployed
  • Du kan visa alla tekniska komponenter
  • Demo-användare skapad för enkel testing
  • Beredd att förklara tekniska val
  • Kan visa både desktop och mobil-version

Demo-struktur (5-10 minuter):

  1. Kort intro - Vad är appen och varför bygde du den?
  2. Live demo - Visa huvudfunktionalitet
  3. Teknisk genomgång - Förklara några tekniska highlights
  4. Utmaningar - Vad var svårast att lösa?
  5. Q&A - Svara på frågor

Bedömningskriterier 📊​

Teknisk implementation (70%)​

  • ✅ Alla obligatoriska tekniska komponenter används korrekt
  • ✅ Koden är välstrukturerad och läsbar
  • ✅ Säkerhet och best practices följs
  • ✅ Appen fungerar utan större buggar

Kreativitet och användarupplevelse (20%)​

  • ✅ Originell och genomtänkt projektidé
  • ✅ Intuitivt användargränssnitt
  • ✅ Responsiv design som fungerar på olika enheter
  • ✅ Tilltalande visuell design

Process och dokumentation (10%)​

  • ✅ Välorganiserad Trello board
  • ✅ Tydlig projektplanering
  • ✅ Bra dokumentation av tekniska val
  • ✅ Reflektion över lärande och utmaningar

Slutgiltiga tips🌟​

Börja enkelt, bygg ut sedan​

  • Få grundfunktionaliteten att fungera först
  • Lägg till en teknisk komponent i taget
  • Testa ofta och tidigt

Håll dig till din plan​

  • Använd din Trello aktivt
  • Uppdatera statusen på kort regelbundet
  • Var realistisk med scope

Fokusera på användaren​

  • Bygg något du själv skulle vilja använda
  • Testa med riktiga användare (vänner/familj)
  • Prioritera användarupplevelse över avancerade features

Dokumentera medan du bygger​

  • Skriv ner tekniska beslut
  • Ta screenshots av progressen
  • Anteckna utmaningar och lösningar
Lycka till! 🚀

Detta är din chans att visa allt du lärt dig och bygga något du kan vara stolt över. Fokusera på att skapa något välfungerande snarare än perfekt - du kan alltid förbättra efter inlämning!

Inlämning: Ladda upp projektrapport + Trello-länk på Classroom Deadline: [Sätt in datum] Presentation: [Sätt in datum för demo-session]