Week 7

Front end Track

Week 7 Project: Mid-Track Project

Overview

You've spent the past six weeks building a strong foundation: semantic HTML, responsive CSS, TypeScript, React components, state management, data fetching, routing, and deployment. This week you apply all of it to a project of your own choosing.

There is no prescribed topic. Pick something you find genuinely interesting: a domain you'd enjoy spending a week in. What matters is that your project meets the technical requirements below, not what it's about.

By the end of the week you'll have a deployed, multi-page React application you built yourself, followed by a technical interview where you'll walk through your decisions with a mentor.

Choosing Your Project

Your project needs a public REST API that returns list and detail data — a list of items you can browse, and individual items you can view in detail. This naturally fits the two-page pattern the project requires.

Some ideas to get you started:

You are not limited to this list. If you have an API in mind that interests you more, use it — check first that it's free, doesn't require complex OAuth, and returns enough data to build a list and detail view.

<aside> 📌

Note

Before you start building, complete the Project Brief at the bottom of this document. This takes 20 minutes and prevents you from spending days going in the wrong direction.

</aside>

Technical Requirements

Every project must meet all of the following requirements regardless of topic. These are not optional — they exist to make sure you practice everything from weeks 1–6.

Pages and routing

• At least two pages connected with React Router
• At least one dynamic route using useParams — for example /movies/:id that loads a detail page for a specific item
• A 404 not found page that renders when no route matches
• A navigation component using NavLink with active link styling, visible on every page

Data fetching

• At least one API integration using useEffect
• All three async states handled: loading, error, and success
• AbortController cleanup on any effect that fetches data
• response.ok checked before parsing JSON

Forms

• At least one form with controlled inputs — a search field, a filter, a contact form, or similar
• At least one validation rule with an error message shown to the user

TypeScript

• TypeScript used throughout (no any)
• An interface or type defined for every piece of API data you use
• Props typed with interfaces on every component

Styling

• Tailwind v4 for all styling — no separate CSS files
• Responsive layout — usable on mobile and desktop
• Dark mode toggle using useState that applies dark: variants
• At least one custom colour token defined in @theme
• Visible hover and focus-visible states on all interactive elements

Deployment

• Project pushed to a public GitHub repository
• Deployed to Vercel at a live URL
• Any API keys stored as environment variables — not hardcoded in the source

Code quality

• Components split into a logical folder structure (pages/, components/)
• Meaningful variable and function names throughout

What You're Not Expected to Do

• Authentication or login flows
• A backend or database

Keep scope tight. A well-built two-page app is better than a half-finished five-page one.

Deliverables

By the end of the week, submit:

1. GitHub repository URL — public, with a descriptive README that includes what the project does and how to run it locally
2. Live Vercel URL — deployed and accessible
3. Completed project brief — the one you submitted at the start, updated if anything changed during the week

Project Brief Template

<aside> 📌

Complete this before you start building. Copy this template into your own note-taking application before modifying it.

</aside>

Project name:

Your name:

In one sentence, what does your app do?

The API

API you are using:

Link to the API documentation:

Does it require an API key?

• [ ] No
• [ ] Yes — I have already obtained one and confirmed it works

Paste an example API response (just the first item if it's a list):

Pages

Page 1 — path: /

What it shows:

Page 2 — path: (e.g. /movies)

What it shows:

Page 3 — path: (e.g. /movies/:id) ← this must be a dynamic route

What it shows: