Project 2 · Static School Site

In Project 1 you described a school website to Lovable and it appeared. The thing was real and live, but you did not own the inside of it.

In Project 2 you build the same school website — same school name, same branches, same content — but you build it yourself, line by line, on the stack the rest of the industry uses. By the end you will be able to point at every file in the project and say what it does.

The site looks similar to the one you shipped in Project 1. The difference is everything underneath.

---

Why Build the Same Thing Twice

It feels redundant. It isn't. Here's why this is the most important shift in the whole programme.

You already know what the site should be. You don't need to invent content, photos, or branch names — you settled all of that in Project 1. Every drop of your attention goes to the technical side: setting up a Next.js project, writing your first React component, configuring Tailwind, deploying to Vercel.

You see the gap between describing and building. Lovable took a paragraph and produced 600 lines of code. In Project 2 you will type those 600 lines yourself — or, more accurately, you and Claude Code will write them together. You will feel which parts are easy (laying out a section), which are tedious (typing the same heading style on three pages), and which are subtle (responsive design that actually works on a real phone).

You build the foundation for Project 3. Project 3 — the real school SaaS — is built on the same stack you set up in Project 2. The same Next.js app, the same Tailwind config, the same Vercel project. Project 3 just adds the database, auth, RLS, payments, and notifications on top. If Project 2 is solid, Project 3 is "add features." If Project 2 is shaky, Project 3 is "rebuild from scratch."

You learn what real ownership feels like. The site code lives on your GitHub account. The deploy lives on your Vercel account. The domain (if you buy one) lives on your registrar. If you stop using Sahinov tomorrow, the site keeps working. If you change the indigo accent, you change one line and every page updates. This kind of control is the entire reason real software is built this way.

---

What You Will Build

The same school site from Project 1. Same content. Polished — and now in your hands.

Recommended structure (4 routes):

1. Home — hero + 3-line about + featured branch + CTA to admissions
2. Branches — one card per branch with photo, address, phone, "get directions" link
3. Admissions — the application steps + a real contact form that sends email
4. About — longer school story, founding year, philosophy

That last one — the working contact form that actually emails the admissions inbox — is the line that Project 1 could not cross. We cross it here.

Optional stretch:

• Gallery page with a photo grid
• A /branches/[slug] dynamic route — a dedicated page per branch
• Light/dark mode toggle

---

What You Will Use

If any of these names are unfamiliar, that's normal — every one of them has a tool guide in the tools/ section. You are not memorising tools. You are building one project that happens to use them.

---

How Long This Should Take

Plan for 2 weeks working 8–10 hours a week, or about a long weekend if you push.

• 1 hr — scaffold a fresh Next.js project + connect to GitHub + first Vercel deploy
• 2 hr — set up Tailwind, design tokens, base layout, navigation, footer
• 3 hr — home page with hero, about, featured branch
• 2 hr — /branches page
• 2 hr — /admissions page
• 2 hr — contact form (frontend) and Resend edge function (backend)
• 1 hr — /about page
• 1 hr — final polish, mobile pass, deploy

If you finish in 8 hours, you are moving fast and that is fine — the site is the deliverable. If you take 20 hours, you are probably learning a lot — that's also fine.

---

What You Will Not Do in Project 2

To keep Project 2 focused, the following stay out:

• No login or accounts. Anyone visiting the site is anonymous.
• No database tables. Contact form sends an email; nothing is stored.
• No fee payment. The site mentions admissions; it doesn't collect money.
• No parent/teacher/student dashboards. Those are Project 3.
• No multi-language. English only.
• No animations beyond transition-colors and hover: states. Save Framer Motion for later projects.

Every one of these is a real feature in Project 3. Adding them in Project 2 would muddy the project's purpose: learn to build a clean static site on the real stack.

---

Ready

The next page (scaffold.mdx) walks you through creating the Next.js project from scratch. By the end of that page, your school site will have a working dev server and be deployed (empty) to Vercel.