Frontend Engineering track

Level

Frontend Level 2: React Engineering

Build typed, tested React apps — with AI as your pair programmer and you as the designer.

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 1 graduates or self-taught developers with JavaScript basics.

Before you join

Level 1 or a placement test (JS, DOM, fetch, Git).

What you'll be able to do

  • Design a component architecture
  • Choose the right state approach
  • Write typed and tested React
  • Use AI to build faster while catching its mistakes

Week by week

  1. 1Week 1Thinking in components
    • Modern JS for React
    • JSX
    • Components & props
    • Vite setup
    Engineering focus
    Draw the component tree before coding.
    Task
    Static product page split into components
  2. 2Week 2State & forms
    • useState
    • Events
    • Conditional & list rendering
    • Controlled inputs
    • Validation
    Engineering focus
    Where should this state live?
    Task
    Multi-step signup form with validation
  3. 3Week 3TypeScript for React
    • Types & interfaces
    • Typing props
    • Generics basics
    • Union types
    Engineering focus
    Types as contracts and documentation.
    Task
    Convert the week 2 app to TypeScript
  4. 4Week 4Data fetching & custom hooks
    • useEffect
    • Loading & error states
    • Custom hooks
    • TanStack Query
    Engineering focus
    Separate UI from data logic.
    Task
    Movie or job search app with custom hooks
  5. 5Week 5Routing & UI at scale
    • React Router
    • Layouts
    • Protected routes
    • Tailwind
    • Design tokens
    • UI kit
    Engineering focus
    Consistency: build a small design system first.
    Task
    Multi-page dashboard with a shared UI kit
  6. 6Week 6Global state & auth
    • Context
    • Zustand
    • Auth flow
    • Supabase
    Engineering focus
    Trade-offs: local vs server vs global state.
    Task
    Add auth and cart or favorites
  7. 7Week 7Testing & debugging
    • Vitest
    • React Testing Library
    • Testing AI code
    • React DevTools
    • Profiler
    Engineering focus
    Verify, don't trust: check AI tests test the right thing.
    Task
    Test suite for the dashboard
  8. 8Week 8Ship & review
    • Folder structure
    • Code review culture
    • Deployment
    Engineering focus
    Review a classmate's PR with a checklist.
    Task
    Final project + demo day

Final project

A full React + TypeScript app against a real API or Supabase (booking system, e-commerce front, task manager) with auth, routing, server state, validated forms, tests, deployment and a reviewed PR.

Tools you'll use

  • Vite
  • React
  • TypeScript
  • Tailwind CSS
  • React Router
  • TanStack Query
  • Zustand
  • Vitest
  • React Testing Library
  • AI coding assistant

Certificate

Certificate of completion — Frontend Level 2

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

Apply now