Courses / Advanced / Section 4
Level 2 · Advanced
Backend: leads, data, notifications
A form submission on the live site is validated, protected from spam, stored in a database and announced to the owner by email and Telegram. An admin login exists for the CRM built in section 5.
- 7lessons
- 5.9 hof lessons
- 2.8 hhomework
- 6checkpoints
Milestone
The site captures and stores leads and notifies the owner
Lessons
- 4.1
How the backend works
40 min + 20 homeThe student can follow a form submission from the browser to the database and back.
What the lesson covers
- Prerequisites
- Checkpoint
lesson-3.9. - Covers
- Client and server: what runs where and why that matters for security.
- Requests and responses; reading them in the browser's network tab.
- What an API endpoint is; what a database is.
- Secrets and environment variables: why keys never go into the code or the chat.
- Do along
- Have Claude add a tiny test endpoint that returns the server time, then call it from the browser and inspect the request.
- Done when
- The student can point to the request, the response and the status code in the network tab.
- Homework
- Read three requests on the student's own live site in the Network tab, sort the pieces of their lead path into browser and server, and write the rule for keys in their own words.
What the lesson covers
- Prerequisites
- Checkpoint
lesson-3.9and lesson 4.1; the Supabase account from 0.2. - Covers
- Creating a Supabase project; a tour of the dashboard.
- Tables, columns, types, primary keys.
- Designing the
leadstable: contact fields, message, status, source fields (filled in section 6), timestamps. - Migrations: schema changes kept as files in the repository.
- Connecting the project through environment variables, locally and on Vercel.
- Do along
- Have Claude write the migration, apply it, insert a test row by hand.
- Done when
- The test row is visible in the Supabase table view and the migration file is committed.
- Homework
- Explain the migration file in plain sentences, audit every collected field against a real use and the privacy page, and see the table refuse a status outside the five stages.
What the lesson covers
- Prerequisites
- Checkpoint
lesson-4.2. - Covers
- Building the server endpoint that receives the form.
- Validating on the server as well as in the browser, and why both are needed.
- Saving to the database; returning clear success and error responses.
- Replacing the fake submission from 3.7 with the real one.
- Do along
- Connect the form, submit valid and invalid data, test locally and on the live site.
- Done when
- A submission on the live domain appears as a row in the database, and invalid data sent directly to the endpoint is rejected.
- Homework
- Compare the validation rules with how real customers write, rewrite the form's error messages in the business's own voice, and submit a test lead from a phone on the live domain.
What the lesson covers
- Prerequisites
- Checkpoint
lesson-4.3; a Cloudflare account. - Covers
- How form spam happens.
- Layers of defence: a hidden honeypot field, rate limiting, Cloudflare Turnstile.
- Verifying the challenge on the server.
- Keeping protection invisible to real visitors.
- Do along
- Add all three layers; have Claude write a script that imitates a bot and confirm it is blocked.
- Done when
- The bot script is rejected and a normal submission still succeeds.
- Homework
- Submit a test lead as a real visitor on another device and note what Turnstile showed, check the Turnstile sentence on the privacy page, and write a short plan for the day junk leads get through.
- 4.5
Notifications: email and Telegram
55 min + 30 homeThe owner hears about a new lead within seconds, and the visitor gets a confirmation.
What the lesson covers
- Prerequisites
- Checkpoint
lesson-4.4; a Resend account; access to the DNS settings of the domain from 3.3; a Telegram account. - Covers
- Transactional email with Resend: sending domain, DNS records, deliverability basics.
- Owner notification and visitor confirmation templates.
- A Telegram bot that posts new leads to a chat.
- Failure handling: a notification error must not lose the lead.
- Do along
- Set up both channels, send test leads, then disable one channel's key and confirm the lead is still saved.
- Done when
- One submission produces a database row, an email to the owner, a confirmation to the visitor and a Telegram message.
- Homework
- Repeat the break-it test with the email key, review the confirmation email as a customer on a phone, and check inbox placement and how many seconds a live lead takes to reach the owner's phone.
What the lesson covers
- Prerequisites
- Checkpoint
lesson-4.5. - Covers
- Authentication and authorisation in plain language.
- Supabase Auth: creating the owner account, sign-in, sign-out, sessions.
- Protecting every
/adminpage and admin endpoint on the server. - Turning off public sign-up.
- Do along
- Build the login page and a protected placeholder admin page.
- Done when
/adminredirects to login when signed out, opens when signed in, and a second person cannot register.- Homework
- Run the contrast test (sign-up on: the script fails; off again: it passes, one user left), try the login from a phone on the live domain, and write a short "locked out" note without the password in it.
What the lesson covers
- Prerequisites
- Checkpoint
lesson-4.6. - Covers
- Row Level Security: who may read and write each table.
- Public keys and secret keys: which may reach the browser.
- The common mistakes: open tables, leaked keys, missing server checks.
- Running Claude's security review and reading its findings.
- A personal-data mindset: collect little, protect it, be able to delete it.
- Do along
- Enable and test access rules, try to read leads as an anonymous visitor, run the review, fix the findings.
- Done when
- An anonymous request for leads returns nothing, and the review's findings are fixed or consciously accepted in writing.
- Homework
- Add a "where personal data lives" table and a revisit date for every accepted risk to
docs/security-review.md, and practise deleting one test lead by hand.