Skip to main content

​
Official documentation

These are the definitive references. When you need to look something up, go here first.

​
JavaScript

MDN Web Docs — The single best JavaScript reference. Written by Mozilla, used by everyone.
  • JavaScript Guide: developer.mozilla.org/en-US/docs/Web/JavaScript/Guide
  • Array methods: developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array
  • Fetch API: developer.mozilla.org/en-US/docs/Web/API/Fetch_API
When you Google a JavaScript question, add “MDN” to your search. The MDN result is almost always the most accurate and well-explained answer. Example: “array map MDN”.

​
React

React docs — Completely rewritten in 2023 with interactive examples and modern patterns.
  • Quick Start: react.dev/learn
  • Hooks reference: react.dev/reference/react
  • Thinking in React: react.dev/learn/thinking-in-react

​
FastAPI

FastAPI docs — Excellent documentation with a tutorial-first approach.
  • Tutorial: fastapi.tiangolo.com/tutorial
  • Deployment: fastapi.tiangolo.com/deployment

​
What to learn next

You’ve learned the essentials. Here’s what to add to your toolkit, in order of usefulness:

​
1. TypeScript

TypeScript adds types to JavaScript. It catches bugs before your code runs — especially data shape mismatches between frontend and backend.
  • Why: Catch undefined errors, get autocomplete, document your code automatically
  • When: Once you’re comfortable with JavaScript (after 1-2 projects)
  • Where to start: typescriptlang.org/docs/handbook
// TypeScript catches this at development time
interface User {
  id: number;
  name: string;
  email: string;
}

function greet(user: User) {
  return `Hello, ${user.username}`; // ❌ Error: 'username' doesn't exist on type 'User'
}

​
2. React Router

Add multiple pages to your React app. Right now you have one page — React Router gives you /users, /users/3, /settings, etc.
  • Why: Every real app needs multiple pages/routes
  • When: Your next project
  • Where to start: reactrouter.com/start/framework/installation

​
3. TanStack Query (React Query)

Replaces your manual useState + useEffect + loading/error pattern for data fetching with a single hook.
  • Why: Automatic caching, background refetching, loading/error states handled for you
  • When: When you’re tired of writing the loading/error/data pattern manually
  • Where to start: tanstack.com/query
// Instead of useState + useEffect + loading + error...
const { data: users, isLoading, error } = useQuery({
  queryKey: ['users'],
  queryFn: getUsers,
});

​
4. Tailwind CSS

Utility-first CSS framework. Instead of writing CSS files, you add classes directly to your JSX.
  • Why: Build UIs faster without switching between CSS and JSX files
  • When: Anytime — it’s just CSS
  • Where to start: tailwindcss.com/docs
// No CSS files needed
<button className="bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600">
  Click me
</button>

​
5. Testing

Learn to test your components and API calls. Start with Vitest (test runner) and React Testing Library.
  • Why: Confidence that your code works, catch regressions
  • When: Once you have a project worth maintaining
  • Where to start: vitest.dev and testing-library.com/docs/react-testing-library

​
Practice platforms

Build things. Reading tutorials only gets you 20% of the way — building gets you the other 80%.
PlatformWhat it’s good for
Build your own projectsBest way to learn — pick an idea and build it
Frontend MentorReal-world design challenges to build
JavaScript3030 small vanilla JS projects by Wes Bos
freeCodeCampStructured JavaScript curriculum (free)
ExercismJavaScript exercises with mentoring
The best project to build is one you’ll actually use. A personal budget tracker, a recipe organizer, a reading list app — something you care about. Motivation matters more than complexity.

​
Project ideas

Start small, then grow:
  1. Todo app — The classic. CRUD with localStorage, then upgrade to a FastAPI backend.
  2. Weather dashboard — Fetch from a public API, display with React.
  3. Personal bookmarks — Save links with tags, search and filter them.
  4. Expense tracker — Forms, calculations, charts. Full-stack with FastAPI.
  5. Blog platform — Markdown posts, categories, admin panel.
Each project reinforces different skills from this course. Pick one and build it this week.

Deployment basics

Get your full-stack application live on the internet