You're collecting emails — but where do you see them? In this lesson, we build an admin dashboard: a protected page that shows all signups in a clean table with charts and CSV export.
What We're Building
By the end of this lesson, you'll have:
- A
/adminpage showing all collected emails in a table - Basic password protection (so only you can see the data)
- A chart showing signups over time
- A button to download all data as a CSV file
Creating the Admin Page
Try It
In Claude Code:"Create an admin dashboard page at app/admin/page.tsx that: - Fetches data from a new API route GET /api/signups - Displays a clean table with columns: Email, Signup Date, Status - Shows a total count of signups at the top - Has a clean, professional design with a header that says 'Waitlist Dashboard' - This should be a client component that fetches data on mount"
Then create the API route to serve the data:
Create an API route at app/api/signups/route.ts that reads from
data/signups.json and returns all signups as JSON, sorted by date
(newest first).
Visit http://localhost:3000/admin — you should see your dashboard with all the emails you submitted earlier!
Adding Basic Authentication
Right now, anyone can visit /admin. Let's add a simple password gate:
Try It
In Claude Code:"Add basic password protection to the admin page: 1. Create a .env.local file with ADMIN_PASSWORD=changeme123 2. When visiting /admin, show a login form first (just a password field and submit button) 3. On successful login, store a session token in a cookie 4. On subsequent visits, check the cookie before showing the dashboard 5. Add a 'Logout' button in the dashboard header 6. The API route /api/signups should also check for the auth cookie"
Honest Note
This is basic authentication — good enough for a learning project and personal use. A production application would use proper authentication with hashed passwords, session management, CSRF protection, and likely a third-party auth provider. But for our waitlist admin panel, this simple approach works.Data Visualization
A table is useful, but a chart makes trends visible at a glance. Let's add one:
Try It
In Claude Code:"Add a simple bar chart above the table showing signups per day for the last 14 days. Use the Recharts library (install it with npm). The chart should have: - Date on the X-axis - Number of signups on the Y-axis - Navy blue bars matching our color scheme - Responsive sizing"
Claude will install Recharts and create the chart component. You might need to submit a few more test emails on different dates to see interesting data.
Pro Tip
If you don't have enough test data, ask Claude: "Add a seed script that generates 50 fake signup entries spread across the last 30 days. Store them in data/signups.json." This gives you realistic data to visualize.Export Data as CSV
Every dashboard needs an export feature:
Add a "Download CSV" button in the dashboard header. When clicked, it should
generate a CSV file with columns Email,Date,Status and trigger a file download
in the browser. Name the file waitlist-export-YYYY-MM-DD.csv.
Polish and UX
Let's add some finishing touches:
Loading state:
Add a loading skeleton while the dashboard data is being fetched. Show
animated placeholder rows instead of a blank page.
Empty state:
If there are no signups yet, show a friendly empty state message:
"No signups yet — share your landing page to get started!" with a
link back to the homepage.
Responsive table:
Make the table horizontally scrollable on mobile devices so it doesn't
break the layout.
Testing Everything Together
Let's verify the full flow works:
- Go to http://localhost:3000 (landing page)
- Submit a test email
- Go to http://localhost:3000/admin
- Enter the password (
changeme123) - See the email in the table and chart
- Click "Download CSV" and verify the file
- Click "Logout" and verify you need to log in again
Try It
Walk through the entire flow above. If anything doesn't work, tell Claude exactly what went wrong, and it will fix it.Git Checkpoint
git add .
git commit -m "admin dashboard with auth, chart, and CSV export"
Remember: never commit .env.local (it contains your password). It should already be in .gitignore by default.
Key Takeaway
You now have a working admin dashboard. You can see your data, visualize trends, and export CSVs. This is a legitimate MVP (Minimum Viable Product) — a functional tool that solves a real problem.