HO15 — Deployed Full-Stack App

Hands-on portfolio project · Week 6 · Solo · module M17. Part of the ForgeMind AI — AI Productivity Essentials course.

Built with your Claude.ai subscription — no API key, no server, no terminal required. Each sample is a full CRUD app that runs entirely in the browser using localStorage and deploys free to GitHub Pages. Open any sample's index.html and it just works.

Goal

Done when: Your app runs in the browser (saving data in localStorage) and is live at a free GitHub Pages URL.

What to ship

Your index.html + a README naming the problem it solves and the data it stores + the live GitHub Pages URL. (A full server + database version is shown as optional advanced reference in each sample's backend-reference/ folder — not required.)

Pick a problem statement

Choose one of these real use-cases — or bring your own (get it approved first):

1. You track expenses, inventory or habits in a spreadsheet that breaks the moment two people touch it. Build and deploy a full-stack CRUD tracker with a frontend, a backend and a database that stores each record so anyone can add, edit and delete entries. Success: a live URL where adding an item persists, with the README naming what it stores.

2. Your small business takes bookings over WhatsApp and double-books constantly. Build and deploy a full-stack booking or waitlist app with a backend that saves each entry to a database. Success: a live URL where submitting a booking stores it and shows up in the list, with the README describing the data it keeps.

3. You collect feedback or sign-ups through scattered messages and lose half of them. Build and deploy a full-stack form-collection app that saves each submission to a database and lists them back. Success: a live URL where a submitted form persists and appears in a list view, with the README naming what it stores.

4. You share long ugly links and lose track of your bookmarks. Build and deploy a full-stack URL shortener or bookmark manager with a backend and database that persists each entry. Success: a live URL where a shortened link or saved bookmark survives a refresh, with the README explaining the stored data.

5. Your team handles leave requests or asset checkouts over email and nothing is recorded. Build and deploy a small full-stack internal tool with a database that stores each request or checkout. Success: a live URL where a submitted request persists and is listed for an approver, with the README describing what it stores.

How to use this repo

1. Open the landing page (index.html) to browse the five samples.
2. Pick one sample folder and open its README.md.
3. Double-click that sample's index.html — it opens in your browser and works right away.
4. Use the example prompt in the sample README to rebuild the app with your Claude.ai subscription, then tweak it for your own use case. No API key needed.
5. Save Claude's code as index.html, push it to GitHub, and enable Settings → Pages for a free live link.

---

HO15 · Solo · ForgeMind AI Course · module M17 (Week 6)

💡 Use your Claude.ai Pro plan wisely

The Pro plan has a usage limit that resets every few hours. A few habits make it stretch — and keep a mistake from burning your whole session:

• Use the example prompt in each sample's README — it's already written and tested. Don't reinvent it.
• One clear prompt beats lots of vague back-and-forth. Say what you want, with an example, in a single message.
• Start a new chat when you switch tasks. Long chats re-read every earlier message and use up your limit faster.
• Don't paste big files over and over. Paste once, then refer back to it.
• If something works, keep it. Tweak it rather than regenerate from scratch.
• Using Claude Code or Cowork? This repo's CLAUDE.md makes Claude follow these same rules automatically, and SKILL.md is a reusable "token-wise" skill.

If you do hit the limit, it resets after a few hours — nothing you've saved is lost.

Run it locally

This is a full-stack app (frontend + backend + database). It runs on localhost — the GitHub Pages page is static and can't run the backend. To run it on your own machine:

# clone your copy of this repo, then:
cp .env.example .env      # fill in your database connection
npm install
npm run dev               # starts the backend + frontend locally

Open the local URL it prints (e.g. http://localhost:3000). Each samples/sample-0X/ folder has its own README with the exact commands and the data it stores.

Deploying to a server

Getting this to a live public URL is covered once in the course: See the Week-6 deploy walkthrough. Run and verify it locally first, then follow that one video to deploy.