Fauna Waitlist

A waitlist landing page for Fauna, a wildlife photography and conservation social platform.

Tech Stack

Frontend

• React 19
• TypeScript
• Tailwind CSS v4
• Vite 5

Backend

• Node.js
• Express
• MongoDB with Mongoose

Deployment

• Railway (full-stack)

Project Structure

fauna-waitlist/
├── src/
│   ├── pages/
│   │   └── FaunaWaitlist.tsx
│   ├── App.tsx
│   ├── main.tsx
│   └── index.css
├── public/
│   ├── images/
│   └── favicon files
├── server.js
├── vite.config.ts
└── package.json

Local Development

Prerequisites

• Node.js 20+
• MongoDB Atlas account

Setup

1. Clone the repository

git clone https://github.com/YOUR_USERNAME/fauna-waitlist.git
cd fauna-waitlist

2. Install dependencies

npm install

3. Create .env file

MONGODB_URI=your_mongodb_connection_string
PORT=3001

4. Run development servers

Frontend:

npm run dev

Backend (separate terminal):

npm run server

Production Deployment

Deployed on Railway with automatic builds from the main branch.

Environment Variables

• MONGODB_URI - MongoDB Atlas connection string
• NODE_ENV - Set to production

Build Command

npm run railway:build

Start Command

NODE_ENV=production node server.js

MongoDB Setup

1. Create MongoDB Atlas cluster (free tier M0)
2. Add database user with read/write permissions
3. Whitelist all IPs (0.0.0.0/0) in Network Access
4. Copy connection string and add to Railway environment variables

Features

• Email waitlist with duplicate prevention
• Wildlife photo gallery with lightbox
• Masonry grid layout
• Full mobile responsive design
• Custom cursor and subtle animations

License

All rights reserved.