Week 6 Overview

This week builds on the React and TypeScript foundation you've developed over the past three weeks. You know how to build components, manage state, handle forms, and write type-safe code. What's been missing is the ability to connect your app to the outside world and give it real structure. This week fills both gaps: useEffect lets your components fetch live data from APIs and respond to it, while Next.js gives your project a production-grade foundation: routing, a build system, and a clear path to deployment.

You'll start by mastering useEffect for data fetching, combining it with the TypeScript and state skills you already have to build components that fetch from REST APIs and handle loading, error, and success states cleanly. From there, you'll use the browser's Network tab to see exactly what's happening when your app talks to a server: a debugging skill that will serve you every day as a frontend developer. Then you'll move into Next.js: how it organizes a project, how file-based routing works, and how to navigate between pages. You'll also get hands-on with Tailwind CSS v4, understanding how it relates to the native CSS you know from week 2, and why it's become a dominant choice in professional frontend teams.

By the end of this week, you'll have built and deployed a real Next.js application: not running locally, but live on the internet, styled with Tailwind, fetching data from an API, with multiple pages you can navigate between. That's a meaningful milestone.

Learning Goals

Use useEffect to fetch data from a REST API and correctly manage the dependency array and cleanup function
Implement loading, error, and success states, typed with TypeScript, to give users clear feedback during async operations
Use the browser's Network tab to inspect API requests, responses, status codes, and timing
Build a multi-page Next.js application using file-based routing and the Link component
Style a Next.js project with Tailwind CSS v4 utility classes and deploy it to Vercel as a live, public URL

The HackYourFuture curriculum is licensed under CC BY-NC-SA 4.0

CC BY-NC-SA 4.0 Icons

*https://hackyourfuture.net/*

Found a mistake or have a suggestion? Let us know in the feedback form.