# Where to Go Next

A look back at what you can now build with JavaScript, the two projects that put it all together (the Typing Speed Game and an app of your own), and how to choose your next step among TypeScript, a framework and Node.js on the server.

Journeyman · JavaScript · Web Development · Updated October 29, 2026

## 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.)

```javascript
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:

```markdown
# 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.

```typescript
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:

```text
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:

```jsx
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:

```javascript
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:

| If you want to... | Start with |
|---|---|
| Get hired for front-end work, or join a team project | TypeScript, then a framework |
| Build an app with many screens, such as a dashboard or a shop | A framework: React, Angular or Vue |
| Keep secret keys safe, save data for many users, or build your own API | Node.js on the server |
| Make your pages look and read better | HTML and CSS in more depth |

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](https://www.ask-codey.com/glossary/node-js)
- [Single-Page Application](https://www.ask-codey.com/glossary/single-page-application)

## Related

- [Drawing the Page from Your Data](https://www.ask-codey.com/lessons/javascript-rendering-from-data)
- [Keeping Pages Safe: XSS and innerHTML](https://www.ask-codey.com/lessons/javascript-security-xss-and-innerhtml)
- [Put Your App Online with GitHub Pages](https://www.ask-codey.com/lessons/javascript-shipping-github-pages)

Source: https://www.ask-codey.com/lessons/javascript-whats-next-after-this-course