Frontend Engineering track

Level

Frontend Level 3: Pro Frontend Engineer

From building apps to engineering products: Next.js in production, architecture, performance, and leading AI agents.

Duration
8 weeks
Live hours
48
Schedule
3 live sessions a week (2 hours each) + ~6–8 hours of practice

Who it's for

Level 2 graduates or junior developers.

Before you join

Level 2 or a placement test (React, TypeScript, tests).

What you'll be able to do

  • Ship and maintain production Next.js apps
  • Make and defend architecture decisions
  • Pass mid-level frontend interviews, including system design
  • Lead AI agents instead of being replaced by them

Week by week

  1. 1Week 1Next.js & rendering
    • App Router
    • CSR / SSR / SSG / ISR
    • Server vs Client Components
    • Metadata & SEO
    Engineering focus
    Pick a rendering strategy per page and justify it.
    Task
    Rebuild a Level 2 app in Next.js
  2. 2Week 2The data layer
    • Server Actions
    • Route handlers
    • Prisma / Supabase
    • Caching & revalidation
    Engineering focus
    Draw the data flow before you build it.
    Task
    Full-stack CRUD feature end to end
  3. 3Week 3Auth & security
    • Sessions
    • Middleware
    • Roles
    • XSS & CSRF
    • Secrets
    • Zod validation
    Engineering focus
    Threat thinking: how would someone break this?
    Task
    Role-based admin area + security checklist
  4. 4Week 4Performance
    • Core Web Vitals
    • Bundle analysis
    • Code splitting
    • Image & font optimization
    • Memoization
    Engineering focus
    Measure first, then optimize.
    Task
    Performance audit with before/after numbers
  5. 5Week 5Frontend architecture
    • Feature-based structure
    • Design systems
    • Monorepos intro
    • State at scale
    • API contracts
    Engineering focus
    Architecture decision records; design for change.
    Task
    Refactor a messy codebase with an ADR
  6. 6Week 6Quality at scale
    • Playwright E2E
    • GitHub Actions CI/CD
    • Preview deploys
    • Sentry
    • Accessibility audit
    Engineering focus
    Automate what humans forget.
    Task
    CI pipeline that blocks failing PRs
  7. 7Week 7Frontend system design
    • Designing a feed, chat or dashboard
    • i18n & RTL (Arabic)
    • Real-time basics
    Engineering focus
    Requirements → components → data → trade-offs.
    Task
    Mock system design interview + design doc
  8. 8Week 8AI-native engineering
    • Specs for AI agents
    • Reviewing agent PRs
    • AI features in the UI
    • Streaming chat
    Engineering focus
    You write the specs, AI implements, you own quality.
    Task
    Final project + technical defense

Final project

A production-grade Next.js product (SaaS dashboard, marketplace or AI-powered tool) with auth, database, CI, E2E tests, monitoring, Lighthouse 90+, Arabic/English, a design doc and ADRs — defended in a 20-minute technical review.

Tools you'll use

  • Next.js (App Router)
  • Server Components & Actions
  • Prisma / Supabase
  • Zod
  • Playwright
  • GitHub Actions
  • Sentry
  • Lighthouse
  • AI coding agents

Certificate

Certificate of completion — Frontend Level 3

Snjab issues certificates of completion with a verification link and the projects you built. They are not academic or government-accredited degrees.

Apply now