Pandal Registration Application

A comprehensive Kolkata pandal registration application built with Next.js featuring interactive Google Maps, Google Places autocomplete, reCAPTCHA security, and Firebase database integration.

Features

Security

• reCAPTCHA v3 integration for bot protection
• Server-side token verification with score validation
• Form validation with Zod schema
• Secure Firebase authentication and storage

Interactive Map

• Google Maps integration with Kolkata pandal locations
• Clickable markers for pandal selection
• Real-time data from pujo.club API
• Marker animations on selection

Address Integration

• Google Places Autocomplete for address input
• Country restriction to India
• Real-time address suggestions
• Map-based address selection

Database

• Firebase Firestore for data storage
• Automatic age calculation from date of birth
• Secure data validation and storage

User Interface

• Responsive design for mobile and desktop
• Real-time formatting for phone numbers and currency
• Form validation with error messages
• Loading states and user feedback
• Ticket-style user profile generation

Tech Stack

• Framework: Next.js 15.5.3 with App Router
• Frontend: React 19.1.0
• Database: Firebase Firestore
• Validation: Zod + React Hook Form
• Styling: Tailwind CSS 4 + shadcn/ui
• APIs: Google Maps API, Google Places API, reCAPTCHA v3, Pujo.club API
• Language: TypeScript 5

Application Features

Interactive Map

• Pandal locations with real-time data from pujo.club API
• Click map markers to auto-fill address
• Visual feedback with bouncing animations on marker selection
• Centered on Kolkata with appropriate zoom level

Form Fields

1. Name - Text input with minimum 2 characters validation
2. Date of Birth - Date picker with automatic age calculation
3. Address - Google Places autocomplete (India only) or map selection
4. Income Per Annum - Currency formatted input (USD)
5. Phone Number - US format: +1 (555) 1234 567
6. Email - Email validation with regex pattern
7. reCAPTCHA v3 - Invisible bot protection

Environment Variables

Create a .env.local file:

# Firebase Configuration
NEXT_PUBLIC_FIREBASE_API_KEY="your_firebase_api_key"
NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN="your_project.firebaseapp.com"
NEXT_PUBLIC_FIREBASE_PROJECT_ID="your_project_id"
NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET="your_project.appspot.com"
NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID="your_sender_id"
NEXT_PUBLIC_FIREBASE_APP_ID="your_app_id"

# Google Maps API
NEXT_PUBLIC_GOOGLE_API_KEY="your_google_maps_api_key"

# reCAPTCHA v3
NEXT_PUBLIC_RECAPTCHA_SITE_KEY="your_recaptcha_site_key"
RECAPTCHA_SECRET_KEY="your_recaptcha_secret_key"

Setup Instructions

1. Install Dependencies

npm install

2. Firebase Setup

1. Create a new Firebase project at Firebase Console
2. Enable Firestore Database
3. Configure Firebase security rules
4. Get your Firebase configuration keys
5. Add Firebase configuration to environment variables

3. API Keys Setup

Google Maps API:

1. Go to Google Cloud Console
2. Enable Maps JavaScript API and Places API
3. Create API key and restrict to your domain
4. Add to NEXT_PUBLIC_GOOGLE_API_KEY

reCAPTCHA v3:

1. Go to reCAPTCHA Admin
2. Create new site (v3)
3. Add site and secret keys to environment variables

4. Run Development Server

npm run dev

Open http://localhost:3000

Project Structure

demo_form/
├── app/
│   ├── api/
│   │   ├── user/[id]/        # User data API routes
│   │   └── route.ts          # Form submission API
│   ├── user/[id]/
│   │   └── page.tsx          # User ticket display page
│   ├── layout.tsx            # Root layout with Google Maps
│   └── page.tsx              # Main registration form
├── components/
│   ├── ui/                   # Reusable UI components
│   │   ├── button.tsx
│   │   ├── input.tsx
│   │   └── ...
│   ├── MyForm.tsx            # Main form component
│   ├── MapView.tsx           # Interactive map component
│   ├── AddressInput.tsx      # Google Places autocomplete
│   └── RecaptchaComponent.tsx # reCAPTCHA wrapper
└── lib/
    ├── firebase.ts           # Firebase configuration
    ├── form-schema.ts        # Zod validation schema
    ├── address-extract.ts    # Address parsing utilities
    └── utils/
        └── constantValues.ts # Application constants

Database Schema

Firebase Firestore collection structure:

interface UserData {
  id: string;           // Document ID
  name: string;         // User full name
  dob: string;          // Date of birth
  age: string;          // Calculated age
  address: string;      // Full address
  incomePerAnnum: string; // Annual income
  phoneNumber: string;  // Phone number
  email: string;        // Email address
  createdAt: string;    // Registration timestamp
}

Technical Implementation

Google Maps Integration

• Google Maps JavaScript API with Places library
• Async loading with Next.js Script component
• Centered on Kolkata coordinates (22.5726, 88.3639)
• Optimized zoom level for city-wide view

Pandal Data Source

• Real-time data from pujo.club API (https://pujo.club/data.json)
• Red dot markers for each pandal location
• Click interaction to select pandal address
• Bounce animation on marker selection

Address Input System

• Google Places Autocomplete for manual address input
• Country restriction to India only
• Dual input method: map selection or manual typing
• Address component extraction for city, state, pincode

reCAPTCHA v3 Implementation

• Invisible reCAPTCHA execution
• Server-side score verification (threshold: 0.5)
• Action validation for form submission
• Bot protection without user interaction

Deployment

Vercel Deployment

1. Connect your GitHub repository to Vercel
2. Add all environment variables in Vercel dashboard
3. Configure Firebase security rules for production
4. Set up domain restrictions for Google APIs
5. Deploy automatically on push to main branch

Production Checklist

• Configure Firebase security rules
• Set up proper API key restrictions
• Enable Firebase App Check for additional security
• Configure CORS settings for your domain
• Test reCAPTCHA functionality in production environment

Key Features

User Registration Flow

1. Fill registration form with validation
2. Select pandal location via interactive map
3. Complete reCAPTCHA verification
4. Submit form and receive confirmation
5. Access personalized ticket with QR code

Ticket Generation

• Unique ticket ID generation
• QR code for mobile verification
• Professional ticket design
• User profile information display
• Downloadable format support

Contributing

1. Fork the repository
2. Create a feature branch
3. Make your changes
4. Test thoroughly
5. Submit a pull request

License

MIT License