Build the Branches Page

Your first real page built from data, not prose. The pattern you'll repeat on every page from now on.

The /branches page is the simplest page you can build that demonstrates the full React + Tailwind + Next.js pattern. By the end of this page you'll have:

A working /branches route
A reusable BranchCard component
A page that renders three branches from your BRANCHES constant

When a fourth branch opens, you add one entry to the array and everything updates.

1. Create the Route

Inside src/app/, create a new folder called branches. Inside it, create page.tsx.

src/app/
├── branches/
│   └── page.tsx       ← create this
├── favicon.ico
├── globals.css
├── layout.tsx
└── page.tsx

Open src/app/branches/page.tsx and start with the simplest possible version:

export default function BranchesPage() {
  return (
    <main>
      <h1>Our Branches</h1>
    </main>
  )
}

Save. Visit http://localhost:3000/branches. You see "Our Branches" — unstyled, plain.

That's the smallest possible thing that proves the route works. Now we make it real.

2. Add the Data Import

import { BRANCHES, SCHOOL } from '@/lib/constants'
 
export default function BranchesPage() {
  return (
    <main className="max-w-6xl mx-auto px-4 py-16">
      <div className="text-center mb-12">
        <p className="text-sm font-semibold uppercase tracking-widest text-indigo mb-3">
          {SCHOOL.name}
        </p>
        <h1 className="font-display text-5xl md:text-6xl font-bold tracking-tight text-dark-base">
          Our Branches
        </h1>
        <p className="text-lg text-gray-600 mt-4 max-w-2xl mx-auto">
          Three campuses across {SCHOOL.city}, each offering the same {SCHOOL.type} curriculum.
        </p>
      </div>
 
      <div className="grid md:grid-cols-3 gap-6">
        {BRANCHES.map(branch => (
          <article key={branch.slug} className="bg-white border border-gray-200 rounded-2xl overflow-hidden hover:shadow-lg transition-shadow">
            <div className="aspect-[16/10] bg-gray-100">
              <img src={branch.image} alt={`${branch.name} campus`} className="w-full h-full object-cover" />
            </div>
            <div className="p-6">
              <h2 className="font-semibold text-xl text-dark-base mb-2">{branch.name}</h2>
              <p className="text-sm text-gray-500 mb-4">{branch.classes}</p>
              <p className="text-sm text-gray-700 leading-relaxed mb-1">{branch.address}</p>
              <p className="text-sm text-indigo font-medium">
                <a href={`tel:${branch.phone.replace(/\s/g, '')}`}>{branch.phone}</a>
              </p>
            </div>
          </article>
        ))}
      </div>
    </main>
  )
}

Save. Refresh /branches. You see three branch cards in a row, each showing the data you put in constants.ts.

3. Take a Moment to Notice

Look at what just happened.

You did not type "Andheri", "Powai", or "Thane" anywhere in this file. The names come from the constant.
You did not type any phone numbers. They come from the constant.
If you add a 4th branch — Vashi — to BRANCHES, this page immediately shows a 4-column grid without you touching branches/page.tsx.

Try it now. Open src/lib/constants.ts. Add:

  {
    slug: 'vashi',
    name: 'Vashi',
    address: 'Sector 17, Vashi, Navi Mumbai 400703',
    phone: '+91 22 5500 3456',
    email: 'vashi@aurora-school.in',
    classes: 'Nursery to Grade 10',
    image: '/branches/vashi.jpg',
  },

Save. Look at /branches. Four cards now. You didn't touch the page file.

This is the single biggest leap from Project 1. Data has one source. Every place that uses it updates automatically.

(Remove the Vashi entry if you don't actually want it. We added it just to feel the effect.)

4. Extract a `BranchCard` Component

The cards work but the page is getting long. Let's extract the card into its own reusable component — because we'll also use it on the home page.

Create src/components/BranchCard.tsx:

import type { ReactNode } from 'react'
 
interface Branch {
  slug: string
  name: string
  address: string
  phone: string
  email?: string
  classes: string
  image: string
}
 
interface BranchCardProps {
  branch: Branch
  children?: ReactNode
}
 
export function BranchCard({ branch, children }: BranchCardProps) {
  return (
    <article className="bg-white border border-gray-200 rounded-2xl overflow-hidden hover:shadow-lg transition-shadow">
      <div className="aspect-[16/10] bg-gray-100">
        <img
          src={branch.image}
          alt={`${branch.name} campus`}
          className="w-full h-full object-cover"
        />
      </div>
      <div className="p-6">
        <h2 className="font-semibold text-xl text-dark-base mb-2">{branch.name}</h2>
        <p className="text-sm text-gray-500 mb-4">{branch.classes}</p>
        <p className="text-sm text-gray-700 leading-relaxed mb-1">{branch.address}</p>
        <p className="text-sm text-indigo font-medium">
          <a href={`tel:${branch.phone.replace(/\s/g, '')}`}>{branch.phone}</a>
        </p>
        {children}
      </div>
    </article>
  )
}

A few things to notice in the component file:

Props interface is named BranchCardProps. Convention: [ComponentName]Props.
Branch interface is local to this file for now. Later if more files need it, you'd move it to src/types/.
children is optional. It lets us pass extra content into the card on different pages (e.g. a "Get Directions" link on the home page that isn't on the branches page).
No 'use client' directive. This is a Server Component by default — Next.js renders it on the server, sends just HTML. Faster, simpler, all you need for static cards.

Now simplify branches/page.tsx:

import { BRANCHES, SCHOOL } from '@/lib/constants'
import { BranchCard } from '@/components/BranchCard'
 
export default function BranchesPage() {
  return (
    <main className="max-w-6xl mx-auto px-4 py-16">
      <div className="text-center mb-12">
        <p className="text-sm font-semibold uppercase tracking-widest text-indigo mb-3">
          {SCHOOL.name}
        </p>
        <h1 className="font-display text-5xl md:text-6xl font-bold tracking-tight text-dark-base">
          Our Branches
        </h1>
        <p className="text-lg text-gray-600 mt-4 max-w-2xl mx-auto">
          Three campuses across {SCHOOL.city}, each offering the same {SCHOOL.type} curriculum.
        </p>
      </div>
 
      <div className="grid md:grid-cols-3 gap-6">
        {BRANCHES.map(branch => (
          <BranchCard key={branch.slug} branch={branch} />
        ))}
      </div>
    </main>
  )
}

The page file is now 20 lines instead of 50. The styling lives in the component. The data lives in the constant. The page is just composition.

5. Add Page Metadata

Right above export default function BranchesPage, add:

import type { Metadata } from 'next'
 
export const metadata: Metadata = {
  title: `Branches — ${SCHOOL.name}`,
  description: `All ${BRANCHES.length} ${SCHOOL.name} campuses across ${SCHOOL.city}. Addresses, phone numbers, and the classes each branch offers.`,
}

This sets the browser tab title and the description that Google shows in search results. Every page should have this.

6. Commit and Push

git add .
git commit -m "branches page with BranchCard component"
git push

Wait 90s. Check https://aurora-school.vercel.app/branches. The branches page is now live on the public internet, generated from your data.

7. What You Practised

Look back at what you just did:

Created a new route by adding a folder + page.tsx.
Imported data from a constants module.
Used React's .map() to render a list.
Extracted a reusable component with a typed Props interface.
Used Tailwind classes for layout, typography, spacing.
Added Next.js page metadata for SEO.
Committed and pushed — live in 90 seconds.

That pattern repeats on every page you build from now on. The home page is the same pattern with different sections. The admissions page is the same pattern with a form added. The about page is the same pattern with mostly text.

The first page is the hardest. Each subsequent page takes half the time of the previous one because the mental model is the same.

Next: Admissions page

Skip ahead: Contact form

The /branches page is the simplest page you can build that demonstrates the full React + Tailwind + Next.js pattern. By the end of this page you'll have:

A working /branches route
A reusable BranchCard component
A page that renders three branches from your BRANCHES constant

When a fourth branch opens, you add one entry to the array and everything updates.

1. Create the Route

Inside src/app/, create a new folder called branches. Inside it, create page.tsx.

src/app/
├── branches/
│   └── page.tsx       ← create this
├── favicon.ico
├── globals.css
├── layout.tsx
└── page.tsx

Open src/app/branches/page.tsx and start with the simplest possible version:

export default function BranchesPage() {
  return (
    <main>
      <h1>Our Branches</h1>
    </main>
  )
}

Save. Visit http://localhost:3000/branches. You see "Our Branches" — unstyled, plain.

That's the smallest possible thing that proves the route works. Now we make it real.

2. Add the Data Import

import { BRANCHES, SCHOOL } from '@/lib/constants'
 
export default function BranchesPage() {
  return (
    <main className="max-w-6xl mx-auto px-4 py-16">
      <div className="text-center mb-12">
        <p className="text-sm font-semibold uppercase tracking-widest text-indigo mb-3">
          {SCHOOL.name}
        </p>
        <h1 className="font-display text-5xl md:text-6xl font-bold tracking-tight text-dark-base">
          Our Branches
        </h1>
        <p className="text-lg text-gray-600 mt-4 max-w-2xl mx-auto">
          Three campuses across {SCHOOL.city}, each offering the same {SCHOOL.type} curriculum.
        </p>
      </div>
 
      <div className="grid md:grid-cols-3 gap-6">
        {BRANCHES.map(branch => (
          <article key={branch.slug} className="bg-white border border-gray-200 rounded-2xl overflow-hidden hover:shadow-lg transition-shadow">
            <div className="aspect-[16/10] bg-gray-100">
              <img src={branch.image} alt={`${branch.name} campus`} className="w-full h-full object-cover" />
            </div>
            <div className="p-6">
              <h2 className="font-semibold text-xl text-dark-base mb-2">{branch.name}</h2>
              <p className="text-sm text-gray-500 mb-4">{branch.classes}</p>
              <p className="text-sm text-gray-700 leading-relaxed mb-1">{branch.address}</p>
              <p className="text-sm text-indigo font-medium">
                <a href={`tel:${branch.phone.replace(/\s/g, '')}`}>{branch.phone}</a>
              </p>
            </div>
          </article>
        ))}
      </div>
    </main>
  )
}

Save. Refresh /branches. You see three branch cards in a row, each showing the data you put in constants.ts.

3. Take a Moment to Notice

Look at what just happened.

You did not type "Andheri", "Powai", or "Thane" anywhere in this file. The names come from the constant.
You did not type any phone numbers. They come from the constant.
If you add a 4th branch — Vashi — to BRANCHES, this page immediately shows a 4-column grid without you touching branches/page.tsx.

Try it now. Open src/lib/constants.ts. Add:

  {
    slug: 'vashi',
    name: 'Vashi',
    address: 'Sector 17, Vashi, Navi Mumbai 400703',
    phone: '+91 22 5500 3456',
    email: 'vashi@aurora-school.in',
    classes: 'Nursery to Grade 10',
    image: '/branches/vashi.jpg',
  },

Save. Look at /branches. Four cards now. You didn't touch the page file.

This is the single biggest leap from Project 1. Data has one source. Every place that uses it updates automatically.

(Remove the Vashi entry if you don't actually want it. We added it just to feel the effect.)

4. Extract a `BranchCard` Component

The cards work but the page is getting long. Let's extract the card into its own reusable component — because we'll also use it on the home page.

Create src/components/BranchCard.tsx:

import type { ReactNode } from 'react'
 
interface Branch {
  slug: string
  name: string
  address: string
  phone: string
  email?: string
  classes: string
  image: string
}
 
interface BranchCardProps {
  branch: Branch
  children?: ReactNode
}
 
export function BranchCard({ branch, children }: BranchCardProps) {
  return (
    <article className="bg-white border border-gray-200 rounded-2xl overflow-hidden hover:shadow-lg transition-shadow">
      <div className="aspect-[16/10] bg-gray-100">
        <img
          src={branch.image}
          alt={`${branch.name} campus`}
          className="w-full h-full object-cover"
        />
      </div>
      <div className="p-6">
        <h2 className="font-semibold text-xl text-dark-base mb-2">{branch.name}</h2>
        <p className="text-sm text-gray-500 mb-4">{branch.classes}</p>
        <p className="text-sm text-gray-700 leading-relaxed mb-1">{branch.address}</p>
        <p className="text-sm text-indigo font-medium">
          <a href={`tel:${branch.phone.replace(/\s/g, '')}`}>{branch.phone}</a>
        </p>
        {children}
      </div>
    </article>
  )
}

A few things to notice in the component file:

Props interface is named BranchCardProps. Convention: [ComponentName]Props.
Branch interface is local to this file for now. Later if more files need it, you'd move it to src/types/.
children is optional. It lets us pass extra content into the card on different pages (e.g. a "Get Directions" link on the home page that isn't on the branches page).
No 'use client' directive. This is a Server Component by default — Next.js renders it on the server, sends just HTML. Faster, simpler, all you need for static cards.

Now simplify branches/page.tsx:

import { BRANCHES, SCHOOL } from '@/lib/constants'
import { BranchCard } from '@/components/BranchCard'
 
export default function BranchesPage() {
  return (
    <main className="max-w-6xl mx-auto px-4 py-16">
      <div className="text-center mb-12">
        <p className="text-sm font-semibold uppercase tracking-widest text-indigo mb-3">
          {SCHOOL.name}
        </p>
        <h1 className="font-display text-5xl md:text-6xl font-bold tracking-tight text-dark-base">
          Our Branches
        </h1>
        <p className="text-lg text-gray-600 mt-4 max-w-2xl mx-auto">
          Three campuses across {SCHOOL.city}, each offering the same {SCHOOL.type} curriculum.
        </p>
      </div>
 
      <div className="grid md:grid-cols-3 gap-6">
        {BRANCHES.map(branch => (
          <BranchCard key={branch.slug} branch={branch} />
        ))}
      </div>
    </main>
  )
}

The page file is now 20 lines instead of 50. The styling lives in the component. The data lives in the constant. The page is just composition.

5. Add Page Metadata

Right above export default function BranchesPage, add:

import type { Metadata } from 'next'
 
export const metadata: Metadata = {
  title: `Branches — ${SCHOOL.name}`,
  description: `All ${BRANCHES.length} ${SCHOOL.name} campuses across ${SCHOOL.city}. Addresses, phone numbers, and the classes each branch offers.`,
}

This sets the browser tab title and the description that Google shows in search results. Every page should have this.

6. Commit and Push

git add .
git commit -m "branches page with BranchCard component"
git push

Wait 90s. Check https://aurora-school.vercel.app/branches. The branches page is now live on the public internet, generated from your data.

7. What You Practised

Look back at what you just did:

Created a new route by adding a folder + page.tsx.
Imported data from a constants module.
Used React's .map() to render a list.
Extracted a reusable component with a typed Props interface.
Used Tailwind classes for layout, typography, spacing.
Added Next.js page metadata for SEO.
Committed and pushed — live in 90 seconds.

The first page is the hardest. Each subsequent page takes half the time of the previous one because the mental model is the same.

Build the Branches Page

1. Create the Route

2. Add the Data Import

3. Take a Moment to Notice

4. Extract a `BranchCard` Component

5. Add Page Metadata

6. Commit and Push

7. What You Practised

Next: Admissions page

Skip ahead: Contact form

On this page

Build the Branches Page

1. Create the Route

2. Add the Data Import

3. Take a Moment to Notice

4. Extract a `BranchCard` Component

5. Add Page Metadata

6. Commit and Push

7. What You Practised

Next: Admissions page

Skip ahead: Contact form

On this page