SaaS Waitlist

A minimal waitlist landing page built with Vite, React, TypeScript, and Appwrite. Visitors submit a name and email, entries are stored in an Appwrite TablesDB table, and duplicate emails are rejected by a unique index.

Companion repo for the tutorial on the Appwrite blog.

What it does

• Collects a name and email from a public landing page.
• Writes each submission to an Appwrite table (waitlist.entries).
• Uses a unique index on email to reject duplicates without a second row being created.
• Handles three outcomes in the UI: success, duplicate, unknown.
• Keeps all Appwrite calls in a single helper (src/lib/appwrite.ts); the component calls the helper, not the SDK.

Stack

• Vite + React + TypeScript
• appwrite client SDK
• Tailwind CSS v4

Appwrite setup

In the Appwrite Console, create:

1. A project. Copy the Project ID and API endpoint from the overview page.

2. A web platform pointing at the origin you will run the app from (for local dev, localhost).

3. A database with ID waitlist.

4. A table inside it with ID entries and these columns:

   Column	Type	Required	Notes
   name	varchar	Yes	Size 255
   email	email	Yes	Validated by Appwrite on write

5. A unique index on email (key: unique_email, type: unique, attribute: email).

6. Table permissions: add role Any with Create only. Leave Read / Update / Delete unchecked. Keep row security off.

Local development

pnpm install
cp .env.example .env
# edit .env with your project values
pnpm dev

Environment variables

See .env.example. All four variables are required at startup.

Variable	Example
VITE_APPWRITE_ENDPOINT	https://<REGION>.cloud.appwrite.io/v1
VITE_APPWRITE_PROJECT_ID	your project ID
VITE_APPWRITE_DATABASE_ID	waitlist
VITE_APPWRITE_TABLE_ID	entries

Because Vite only exposes variables prefixed with VITE_ to the browser, these are safe to ship to the client. None of them are secrets.

Project structure

src/
  App.tsx              UI + form wiring (no SDK imports)
  lib/
    appwrite.ts        Client, TablesDB, and the createWaitlistEntry helper
  main.tsx
  index.css            Tailwind entry

Scripts

Command	What it does
pnpm dev	Start the Vite dev server
pnpm build	Type-check and build for production
pnpm preview	Serve the production build locally
pnpm lint	Run ESLint

License

MIT.