Tour the Starter Project

Download the starter project from GitHub

Unzip it and open it in your editor. Here’s what’s inside:

text

contact-book-starter/
├── app/
│   ├── layout.tsx           Shared nav shell (Home / Favorites / Groups / Settings)
│   ├── globals.css          The complete design system — already done
│   ├── page.tsx              Home (placeholder)
│   ├── favorites/page.tsx    Favorites (placeholder)
│   ├── groups/page.tsx        Groups (placeholder)
│   ├── groups/[groupId]/page.tsx
│   ├── contacts/new/page.tsx
│   ├── contacts/[id]/page.tsx
│   ├── contacts/[id]/edit/page.tsx
│   ├── settings/page.tsx
│   └── api/export/route.ts    Returns 501 for now
├── db/
│   ├── schema.sql             Just the `contacts` table so far
│   └── init.js                 Applies schema.sql to your database
├── package.json
└── .env.example

Notice what’s not here: no lib/ folder, no components/ folder, no
Server Actions anywhere. Every page in app/ currently renders a styled
empty state with a note like “Coming in Module 4.” That’s intentional —
you’ll build the data layer and the components that fill these pages in as
you go.

Open app/page.tsx to see the pattern every placeholder page follows:

tsx

export default function HomePage() {
  return (
    <>
      <div className="page-heading">
        <h1>All Contacts</h1>
      </div>
      <div className="empty-state">
        <h2>Coming in Module 2</h2>
        <p>This page will list every contact, grouped alphabetically, once the data layer is built.</p>
      </div>
    </>
  );
}

The page-heading and empty-state classes are already defined in
app/globals.css — you’ll reuse both throughout the course.

Checkpoint

You should be able to name every route in the app and roughly what it’ll
eventually do, just from reading app/’s folder structure.