Baby Gender Reveal Vote

🌟 Create exciting baby gender reveal parties with real-time voting! Perfect for both in-person and virtual baby showers.

🚀 Quick Links

Screenshots • Technical Details •

💡 Overview

Baby Gender Reveal Vote is an interactive web application that transforms traditional gender reveal parties into engaging events where friends and family can participate in predicting the baby's gender. Built with React.js and Firebase, it offers real-time voting, beautiful animations, and an admin dashboard.

Key Features

• 📊 Real-time voting system


• 🌐 Multi-language support


• 📱 Mobile-responsive design


• 👥 Admin control panel


• 🎨 Beautiful animated interfaces


• 📈 Live results dashboard

View All Features

🎯 Perfect For

• Baby Shower Organizers


• Parents-to-be


• Event Planners


• Virtual Baby Showers


• Family Gatherings


• Gender Reveal Parties

🛠️ Built With

• React.js


• Firebase


• TailwindCSS


• Framer Motion

📋 Table of Contents

• Features


• Screenshots


• Technical Details


• Installation


• Available Scripts


• Firebase Setup Steps


• Verification Steps


• Common Setup Issues


• Development Tips


• Usage Guide


• Admin Guide


• Contributing


• Troubleshooting


• License

✨ Features

1. Interactive Voting System

• Simple and intuitive gender selection interface


• Beautiful animated backgrounds with themed icons


• Real-time vote tracking with instant updates


• Multiple language support for international users


• Mobile-responsive design for all devices


• Secure one-vote-per-user system


• Interactive selection cards with visual feedback


• Vote confirmation system

2. Real-time Results Dashboard

• Live vote counting and percentage calculation


• Dynamic result updates without page refresh


• Beautiful bar chart visualization with animations


• Leading prediction indicator with emoji support


• Total participation counter


• Percentage breakdowns for each gender


• Visual indicators for voting trends


• Export results functionality

3. Admin Control Panel

• Complete game reset functionality


• Manual vote adjustments for both genders


• Screen visibility controls for results/voting


• Game state management (Started/Paused/Ended)


• Individual voter reset option


• Real-time vote monitoring


• Data backup and restore options


• Custom vote count adjustments

4. User Experience Features

• Engaging vote confirmation screens


• Interactive waiting room for results


• Clear instruction panels


• Vote submission confirmations


• Reset for next voter capability


• Confetti celebrations for voting


• Animated transitions between screens


• Error handling with user-friendly messages

📸 Screenshots

Home and Voting Interface

Welcome screen with multi-language support and simple navigation

Gender selection interface with intuitive design and visual feedback

Results Visualization

Dynamic results display with real-time updates and beautiful visualizations

Administrative Controls

Comprehensive admin panel for complete game control

Safety confirmations for critical actions

User Experience Flows

Engaging user journey with clear feedback and instructions

🔧 Technical Details

Technology Stack

• 
  Frontend: React.js with Vite for blazing-fast development


• 
  Styling: TailwindCSS for responsive design


• 
  State Management: React Context API


• 
  Animations: Framer Motion


• 
  Real-time Updates: WebSocket integration


• 
  Icons: Custom SVG components


• 
  Testing: Jest and React Testing Library

System Requirements

• Node.js v14.0.0 or higher


• npm v6.0.0 or higher


• Modern web browser with WebSocket support


• Minimum 512MB RAM


• Screen resolution: 320px minimum width

📥 Installation

1. 
   Clone the Repository
   

   git clone <repository-url>

   cd baby-shower-exit-poll-voting-app/source

1. 
   Install Bun (if not already installed)
   

   curl -fsSL https://bun.sh/install | bash

1. 
   Install Dependencies
   

   bun install

This will generate the bun.lockb file for your environment.

1. 
   Environment Setup
   

   cp .env.example .env

1. Configure Firebase

Visit the

• Sign in with your Google account, or create one if you haven't already.

1. Click on "Add Project"

• Enter your project name (e.g., "Baby Gender Reveal Vote").


• (Optional) Edit the Project ID if you want a custom one.


• Check the box to agree to the Firebase terms.


• Click "Continue".

1. Google Analytics Setup (Optional)

• You can enable Google Analytics for your project or skip it.


• If you choose to enable it, select your Analytics account or create a new one.


• Click "Continue".

1. Click "Create Project"

• Wait for Firebase to set up your new project.

1. 
   Click "Continue" to navigate to your Firebase project console.

2. Configure Firebase for Your App

1. Add an App to Your Project

• In the Firebase Console, find the "Your apps" section.


• Click the </> Web icon to add Firebase to your web app.


• Register your app by providing a nickname (e.g., "Voting App").


• Check the box for "Also set up Firebase Hosting" if you plan to use it later (optional).


• Click "Register app".

1. Copy Firebase SDK Snippet

• You will receive the Firebase SDK configuration (a code snippet containing Firebase keys).


• This information will be used to configure the Firebase SDK in your app.

1. Modify your .env File

• Use the provided Firebase configuration to populate your .env file:
  

   VITE_FIREBASE_API_KEY=<your-api-key>

   VITE_FIREBASE_AUTH_DOMAIN=<your-auth-domain>

   VITE_FIREBASE_DATABASE_URL=<your-database-url>

   VITE_FIREBASE_PROJECT_ID=<your-project-id>

   VITE_FIREBASE_STORAGE_BUCKET=<your-storage-bucket>

   VITE_FIREBASE_MESSAGING_SENDER_ID=<your-sender-id>

   VITE_FIREBASE_APP_ID=<your-app-id>

3. Set Up Realtime Database

1. Navigate to Realtime Database in Firebase Console

• Click on "Realtime Database" in the left sidebar.

1. Create a New Database

• Click "Create Database".


• Choose "Start in Test Mode" to allow all reads and writes (be sure to change this in production).


• Click "Next" and then "Done".

1. Configure Database Rules

• Go to the "Rules" tab in the Realtime Database.


• Replace the default rules with:
  

   {

     "rules": {

       ".read": true,

       ".write": true,

       "gameState": {

         ".read": true,

         ".write": true,

         "vote": {

           ".read": true,

           ".write": true

         },

         "results": {

           ".read": true,

           ".write": true

         }

       }

     }

   }

• Click "Publish" to apply the rules.

4. Enable Authentication (Optional)

1. Navigate to Authentication in Firebase Console

• Click on "Authentication" in the sidebar.

1. 
   Set Up Sign-In Method
   
   
   
   
   • Go to the "Sign-in method" tab.
   
   
   • Enable "Email/Password" by toggling it on and then click "Save".
   
   
   
   

5. Verify Firebase Setup

1. Test Firebase Connection in Your App

• Run your app locally using bun start or the equivalent command.


• Open the browser's development console (usually with F12 or right-click and Inspect).


• Look for a message confirming a successful Firebase connection.

1. 
   Submit a Test Vote
   
   
   
   
   • Use your application's voting feature to test that data is correctly written to the Realtime Database.
   
   
   
   

Verification Steps

1. 
   Check if the app runs:
   

   bun start

1. 
   Verify Firebase connection:
   
   
   
   
   • Open browser console
   
   
   • Look for "Firebase Connected" message
   
   
   • Try submitting a test vote
   
   
   
   

Common Setup Issues

1. Firebase Connection Error

• Double-check all Firebase environment variables


• Ensure database rules are set correctly


• Verify project ID matches

1. 
   Bun Installation Issues
   

   # Try cleaning cache

   bun clean:cache

   bun install

1. 
   Port Conflicts
   

   # Use a different port

   VITE_PORT=3000 bun start

Development Tips

• Use bun start for hot-reload development


• Check console for Firebase connection status


• Test on multiple browsers for compatibility


• Use React DevTools for debugging

🔍 Keywords

baby shower, gender reveal, voting app, baby gender prediction, virtual baby shower, gender reveal party, real-time voting, baby shower games, interactive baby shower, gender reveal ideas

📖 About

Baby Gender Reveal Vote is an interactive web application that transforms traditional gender reveal parties into engaging events. This open-source project allows friends and family to participate in predicting the baby's gender through a beautiful, real-time voting system.

Why Choose This App?

• 🎯 Perfect for Modern Celebrations: Ideal for both in-person and virtual baby showers


• ⚡ Real-time Experience: Instant vote updates and live results


• 🌍 Inclusive Design: Multi-language support and mobile-responsive interface


• 🔒 Secure: One vote per user system with admin controls


• 🎨 Beautiful Interface: Engaging animations and themed design


• 💻 Easy Setup: Simple installation process with detailed documentation

Use Cases

• Virtual Baby Showers


• In-person Gender Reveal Parties


• Family Gatherings


• Social Media Live Events


• Baby Shower Games


• Gender Prediction Contests

🌟 Star this repo if you found it helpful! 🌟

Support the Project

• ⭐ Star this repository


• 🔄 Fork this repository


• 👀 Watch this repository for updates


• 🐛 Report bugs via
  


• 📖 Create documentation


• 🔍 Review pull requests

Connect & Contribute

• Read our