SvelteSkill

Free Svelte certification for everyone.

Learn Svelte from the ground up. Pass quizzes and a final exam.
Earn a certificate anyone can verify — at zero cost, forever.

svelteskill.vercel.app  ·  Report a Bug  ·  Request a Feature  ·  Curriculum Feedback

Why SvelteSkill?

The Svelte ecosystem is one of the fastest growing in web development. Developers consistently rank it as their most loved framework — yet there was no certification platform for it. No structured way to learn it end to end. No way to prove you know it.

SvelteSkill fills that gap.

Built by a developer who wanted it to exist, for a community that deserves it. No company, no investors, no paywall. Just an open source project built with the very framework it teaches.

Features

• 4 certification tracks — Svelte Fundamentals, SvelteKit, Svelte Advanced, Svelte + TypeScript
• Structured curriculum — 12 lessons per track, split into 4 parts
• Part quizzes — 15 questions at the end of each part, 80%+ to unlock the next
• Final exam — 20 questions, 30-minute timer, shuffled every attempt, unlimited retakes
• Verifiable certificates — unique UUID per cert, public /verify/[id] page, no login needed to verify
• Sequential track unlocking — complete Fundamentals to unlock SvelteKit, and so on
• GitHub + Google OAuth — no passwords, no email verification
• Public profiles — share your earned certificates at /u/[username]
• Light + dark mode — preference saved to localStorage, no flash on load
• Fully open source — MIT licensed, community contributions welcome

Tracks

How Certification Works

Sign up with GitHub or Google
            ↓
Complete lessons 1–3  →  Pass Part 1 Quiz (15 questions, 80%+)
            ↓
Complete lessons 4–6  →  Pass Part 2 Quiz (15 questions, 80%+)
            ↓
Complete lessons 7–9  →  Pass Part 3 Quiz (15 questions, 80%+)
            ↓
Complete lessons 10–12 → Pass Part 4 Quiz (15 questions, 80%+)
            ↓
      Pass Final Exam (20 questions, 30 min, 80%+)
            ↓
  Certificate issued with a unique verifiable ID
            ↓
   Share at svelteskill.dev/verify/[id]

Every certificate is permanently accessible at a public URL. No login required to verify — share it on LinkedIn, a portfolio, or a resume and anyone can confirm it is real.

Tech Stack

Getting Started

Prerequisites

• Node.js v18 or higher
• A Supabase project (free tier is enough)
• A GitHub OAuth app
• A Google OAuth app

1. Clone and install

git clone https://github.com/constantine2003/svelteskill.git
cd svelteskill
npm install

2. Environment variables

cp .env.example .env

Fill in your values:

PUBLIC_SUPABASE_URL=https://your-project.supabase.co
PUBLIC_SUPABASE_ANON_KEY=your-anon-key
SUPABASE_SERVICE_ROLE_KEY=your-service-role-key

Never commit .env — it contains secrets. The .env.example file is safe to commit.

3. Set up the database

Run the schema in your Supabase SQL Editor:

docs/schema.sql

Then seed the curriculum in order:

docs/seeds/01_svelte_fundamentals_modules.sql
docs/seeds/02_svelte_fundamentals_questions.sql
docs/seeds/03_sveltekit_modules.sql
docs/seeds/04_sveltekit_questions.sql

4. Set up OAuth

GitHub:

1. GitHub → Settings → Developer settings → OAuth Apps → New OAuth App
2. Authorization callback URL: https://YOUR_PROJECT.supabase.co/auth/v1/callback
3. Copy Client ID + Secret → Supabase → Authentication → Providers → GitHub → Save

Google:

1. console.cloud.google.com → New project
2. APIs & Services → Credentials → OAuth Client ID → Web application
3. Redirect URI: https://YOUR_PROJECT.supabase.co/auth/v1/callback
4. Copy Client ID + Secret → Supabase → Authentication → Providers → Google → Save

URL config in Supabase:

• Site URL: http://localhost:5173
• Redirect URLs: http://localhost:5173/auth/callback

5. Run the dev server

npm run dev

Open http://localhost:5173.

Project Structure

svelteskill/
│
├── src/
│   ├── app.html                         # Root HTML — theme init script (no FOUC)
│   ├── app.css                          # Global styles + CSS variables for theming
│   ├── app.d.ts                         # Global TypeScript declarations
│   ├── hooks.server.ts                  # Supabase client + session on every request
│   │
│   ├── lib/
│   │   ├── components/layout/
│   │   │   └── Navbar.svelte            # Auth-aware navbar with theme toggle
│   │   │   └── Footer.svelte            # Footer
│   │   ├── stores/
│   │   │   └── theme.ts                 # Dark/light mode store
│   │   └── supabase/
│   │       ├── client.ts                # Browser Supabase client
│   │       ├── server.ts                # Server Supabase client
│   │       └── types.ts                 # Generated DB types
│   │
│   └── routes/
│       ├── +page.svelte                 # Landing page  /
│       ├── +layout.svelte               # Root layout — Navbar + theme sync
│       ├── +layout.server.ts            # Session + profile passed to all pages
│       │
│       ├── auth/                        # Login, OAuth callback, logout
│       ├── onboarding/                  # First-login profile setup
│       ├── dashboard/                   # Progress overview
│       ├── settings/                    # Edit profile + theme toggle
│       │
│       ├── tracks/
│       │   └── [slug]/
│       │       ├── modules/[moduleSlug] # Lesson page
│       │       ├── part/[partIndex]/quiz # Part assessment
│       │       └── exam/result          # Certificate generation
│       │
│       ├── verify/[certId]              # Public certificate verification
│       └── u/[username]                 # Public user profile
│
├── docs/                                # Schema SQL + seed files
├── static/                              # Favicon, OG image
├── .env
├── svelte.config.js
├── tailwind.config.js
└── vite.config.ts

Database Schema

All user tables have Row Level Security enabled. The verify page uses the service role key to read certificates publicly without exposing other user data.

Theming

SvelteSkill supports dark and light mode with zero flash on load. The theme is applied via a synchronous script in <head> before the first paint.

Colors are defined as CSS variables in app.css:

:root       { --bg: #1a1a1a; --text: #f0ede8; ... }  /* dark  */
:root.light { --bg: #f7f5f2; --text: #1a1a1a; ... }  /* light */

Use CSS variable syntax in Tailwind arbitrary values to support both modes:

<!-- Supports both dark and light automatically -->
<div class="bg-[var(--bg)] text-[var(--text)] border-[var(--border)]">

Contributing

SvelteSkill is community-driven. Every contribution — a typo fix, a better explanation, a bug report — makes the platform better for everyone learning Svelte.

Ways to contribute

Fix a curriculum mistake Found an error in a lesson or a wrong answer in a quiz? Open an issue with the curriculum label or submit a PR directly.

Improve an explanation Think a concept could be explained better? Open a discussion or PR.

Report a bug Open a bug report with steps to reproduce.

Suggest a feature Open a feature request describing what you want and why.

Add new track content Interested in contributing lessons for Track 3 or 4? Open an issue first to discuss scope, then submit a PR with the SQL inserts following the existing lesson format.

Pull request guidelines

• Use TypeScript — avoid any where possible
• Use CSS variables for colors — var(--bg) not #1a1a1a
• Add rel="external" to all <a> tags (ESLint rule)
• Add for attributes to all <label> tags
• Test the full auth → lesson → quiz → exam flow if you changed anything in those paths

Deployment

Vercel (recommended)

npm install -D @sveltejs/adapter-vercel

Update svelte.config.js:

import adapter from '@sveltejs/adapter-vercel';
export default { kit: { adapter: adapter() } };

1. Push to GitHub
2. Connect the repo to Vercel
3. Add environment variables in the Vercel dashboard
4. Deploy

After deploying — update your OAuth URLs:

• Supabase → Authentication → URL Configuration → add your production domain
• GitHub OAuth app → update Homepage URL and callback URL
• Google OAuth app → add production redirect URI

Regenerating Supabase types

After any schema change, regenerate types:

npx supabase gen types typescript --project-id YOUR_PROJECT_ID > src/lib/supabase/types.ts

Roadmap

• Svelte Fundamentals track — 12 lessons, 60 quiz Qs, 20 exam Qs
• SvelteKit track — 12 lessons, 60 quiz Qs, 20 exam Qs
• Part-based quizzes with 80% pass threshold
• Final exam with 30-minute countdown timer
• Verifiable certificates with public UUID verify page
• Sequential track unlocking
• Public user profiles
• Dark + light mode with no flash
• Svelte Advanced track
• Svelte + TypeScript track
• Per-lesson feedback integrated with GitHub Issues
• Code playground (StackBlitz embed)
• PDF certificate download
• Email notification on certificate issue

License

The platform code is licensed under the MIT License.

The curriculum content (lesson text, questions, and explanations) is licensed under CC BY-NC-SA 4.0 — free to use and share with attribution, non-commercial use only.

Acknowledgements

• Rich Harris for creating Svelte and making web development genuinely enjoyable
• The Svelte community for building something worth learning
• Supabase for making backend development accessible to everyone
• Every person who contributes to, uses, or shares SvelteSkill