fix: lessons
This commit is contained in:
@@ -1,116 +1,77 @@
|
||||
# Les 10: Styling: Tailwind CSS & shadcn/ui
|
||||
# Les 10: Supabase Auth & Row Level Security — Verdieping
|
||||
|
||||
> ✅ **Deze les is volledig uitgewerkt**
|
||||
|
||||
## Lesmateriaal
|
||||
|
||||
- [Slide Overzicht](../Les10-Supabase-Auth/Les10-Slide-Overzicht.md)
|
||||
- [Docenttekst](../Les10-Supabase-Auth/Les10-Docenttekst.md)
|
||||
- [Lesstof](../Les10-Supabase-Auth/Les10-Lesstof.md)
|
||||
- [Lesopdracht / Hands-on](../Les10-Supabase-Auth/Les10-Lesopdracht.md)
|
||||
- [Huiswerk](../Les10-Supabase-Auth/Les10-Huiswerk.md)
|
||||
|
||||
---
|
||||
|
||||
## Hoofdstuk
|
||||
**Deel 3: Full-Stack Development** (Les 9-12)
|
||||
## Deel
|
||||
**Deel 2 — Technical Foundations** (Les 4-10)
|
||||
|
||||
## Beschrijving
|
||||
Styling je applicatie met Tailwind CSS en modern components met shadcn/ui. Utility-first approach, component libraries, themeing en dark mode implementatie.
|
||||
Vervolg op Les 9: we bouwen de complete auth-flow uit met sessie-management, beschermde routes en gedegen RLS-policies. De QuickPoll-app krijgt een professioneel niveau van autorisatie en is daarmee klaar voor de AI-lessen.
|
||||
|
||||
---
|
||||
|
||||
## Te Behandelen (~45 min)
|
||||
## Te Behandelen
|
||||
|
||||
- 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
|
||||
### Theorie
|
||||
- Drie auth-methodes in Supabase (e-mail/password, magic link, OAuth)
|
||||
- Hoe sessies werken (JWT, refresh tokens, cookies)
|
||||
- Server- vs. client-componenten in Next.js voor auth
|
||||
- Row Level Security in detail: `using` vs. `with check`, `auth.uid()`
|
||||
- Beschermde routes via middleware vs. server components
|
||||
|
||||
### Hands-on
|
||||
- Supabase Auth provider configureren in dashboard
|
||||
- Login + registratie pagina's met error handling
|
||||
- Sessie ophalen in server components
|
||||
- Drie RLS-policies: read-eigen, insert-eigen, update-eigen
|
||||
- Test scenario: hoe weet je dat RLS écht werkt?
|
||||
|
||||
---
|
||||
|
||||
## Tools
|
||||
- Tailwind CSS
|
||||
- shadcn/ui
|
||||
- Cursor
|
||||
- TypeScript
|
||||
- Supabase (Auth + RLS)
|
||||
- Next.js 16 App Router
|
||||
- `@supabase/ssr` + `@supabase/supabase-js`
|
||||
- TypeScript + Tailwind CSS
|
||||
|
||||
---
|
||||
|
||||
## Lesopdracht (2 uur, klassikaal)
|
||||
## Lesopdracht (in-class, 60 min)
|
||||
|
||||
### Styling Je Mini-Project
|
||||
Uitbreiding van de QuickPoll-app:
|
||||
- Authenticatie volledig werkend (signup, login, logout, sessie)
|
||||
- Beschermde `/create` en `/my-polls` routes
|
||||
- RLS-policies geactiveerd op `polls` en `options`
|
||||
- "My Polls" pagina toont alleen polls van ingelogde gebruiker
|
||||
|
||||
**Groepsdiscussie (15 min):**
|
||||
Bespreek klassikaal de Full-Stack Mini Project ervaringen uit Les 9 - welke onderdelen werkten goed en waar liepen jullie vast?
|
||||
|
||||
**Deel 1: Tailwind Basics (30 min)**
|
||||
|
||||
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
|
||||
- Gerestyled mini-project met Tailwind + shadcn/ui
|
||||
- Dark mode toggle werkend
|
||||
- Mobile responsive design
|
||||
- GitHub commit met improvements
|
||||
**Inleveren:** GitHub repo + screen-recording van werkende auth-flow.
|
||||
|
||||
---
|
||||
|
||||
## Huiswerk (2 uur)
|
||||
## Huiswerk (take-home)
|
||||
- Voeg "Edit poll" toe die alleen werkt voor eigenaar (RLS-check)
|
||||
- Voeg "Delete poll" toe met confirm-dialog
|
||||
- Test wat er gebeurt als je de RLS-policy uitzet (security demo)
|
||||
- Reflectie van 500 woorden: waarom is RLS beter dan auth-checks in code?
|
||||
|
||||
### Vervolg Styling & Polish
|
||||
|
||||
**Deel 1: Component Library Uitbreiden (1 uur)**
|
||||
|
||||
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
|
||||
- Compleet gestylde mini-project
|
||||
- Alle shadcn/ui components correct geintegreerd
|
||||
- Custom color theme
|
||||
- GitHub commits met styling improvements
|
||||
**Inleveren:** Via Teams/Brightspace.
|
||||
|
||||
---
|
||||
|
||||
## Leerdoelen
|
||||
|
||||
Na deze les kan de student:
|
||||
- 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
|
||||
- Een complete auth-flow opzetten in Next.js + Supabase
|
||||
- Sessies veilig beheren via cookies + middleware
|
||||
- Effectieve RLS-policies schrijven met `auth.uid()`
|
||||
- Verschil uitleggen tussen auth in code vs. auth in database
|
||||
- Een poll-app maken die multi-user-veilig is
|
||||
|
||||
Reference in New Issue
Block a user