fix: les 6
This commit is contained in:
@@ -1,126 +1,116 @@
|
||||
# Les 10: Full-Stack Mini Project
|
||||
# Les 10: Styling: Tailwind CSS & shadcn/ui
|
||||
|
||||
---
|
||||
|
||||
## Hoofdstuk
|
||||
**Deel 3: Integration & AI Tooling** (Les 10-12)
|
||||
**Deel 3: Full-Stack Development** (Les 9-12)
|
||||
|
||||
## Beschrijving
|
||||
Combineer alles wat je geleerd hebt (TypeScript, Next.js, Supabase) in een kleine werkende applicatie. Dit is je eerste "echte" full-stack project en voorbereiding op het werken met AI tools.
|
||||
Styling je applicatie met Tailwind CSS en modern components met shadcn/ui. Utility-first approach, component libraries, themeing en dark mode implementatie.
|
||||
|
||||
---
|
||||
|
||||
## Te Behandelen
|
||||
## Te Behandelen (~45 min)
|
||||
|
||||
### Groepsdiscussie (15 min)
|
||||
Bespreek klassikaal de Supabase ervaringen uit Les 9 - welke uitdagingen kwamen jullie tegen bij authenticatie en RLS?
|
||||
|
||||
### Doel van deze les
|
||||
|
||||
Je hebt nu alle bouwstenen:
|
||||
- TypeScript (Les 5)
|
||||
- Next.js met App Router (Les 6-7)
|
||||
- Supabase database & auth (Les 8-9)
|
||||
|
||||
Vandaag combineren we dit in een **werkende mini-app**. Geen nieuwe concepten - alleen integratie en toepassing.
|
||||
|
||||
---
|
||||
|
||||
### Mini Project: Personal Bookmarks
|
||||
|
||||
Een simpele bookmark manager waar je links kunt opslaan.
|
||||
|
||||
**Features:**
|
||||
- Login met Supabase Auth
|
||||
- Bookmarks toevoegen (URL + titel)
|
||||
- Bookmarks bekijken en verwijderen
|
||||
|
||||
**Tech stack:**
|
||||
- Next.js 14 met App Router
|
||||
- TypeScript
|
||||
- Tailwind CSS
|
||||
- Supabase (auth + database)
|
||||
- React Query
|
||||
|
||||
---
|
||||
|
||||
### Stap-voor-stap
|
||||
|
||||
#### Database Schema
|
||||
|
||||
**Tabel: bookmarks**
|
||||
| Kolom | Type |
|
||||
|-------|------|
|
||||
| id | uuid (PK) |
|
||||
| user_id | uuid (FK naar auth.users) |
|
||||
| url | text |
|
||||
| title | text |
|
||||
| created_at | timestamptz |
|
||||
|
||||
**RLS:** Users kunnen alleen eigen bookmarks zien, toevoegen en verwijderen.
|
||||
|
||||
#### Wat je bouwt
|
||||
|
||||
1. **Login pagina** - Supabase Auth
|
||||
2. **Dashboard** - Lijst van bookmarks
|
||||
3. **Add form** - URL + titel invoeren
|
||||
4. **Delete** - Bookmark verwijderen
|
||||
- Waarom Tailwind? Utility-first CSS approach vs traditioneel CSS
|
||||
- Tailwind in Next.js (meestal al ingesteld)
|
||||
- Core utilities: spacing, colors, flexbox, grid, responsive (mobile-first)
|
||||
- Tailwind components: buttons, cards, forms patterns
|
||||
- Wat is shadcn/ui? Beautifully designed component library
|
||||
- shadcn/ui installatie en configuratie
|
||||
- shadcn/ui components: Button, Card, Input, Dialog, etc.
|
||||
- Custom Tailwind color themes (tailwind.config.ts)
|
||||
- Dark mode implementation met Tailwind
|
||||
- Performance: class optimization, purging unused styles
|
||||
|
||||
---
|
||||
|
||||
## Tools
|
||||
- VS Code
|
||||
- Supabase Dashboard
|
||||
- Browser DevTools
|
||||
- Tailwind CSS
|
||||
- shadcn/ui
|
||||
- Cursor
|
||||
- TypeScript
|
||||
|
||||
---
|
||||
|
||||
## Lesopdracht (2.5 uur)
|
||||
## Lesopdracht (2 uur, klassikaal)
|
||||
|
||||
### Bouw de Bookmark Manager
|
||||
### Styling Je Mini-Project
|
||||
|
||||
**Checkpoints:**
|
||||
**Groepsdiscussie (15 min):**
|
||||
Bespreek klassikaal de Full-Stack Mini Project ervaringen uit Les 9 - welke onderdelen werkten goed en waar liepen jullie vast?
|
||||
|
||||
| Tijd | Wat klaar moet zijn |
|
||||
|------|---------------------|
|
||||
| 30 min | Project setup + database schema |
|
||||
| 60 min | Auth werkt (login/logout) |
|
||||
| 90 min | Bookmarks toevoegen en bekijken |
|
||||
| 120 min | Delete werkt |
|
||||
| 150 min | Styling en testen |
|
||||
**Deel 1: Tailwind Basics (30 min)**
|
||||
|
||||
**Minimale eisen:**
|
||||
- [ ] Login/logout werkt
|
||||
- [ ] Bookmarks toevoegen werkt
|
||||
- [ ] Bookmarks worden getoond
|
||||
- [ ] Delete werkt
|
||||
1. Open je mini-project uit Les 9
|
||||
2. Refactor bestaande components met Tailwind classes:
|
||||
- Button: `bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded`
|
||||
- Card: `bg-white rounded-lg shadow-lg p-6`
|
||||
- Form inputs: `w-full px-3 py-2 border border-gray-300 rounded-md`
|
||||
3. Voeg spacing, colors, responsive design toe
|
||||
|
||||
**Deel 2: shadcn/ui Setup & Components (45 min)**
|
||||
|
||||
1. Install shadcn/ui: `npx shadcn-ui@latest init`
|
||||
2. Install components: `npx shadcn-ui@latest add button input card dialog`
|
||||
3. Replace je custom components met shadcn versions
|
||||
4. Test styling en interactiviteit
|
||||
|
||||
**Deel 3: Theme & Dark Mode (30 min)**
|
||||
|
||||
1. Customize Tailwind color scheme in `tailwind.config.ts`
|
||||
2. Voeg dark mode toggle toe (localStorage + CSS class toggle)
|
||||
3. Zorg dat je hele app responsive is (mobile-first)
|
||||
|
||||
### Deliverable
|
||||
- Werkende lokale applicatie
|
||||
- Screenshot van je app met data
|
||||
- Gerestyled mini-project met Tailwind + shadcn/ui
|
||||
- Dark mode toggle werkend
|
||||
- Mobile responsive design
|
||||
- GitHub commit met improvements
|
||||
|
||||
---
|
||||
|
||||
## Huiswerk (1 uur)
|
||||
## Huiswerk (2 uur)
|
||||
|
||||
### Reflectie
|
||||
### Vervolg Styling & Polish
|
||||
|
||||
Schrijf korte reflectie (200 woorden):
|
||||
- Wat ging goed bij het integreren?
|
||||
- Waar liep je vast?
|
||||
- Wat zou je volgende keer anders doen?
|
||||
**Deel 1: Component Library Uitbreiden (1 uur)**
|
||||
|
||||
Maak een lijst van 3 verbeterpunten voor je code.
|
||||
Install en integreer meer shadcn/ui components:
|
||||
- Select, Tabs, Modal/Dialog
|
||||
- Forms package voor betere form handling
|
||||
- Toast notifications
|
||||
- Zorg dat je hele app consistent gelayout is
|
||||
|
||||
**Deel 2: Custom Theme (30 min)**
|
||||
|
||||
Maak je eigen color palette in `tailwind.config.ts`:
|
||||
- Primary, secondary, accent colors
|
||||
- Custom spacing, typography
|
||||
- Test in light en dark mode
|
||||
|
||||
**Deel 3: Accessibility & Polish (30 min)**
|
||||
|
||||
1. Voeg alt text toe aan images
|
||||
2. Zorg voor proper heading hierarchy
|
||||
3. Test keyboard navigation
|
||||
4. Fix UI inconsistencies
|
||||
|
||||
### Deliverable
|
||||
- Reflectie (200 woorden)
|
||||
- 3 verbeterpunten
|
||||
- Compleet gestylde mini-project
|
||||
- Alle shadcn/ui components correct geintegreerd
|
||||
- Custom color theme
|
||||
- GitHub commits met styling improvements
|
||||
|
||||
---
|
||||
|
||||
## Leerdoelen
|
||||
|
||||
Na deze les kan de student:
|
||||
- Een complete full-stack applicatie bouwen met Next.js, TypeScript en Supabase
|
||||
- CRUD operaties implementeren met React Query
|
||||
- Authenticatie integreren in een applicatie
|
||||
- Zelfstandig integratieproblemen oplossen
|
||||
- Tailwind utility-first approach begrijpen en toepassen
|
||||
- shadcn/ui components installeren en gebruiken
|
||||
- Custom Tailwind themes maken
|
||||
- Dark mode implementeren
|
||||
- Responsive design (mobile-first) toepassen
|
||||
- Professional-looking UI bouwen met componenten
|
||||
- Het verschil tussen styling approaches begrijpen
|
||||
|
||||
Reference in New Issue
Block a user