Zeitlist: Waitlist App with Email Validation - Vercel

Zeitlist: Waitlist App with Email Validation

Vercel-ready Next.js waitlist. Arcjet ensures valid emails before hitting your Upstash Redis list. Deploy a cleaner, faster waitlist app.

This template is unavailable

DeployView Demo

Zeitlist

this is a waitlist app. it uses redis. and arcjet to validate emails.

Core Functionality

Provides a simple form for users to submit their email.
Validates submitted emails using Arcjet before processing.
Stores valid emails in a Redis list managed by Upstash.
Displays a live count of total signups.

Tech Used

Framework: Next.js
Database: Upstash (Redis)
Email Validation: Arcjet
Styling: Tailwind CSS
Language: TypeScript

Local Setup

To get this running on your machine:

Clone it:

git clone ``https://github.com/zeitgg/zeitlist.git`
cd zeitlist

Install dependencies:
```
bun i
```

Set up environment variables: You'll need API keys/URLs. Create a .env.local file in the root directory and dd these variables:

# Get from your Upstash dashboard
UPSTASH_REDIS_REST_URL="YOUR_UPSTASH_REDIS_URL"
UPSTASH_REDIS_REST_TOKEN="YOUR_UPSTASH_REDIS_TOKEN"

# Get from your Arcjet dashboard
ARCJET_SITE_KEY="YOUR_ARCJET_SITE_KEY"

Run the dev server:
```
bun dev
```
Open in browser: http://localhost:3000

How it Works (Quick Overview)

User submits their email via the frontend.
The submission hits an API route (e.g., /api/waitlist/).
This API route first passes the email to Arcjet for validation.
If Arcjet approves, the email is added to a list in Redis using the Upstash SDK.
A separate API route (e.g., /api/waitlist/count) reads the length of the Redis list to get the current signup count.
The frontend fetches from the count endpoint and displays the number.