Certificate

# ===== Award criteria =====
# Pass: >= 70% across the dimensions; Distinction >= 85%.
#
# 1. Component design       (15)
# 2. Reactivity + stores    (15)
# 3. Routing (SvelteKit)    (15)
# 4. Server-side data       (15)
# 5. Forms + validation     (10)
# 6. Testing                (10)
# 7. Performance + bundle   (10)
# 8. Communication          (10)

# ===== Project brief =====
# Ship a small SvelteKit app with the following:
# - At least 3 routes
# - One server-only data path (+page.server.ts) with auth
# - One form with progressive enhancement
# - Pinia/store-shared state where it makes sense (theme, user)
# - 5+ tests (vitest + playwright)
# - Lighthouse / Webhint score on the home route
# - README explaining choices

# Suggested ideas: a small admin dashboard, a blog with comments, a feature-flag UI,
# a task tracker with auth.

# ===== Sample submission structure =====
# my-app/
#   src/
#     routes/
#       +layout.svelte
#       +page.svelte               (home)
#       login/
#         +page.svelte
#         +page.server.ts          (form action)
#       dashboard/
#         +page.svelte
#         +page.server.ts          (auth + data)
#       api/posts/+server.ts
#     lib/
#       components/
#       stores.ts
#       db.ts
#   tests/
#     home.test.ts
#     login.spec.ts                (playwright)
#   svelte.config.js
#   vite.config.ts
#   README.md

# ===== Marking rubric (example) =====
# 1. Component design        13/15  small + reusable, slot usage
# 2. Reactivity + stores     14/15  derived stores, no overuse
# 3. Routing                 14/15  layouts, dynamic params, error pages
# 4. Server-side data        13/15  auth + load + form actions
# 5. Forms                    9/10  progressive enhancement + validation
# 6. Testing                  8/10  unit + e2e + coverage
# 7. Performance              9/10  Lighthouse > 90, small bundle
# 8. Communication            9/10  README + screenshots
# Total: 89/100 -> Distinction

# ===== Patterns to internalise =====
# - File-based routing with +page / +layout / +server
# - load functions: + .ts for universal, +.server.ts for server-only
# - hooks.server.ts for cross-cutting concerns (auth, requestId)
# - One adapter chosen on day one

# ===== Pitfalls =====
# - DB code in +page.ts -> runs on client too (leak risk)
# - Skipping form actions, falling back to fetch + JS (worse UX)
# - Heavy bundle from importing big libs server-side then to client
# - Adapter mismatch with hosting (e.g. adapter-node on Vercel)

// /certificate/svelte