Rock'em Robotics Booster Club Membership Form

A Next.js web application for collecting and managing membership sign-ups for the Rock'em Robotics Booster Club. The application features a multi-step form that accommodates different member types (district employees, parents, and supporting members) and automatically sends confirmation emails to both administrators and members.

Features

• Dynamic Form Logic: Adapts form fields based on member type selection
• Multi-Entity Support: Collect information for multiple students and parent/guardian contacts
• Real-time Validation: Client-side form validation with helpful error messages
• Email Notifications: Automated emails via SendGrid to both admins and new members
• Database Integration: Supabase backend for secure data storage
• Responsive Design: Mobile-friendly UI built with Tailwind CSS and shadcn/ui components
• Theme Support: Dark/light mode via next-themes

Tech Stack

• Framework: Next.js 14 (App Router)
• Language: TypeScript
• Styling: Tailwind CSS
• UI Components: shadcn/ui (Radix UI primitives)
• Database: Supabase
• Email Service: SendGrid
• Form Handling: React Hook Form with Zod
• Package Manager: pnpm

Prerequisites

• Node.js 18+ and pnpm
• A Supabase project
• A SendGrid account with API key

Getting Started

1. Clone the Repository

git clone https://github.com/rockem-robotics/membership-form.git
cd membership-form

2. Install Dependencies

pnpm install

3. Set Up Supabase

1. Create a new Supabase project at supabase.com
2. Run the SQL script in scripts/001_create_tables.sql in your Supabase SQL editor
3. Note your project URL and anon key

4. Set Up SendGrid

1. Create a SendGrid account at sendgrid.com
2. Generate an API key with mail send permissions
3. Verify a sender email address

5. Configure Environment Variables

Create a .env.local file in the root directory:

# Supabase
NEXT_PUBLIC_SUPABASE_URL=your-supabase-url
NEXT_PUBLIC_SUPABASE_ANON_KEY=your-supabase-anon-key

# SendGrid
SENDGRID_API_KEY=your-sendgrid-api-key
SENDGRID_FROM_EMAIL=verified-sender@example.com
SENDGRID_TO_EMAILS=admin1@example.com,admin2@example.com

6. Add Team Logo

Place your team logo at public/team-logo.png (recommended size: 200x200px)

7. Run the Development Server

pnpm dev

Open http://localhost:3000 to view the application.

Project Structure

membership-form/
├── app/
│   ├── actions.tsx              # Server actions for form submission
│   ├── layout.tsx               # Root layout with theme provider
│   ├── page.tsx                 # Home page with form
│   ├── globals.css              # Global styles
│   └── thank-you/
│       └── page.tsx             # Thank you page after submission
├── components/
│   ├── contact-form.tsx         # Main membership form component
│   ├── theme-provider.tsx       # Theme context provider
│   └── ui/                      # shadcn/ui components
├── lib/
│   ├── utils.ts                 # Utility functions
│   └── supabase/
│       └── server.ts            # Supabase server client
├── scripts/
│   └── 001_create_tables.sql    # Database schema
├── public/
│   └── team-logo.png            # Team logo image
└── package.json

Member Types

The form supports four member types:

1. School District Employee: District employees who may or may not have children in the program
2. Parent/Guardian of Kids in the District: Parents with children in the school district
3. Parent/Guardian of Kids in the Program: Parents with children actively participating in robotics
4. Supporting Member: Extended family, friends, or community supporters

Database Schema

Members Table

• id (uuid, primary key)
• member_type (text)
• first_name (text)
• last_name (text)
• email (text)
• phone (text)
• involvement (text, optional)
• created_at (timestamp)

Students Table

• id (uuid, primary key)
• member_id (uuid, foreign key → members)
• first_name (text)
• last_name (text)
• grade_level (text)
• team_number (text, optional)
• team_name (text, optional)
• dietary_restrictions (text, optional)
• created_at (timestamp)

Email Templates

The application sends two types of emails:

1. Admin Notification: Detailed submission information sent to configured admin emails
2. Member Confirmation: Welcome email with registration summary sent to the new member

Both emails feature branded HTML templates with the team logo and colors.

Scripts

• pnpm dev - Start development server
• pnpm build - Build for production
• pnpm start - Start production server
• pnpm lint - Run ESLint

Deployment

Deploy to Vercel

1. Push your code to GitHub
2. Import the repository in Vercel
3. Configure environment variables in Vercel dashboard
4. Deploy

Environment Variables in Production

Make sure to set all environment variables in your deployment platform:

• NEXT_PUBLIC_SUPABASE_URL
• NEXT_PUBLIC_SUPABASE_ANON_KEY
• SENDGRID_API_KEY
• SENDGRID_FROM_EMAIL
• SENDGRID_TO_EMAILS

Customization

Updating Team Information

1. Team Name: Edit app/page.tsx and components/contact-form.tsx
2. Contact Email: Update in app/page.tsx footer section
3. Team Logo: Replace public/team-logo.png
4. Colors: Modify theme colors in app/globals.css

Adding/Removing Teams

Update the team number dropdown in components/contact-form.tsx around line 430:

<SelectContent>
  <SelectItem value="44632A">44632A</SelectItem>
  {/* Add or remove team options here */}
</SelectContent>

Security

• Row Level Security (RLS) enabled on Supabase tables
• Public insert policies allow form submissions
• Environment variables protect sensitive API keys
• Email validation prevents malformed submissions
• Phone number formatting for consistent data

Contributing

1. Fork the repository
2. Create a feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

License

This project is created for the Rock'em Robotics Booster Club.

Support

For questions or issues:

• Email: contact@rockemrobotics.com
• Open an issue on GitHub

Acknowledgments

• Built with Next.js
• UI components from shadcn/ui
• Icons from Lucide
• Hosted on Vercel