Avro Academy
← All coursesCoding & software

React Foundations: Build a Job Application Tracker

Learn React from the ground up by building a job application tracker you'll actually use — components, state, forms, effects, routing and tests — and put it online.

Intermediate · 32 lessons · 8 h 20 min · Certificate on completion · With Avro Academy Team
Part of:🧭 Web Developer (JavaScript)
Sign in to enrolCreate an account

The most popular way to build web apps

React is a JavaScript library for building user interfaces. Facebook, Instagram, Airbnb, Netflix and thousands of smaller companies use it, and "React" appears in a huge number of front-end developer job ads. In this course you'll learn it properly, one idea at a time.

You'll build a Job Tracker — an app to keep track of every job you apply for:

  • A dashboard with your applications by status and the follow-ups due this week
  • A list you can search and filter, with filters saved in the web address
  • Forms to add and edit jobs, which check what you type
  • A page for every job, saved in your browser so it's there next time
  • Automated tests, and a live link on the internet

What you'll learn

  • Components, JSX and props — with just enough TypeScript
  • Lists, conditions, state and events
  • Controlled forms and validation
  • Effects: saving to localStorage, loading data with fetch, and your own custom hook
  • Pages and links with React Router
  • Sharing data with context and useReducer
  • Testing with Vitest and Testing Library, and deploying to Vercel

Before you start

You should know the basics of JavaScript (variables, functions, arrays, objects) and a little HTML and CSS — JavaScript for Beginners covers everything you need. No React experience needed. Knowing Git and GitHub helps for the final deploy step.

You'll need a laptop or desktop where you can install Node.js and VS Code (both free).

How it works

  • 8 modules, 24 lessons, about 8 hours, including building time
  • Uses current versions: React 19, Vite 8 and React Router 8
  • Starter files with a complete working app for every module — compare with yours if you get stuck
  • Every step is checked by a type-check, a production build and automated browser tests
  • A quiz after each module, a cheat sheet and a certificate

Already know React and want to build full websites? Try Next.js Foundations next.

Free forever — like every self-paced course on Avro Academy: all lessons, quizzes, downloads and your certificate. Our promise

Course outline

  1. Module 1: Meet React

    What React is, setting up Node.js, VS Code and Vite, and your first component.

    • What React isFree preview10 min
    • Set up your computer20 min
    • A tour of the project and your first component20 min
    • Module 1 quiz5 min

  2. Module 2: Components and props

    JSX rules, props and types, and lists and conditions.

    • JSX: HTML inside JavaScript15 min
    • Props and just enough TypeScript20 min
    • Lists and conditions20 min
    • Module 2 quiz5 min

  3. Module 3: State and events

    useState, calculating values from state, and lifting state up.

    • State with useState20 min
    • Calculating from state15 min
    • Lifting state up and updating lists20 min
    • Module 3 quiz5 min

  4. Module 4: Forms

    Controlled forms, validation, and adding and editing jobs.

    • Controlled forms20 min
    • Checking what people type20 min
    • Adding and editing jobs20 min
    • Module 4 quiz5 min

  5. Module 5: Effects

    useEffect, saving with localStorage in a custom hook, and loading data with fetch.

    • Effects: talking to the outside world15 min
    • Saving with localStorage: your own hook20 min
    • Loading data with fetch20 min
    • Module 5 quiz5 min

  6. Module 6: Pages with React Router

    Routes and layouts, URL parameters and navigating, and filters in the address.

    • Pages and routes with React Router25 min
    • URL parameters and navigating20 min
    • Search params: filters in the address20 min
    • Module 6 quiz5 min

  7. Module 7: Sharing state

    Prop drilling, useReducer, context, and useMemo and developer tools.

    • Prop drilling and useReducer20 min
    • Context: share data without props20 min
    • useMemo and finding mistakes15 min
    • Module 7 quiz5 min

  8. Module 8: Test and ship

    Testing with Vitest and Testing Library, building, deploying to Vercel, and next steps.

    • Testing with Vitest and Testing Library30 min
    • Build it and put it online25 min
    • Where to go next10 min
    • Module 8 and final quiz5 min