Where to Go Next

After this lesson you can

• Plan a final capstone app that meets every requirement on its list
• Choose a next step after this course, such as TypeScript, a framework or Node on the server

Key takeaways

• You can now build, test, secure and publish a working web app in plain JavaScript, with no framework.
• The final capstone is an app of your own with modules, fetch with loading, empty and error states, a checked form, localStorage, tests, a README, and a live link.
• TypeScript adds types to JavaScript, so mistakes such as text where a number belongs are caught before the code runs.
• React, Angular and Vue run the render idea you already know at a bigger scale. You change the data, and the framework redraws the page.
• Node.js runs JavaScript on a server, which is where secrets, databases and your own API live.

This is the last lesson of the course. When you started, a variable was a new word. Now you can put an app on the internet that searches 500 books as you type, without stuttering, without showing an old answer, and without letting a stranger run code on it. This lesson is for the moment you close the course and ask "now what?": it looks back at what you can do, describes the two projects that pull everything together, and helps you pick what to learn next, based on what you want to build.

What you can do now

Here's the course, as things you can do:

• Write programs that make decisions, repeat work and package it in functions, and read an error message to fix them (Module 1).
• Store and reshape real data: a playlist, a pet's profile, a high-score table, with arrays, objects, map, filter, reduce, sort and JSON (Module 2).
• Predict what code does, closures and this included, and organize a bigger program with classes, modules and your own errors, then find its bugs with the debugger (Module 3).
• Build an interactive page with no framework: change it through the DOM, respond to clicks and keys for mouse and keyboard users, check forms, and remember data with localStorage (Module 4).
• Load live data from a web API with fetch, async and await, and show loading, empty and error states (Module 5).
• Work like a professional: set a project up with npm and Vite, keep it tidy with ESLint and Prettier, test it with Vitest, keep it fast and safe, and put it online (Module 6).

That's the toolkit behind most of the small web apps people use every day. Anything you can't do yet is a next step, not a wall.

One more project: the Typing Speed Game

This module ends with its mini-capstone, the Typing Speed Game: a typing test that shows your words per minute and your accuracy as you type, keeps a high-score table, and lives online at a link you can send a friend ("beat my 62 words per minute"). It uses every part of this module:

• a Vite project you set up with npm, with ESLint and Prettier clean;
• the words-per-minute and accuracy rules written test-first with Vitest: the test, then the code that makes it pass;
• the text to type drawn with textContent, never innerHTML;
• live stats that are debounced, so they update when you pause rather than on every key;
• published with GitHub Pages.

Test-first means the first thing you write is a test like this one, which fails until the rule exists. (A typing test counts every 5 characters as one word.)

import { it, expect } from 'vitest';
import { wordsPerMinute } from './stats.js';

it('counts 5 characters as a word', () => {
  expect(wordsPerMinute(250, 60)).toBe(50);
});

The final capstone: your own app

The course ends with the final capstone: an app you design and build yourself, and the course's final assessment (there's no big final test). Pick one of these, or bring your own idea of the same size:

• Recipe Box: save recipes, scale the servings up or down, and search them.
• Habit Tracker: check in each day, count your streaks, and see your week at a glance.
• Movie Watchlist: search a movie API, keep a list of what to watch, and rate what you've seen.
• Your own idea: a game tracker, a plant-watering reminder, a budget for a trip. If it needs the list below, it fits.

Whichever you pick, it needs all of these:

1. ES modules, with the app's data kept in a class or a closure.
2. Data loaded with fetch (from a web API or a JSON file), with a loading state, an empty state and an error state.
3. An accessible form that checks what's typed, with every control usable from the keyboard.
4. Data remembered with localStorage.
5. Vitest tests for the logic, with ESLint and Prettier clean.
6. A short README that says what the app does and how it's built.
7. The app online with GitHub Pages.

Plan before you build: write the list of what your app does, and next to each line, which of the seven it covers. The README can start the same way:

# Habit Tracker

Check in each day, keep your streaks, and see your week at a glance.

Live: https://your-name.github.io/habit-tracker/

## How it's built

- `habits.js`: the habits and streaks, kept in a class. Tested in `habits.test.js`.
- `api.js`: loads the starter habits with fetch, with loading, empty and error states.
- `storage.js`: saves check-ins in localStorage.

Three ways to go next

TypeScript: labels on the boxes

When you move house, a box labeled "kitchen: glasses" tells everyone what belongs inside, and somebody notices if a shoe ends up in it. TypeScript is JavaScript with labels like that, called types. You say what a value should be (text, a number, a book with a title and a price), and TypeScript checks your code before it runs.

type Book = {
  title: string;
  author: string;
  price: number;
};

function priceTag(book: Book): string {
  return `${book.title}: ${book.price.toFixed(2)}`;
}

console.log(priceTag({ title: 'Wild Harbors', author: 'Nell Oakhart', price: '21.99' }));

The price is text, '21.99', where a number belongs. Plain JavaScript only finds out when the line runs, and stops with TypeError: book.price.toFixed is not a function. TypeScript's checker, tsc, reports it before anything runs, and VS Code underlines it as you type:

book.ts(11,71): error TS2322: Type 'string' is not assignable to type 'number'.

Most front-end jobs use TypeScript, and everything you know about JavaScript still applies: TypeScript adds the labels and nothing else.

A framework: React, Angular or Vue

In Drawing the Page from Your Data, you kept the truth in your data and wrote one render function that draws the page from it. A framework is a large set of ready-made code built around that same idea, so a big app with dozens of screens stays organized. The best known are React, Angular and Vue. In React, a piece of the page is a function that returns what it should look like:

function BookResult({ book }) {
  return (
    <li className="book">
      <strong>{book.title}</strong> by {book.author}
    </li>
  );
}

React redraws it whenever the data changes, keeps the focus where it was, and shows {book.title} as text, the way textContent does. Apps built like this, which load one page and then change what it shows, are called single-page applications. Learning a framework goes faster now, because you know what it's doing underneath.

Node.js on the server

You've already run JavaScript in Node.js for your tests and your tools. Node also runs servers: programs that answer requests from browsers. A server is where the things that can't be in front-end code live: secret API keys, a database, the checks that nobody can switch off. These few lines are a whole server that answers every request with a book, as JSON:

import { createServer } from 'node:http';

const server = createServer((request, response) => {
  response.setHeader('Content-Type', 'application/json');
  response.end(JSON.stringify({ title: 'The Copper Harbor', inStock: 3 }));
});

server.listen(3000, () => console.log('Listening at http://localhost:3000'));

Run it, open http://localhost:3000, and your browser shows {"title":"The Copper Harbor","inStock":3}. The server keeps running until you press Ctrl+C. Your bookstore's fetch could call a server like this one instead of the pretend one.

Choosing your next step

There's no wrong order. Choose by what you want to build next:

Whichever you choose, keep building: the quickest way to learn the next thing is a small project that needs it. On ask-codey.com, HTML in Depth and CSS in Depth go further into the page itself, and the course catalog lists what's there to take next.

Check yourself

2 questions to try on the lesson page.

So what

You can build, test, secure and ship a real web app. The next tool you learn will build on that foundation, and the projects you make with it are yours to show.

Key terms

• TypeScript
• Framework
• React
• Node.js
• Single-Page Application

Related

• Drawing the Page from Your Data
• Keeping Pages Safe: XSS and innerHTML
• Put Your App Online with GitHub Pages