DEV Community

Aisalkyn Aidarova
Aisalkyn Aidarova

Posted on

project #4: I Built a Full-Stack School Website in 1 Day with Claude AI — Here's the Complete Guide

Tags:

devops, webdev, tutorial, beginners
Enter fullscreen mode Exit fullscreen mode

Cover image: Take a screenshot of your jump2techdevops.com homepage

Article body — paste this:

# I Built a Full-Stack School Website in 1 Day with Claude AI

No coding experience. No developer. $9.77 total cost.

Here is exactly what I built and how you can do the same for your business.

## What I Built

Live at: **jump2techdevops.com**

- Homepage with countdown timer, registration form, FAQ in English and Russian
- Student login and registration with a real database
- 13 course modules with Udemy-style lecture pages
- Admin dashboard to manage students and add lectures without code
- Automated tests with Playwright
- Deployed on Cloudflare Pages with custom domain

## The Tech Stack

| Tool | Purpose | Cost |
|------|---------|------|
| Next.js 15 | Website framework | Free |
| TypeScript | Type-safe JavaScript | Free |
| Tailwind CSS | Styling | Free |
| Supabase | Database + Auth | Free |
| Cloudflare Pages | Hosting | Free |
| Cloudflare Registrar | Domain | $9.77/yr |
| Claude AI + Code | Wrote all the code | Free |
| Playwright | Automated testing | Free |

**Total cost: $9.77**

---

## Phase 1 — Create the Project
Enter fullscreen mode Exit fullscreen mode


bash
cd ~
mkdir projects && cd projects
npx create-next-app@latest my-school-website
cd my-school-website
npm run dev


Open http://localhost:3000 — you see the default Next.js page.
This is running ONLY on your Mac. No one else can see it yet.

Then open Claude Code:
Enter fullscreen mode Exit fullscreen mode


bash
claude


Claude Code is your AI engineer. It reads your files and writes 
code directly on your computer.

---

## Phase 2 — Build the Homepage with AI

In the Claude Code prompt, describe what you want:

> Build a professional DevOps school homepage with:
> hero section, countdown timer to June 1 2026, 
> stats bar, 13 module cards, registration form,
> student testimonials, FAQ in English and Russian,
> sticky bottom bar with $700/month price.
> Primary color: #185FA5

Press Enter. Claude writes all the files.

**This is prompt engineering** — describing exactly what you want.
The more detail you give, the better the result.

---

## Phase 3 — Set Up the Database

Create a free account at supabase.com.

Create a new project, then run this SQL to create your tables:
Enter fullscreen mode Exit fullscreen mode


sql
-- Store student registrations
CREATE TABLE IF NOT EXISTS profiles (
id UUID PRIMARY KEY,
full_name TEXT,
email TEXT,
phone TEXT,
experience_level TEXT,
created_at TIMESTAMPTZ DEFAULT NOW()
);
ALTER TABLE profiles ENABLE ROW LEVEL SECURITY;
CREATE POLICY 'insert' ON profiles FOR INSERT WITH CHECK (true);
CREATE POLICY 'select' ON profiles FOR SELECT USING (true);

-- Store lectures added through admin panel

CREATE TABLE IF NOT EXISTS lectures (
id UUID DEFAULT gen_random_uuid() PRIMARY KEY,
module_slug TEXT NOT NULL,
title TEXT NOT NULL,
content TEXT,
type TEXT DEFAULT 'reading',
order_index INTEGER DEFAULT 0,
created_at TIMESTAMPTZ DEFAULT NOW()
);
ALTER TABLE lectures ENABLE ROW LEVEL SECURITY;
CREATE POLICY 'read' ON lectures FOR SELECT USING (true);
CREATE POLICY 'admin' ON lectures FOR ALL USING (true);


Connect to your website:
Enter fullscreen mode Exit fullscreen mode


bash
npm install @supabase/supabase-js


Create `src/lib/supabase.ts`:
Enter fullscreen mode Exit fullscreen mode


typescript
import { createClient } from '@supabase/supabase-js'

export const supabase = createClient(
process.env.NEXT_PUBLIC_SUPABASE_URL!,
process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!
)


Create `.env.local`:
Enter fullscreen mode Exit fullscreen mode

NEXT_PUBLIC_SUPABASE_URL=https://your-project.supabase.co
NEXT_PUBLIC_SUPABASE_ANON_KEY=eyJhbGci...


> ⚠️ `.env.local` is in `.gitignore` — it never goes to GitHub.
> Never hardcode secrets in your code.

---

## Phase 4 — Student Login & Registration

Tell Claude Code:

> Create /register page with: Full Name, Email, Password, 
> Phone, Experience Level dropdown. Call supabase.auth.signUp()
> then insert into profiles table.
>
> Create /login page with email and password.
> Call supabase.auth.signInWithPassword().
> On success redirect to /modules.
>
> Protect /modules — redirect to /login if no session.

---

## Phase 5 — Admin Dashboard

Tell Claude Code:

> Create /admin page with password protection.
> After login show two tabs:
> 1. Students: table from profiles table
> 2. Lectures: add/edit/delete lectures per module

Now you can see every registered student and manage 
all course content from your browser — no code needed.

---

## Phase 6 — Test with Playwright
Enter fullscreen mode Exit fullscreen mode


bash
npm install --save-dev @playwright/test
npx playwright install chromium


Create `tests/site.spec.ts`:
Enter fullscreen mode Exit fullscreen mode


typescript
import { test, expect } from '@playwright/test';

test('homepage loads', async ({ page }) => {
await page.goto('http://localhost:3000');
await expect(page.locator('h1')).toBeVisible();
});

test('modules redirect to login', async ({ page }) => {
await page.goto('http://localhost:3000/modules');
await expect(page).toHaveURL(/login/);
});
Enter fullscreen mode Exit fullscreen mode


bash
npx playwright test


All green = safe to deploy.

---

## Phase 7 — Deploy to Cloudflare Pages

Add static export to `next.config.ts`:
Enter fullscreen mode Exit fullscreen mode


typescript
const nextConfig = {
output: 'export',
trailingSlash: true,
images: { unoptimized: true }
};
export default nextConfig;


Build and deploy:
Enter fullscreen mode Exit fullscreen mode


bash
npm run build
npm install -g wrangler
npx wrangler login
npx wrangler pages deploy out --project-name my-school


Your site is live at `https://my-school.pages.dev`

Add Supabase keys to Cloudflare:
Enter fullscreen mode Exit fullscreen mode


bash
npx wrangler pages secret put NEXT_PUBLIC_SUPABASE_URL
npx wrangler pages secret put NEXT_PUBLIC_SUPABASE_ANON_KEY


Redeploy:
Enter fullscreen mode Exit fullscreen mode


bash
npx wrangler pages deploy out --project-name my-school


---

## Phase 8 — Connect Custom Domain

Buy your domain at cloudflare.com/registrar (~$9.77/year).

Then: Workers & Pages → your project → Custom domains
→ Set up custom domain → type your domain → Activate.

Since domain and hosting are both on Cloudflare — 
connection is instant. No DNS propagation wait.

---

## The Daily Workflow

Every time you change something:
Enter fullscreen mode Exit fullscreen mode


bash

1. Test locally

npm run dev

2. Run tests

npx playwright test

3. Build

npm run build

4. Deploy

npx wrangler pages deploy out --project-name my-school

5. Save to GitHub

git add .
git commit -m "describe what changed"
git push


---

## What This Taught Me

Building this website taught me more DevOps than any course:

- **Next.js** — how modern web frameworks work
- **Supabase** — database design, SQL, Row Level Security
- **Environment variables** — keeping secrets safe
- **Static export** — how websites are built for production
- **Cloudflare Pages** — CDN, edge hosting, custom domains
- **Playwright** — automated testing before every deploy
- **Git workflow** — committing, pushing, version control
- **Wrangler CLI** — command-line deployment

Every tool here is used by real companies.
Netflix, Airbnb, and Google engineers use these same tools.

---

## Resources

- Live site: https://jump2techdevops.com
- GitHub: https://github.com/jumptotechschooldevops/jumptotech-website
- Next.js docs: https://nextjs.org/docs
- Supabase docs: https://supabase.com/docs
- Cloudflare Pages: https://pages.cloudflare.com

**Batch 4 starts June 1, 2026 — Mon–Fri 6PM–9PM — $700/month**

If you want to learn DevOps properly — Docker, Kubernetes, 
AWS, Terraform, CI/CD, and more — come join us.

*Questions? Drop them in the comments below.*
Enter fullscreen mode Exit fullscreen mode

Top comments (0)