🎉 Gender Reveal Website

A beautiful, responsive gender reveal website where friends can vote on whether they think it's a boy or girl, and suggest names!

✨ Features

• 💙💗 Cute Pink & Blue Theme - Beautiful gradient design with animations
• 📱 Mobile Responsive - Works perfectly on all devices
• 🗳️ Voting System - Friends can cast their vote for Boy or Girl
• 📝 Name Suggestions - Collect multiple name suggestions from each guest
• 📊 Live Results - See voting results with animated progress bars
• 💾 Persistent Storage - All votes saved to a JSON file database

🚀 Quick Start

Local Development

1. Start the server:

   node server.js

2. Open in browser:

   http://localhost:3000
   

That's it! No dependencies to install - uses only Node.js built-in modules.

🌐 Hosting Options

Option 1: Heroku (Free Tier Available)

1. Install Heroku CLI and login
2. Create a new Heroku app:

   heroku create your-gender-reveal

3. Deploy:

   git init
   git add .
   git commit -m "Initial commit"
   git push heroku main

Option 2: Railway.app (Recommended)

1. Go to railway.app
2. Click "New Project" → "Deploy from GitHub repo"
3. Select this repository
4. Railway will auto-detect and deploy!

Option 3: Render.com

1. Go to render.com
2. Click "New +" → "Web Service"
3. Connect your GitHub repository
4. Set:
   • Build Command: (leave empty)
   • Start Command: node server.js
5. Click "Create Web Service"

Option 4: DigitalOcean App Platform

1. Go to DigitalOcean Apps
2. Click "Create App"
3. Connect your GitHub repository
4. Configure:
   • Run Command: node server.js
   • HTTP Port: 3000
5. Deploy!

Option 5: Your Own Server (VPS)

# Install Node.js on your server
curl -fsSL https://deb.nodesource.com/setup_18.x | sudo -E bash -
sudo apt-get install -y nodejs

# Clone/upload your code
cd /var/www/gender-reveal

# Start with PM2 (process manager)
npm install -g pm2
pm2 start server.js --name gender-reveal
pm2 save
pm2 startup

📁 Project Structure

gender-reveal/
├── server.js           # Node.js HTTP server with API
├── votes.json          # Database file (auto-created)
├── package.json        # Project configuration
├── README.md          # This file
└── public/
    ├── index.html     # Main page
    ├── style.css      # Pink/Blue styling
    └── script.js      # Interactive functionality

🔧 Configuration

Change Port

Edit server.js and modify:

const PORT = process.env.PORT || 3000; // Change 3000 to your port

Database Location

The votes are stored in votes.json in the project root. This file is automatically created when the first vote is submitted.

📊 Data Format

Each vote is stored with:

• Guest name
• Vote (boy/girl)
• Name suggestions (array)
• Timestamp

Example:

{
  "votes": [
    {
      "id": 1234567890,
      "guestName": "Sarah",
      "vote": "girl",
      "nameSuggestions": ["Emma", "Olivia"],
      "timestamp": "2025-11-18T23:25:00.000Z"
    }
  ]
}

🎨 Customization

Colors

Edit public/style.css and modify the CSS variables:

:root {
    --boy-blue: #4A90E2;
    --girl-pink: #FF69B4;
    /* ... */
}

Fonts

The site uses Google Fonts (Fredoka & Nunito). Change them in public/index.html:

<link href="https://fonts.googleapis.com/css2?family=YourFont&display=swap" rel="stylesheet">

🐛 Troubleshooting

Port already in use:

# Find and kill the process
lsof -ti:3000 | xargs kill -9

Can't access from other devices:

• Make sure your firewall allows port 3000
• Use your local IP address (e.g., http://192.168.1.100:3000)

📝 License

MIT - Feel free to use for your gender reveal party!

---

Made with 💙 and 💗