Development guide for a Next.js 15 wedding website with real-time features, admin seating chart, guestbook, RSVP, and song requests using Supabase and Tailwind CSS
A comprehensive wedding website built with Next.js 15, TypeScript, Supabase, and Tailwind CSS featuring real-time guestbook, RSVP system, song requests, and admin seating chart management.
```
/app # Next.js app directory
/(auth-pages) # Protected routes requiring authentication
/admin # Admin seating chart management
/protected # Protected info for guests
/(public-pages) # Public routes
/ # Home page with wedding details
/gallery # Photo gallery
/guestbook # Real-time guestbook
/rsvp # RSVP form
/songs # Song request form
/success # Success confirmation pages
/api # API routes for form submissions
/components # React components
/admin # Admin-specific components (seating chart)
/gallery # Gallery components
/guestbook # Guestbook components
/ui # ShadCN UI components
/lib # Utilities and configurations
/supabase # Supabase client and types
/public # Static assets and images
/styles # Global styles
```
1. Create `.env.local` with required Supabase credentials:
- `NEXT_PUBLIC_SUPABASE_URL`
- `NEXT_PUBLIC_SUPABASE_ANON_KEY`
- `SUPABASE_SERVICE_ROLE_KEY`
2. Install dependencies:
```bash
npm install
```
**Development**:
```bash
npm run dev # Start development server with Turbopack
npm run build # Build for production
npm run start # Start production server
npm run preview # Preview production build locally
```
**Code Quality**:
```bash
npm run lint # Check for linting issues
npm run lint:fix # Auto-fix linting issues
npm run type-check # Check TypeScript types
npm run format # Format code with Prettier
```
**Testing**:
```bash
npm test # Run Jest tests
npm run test:watch # Run tests in watch mode
```
The guestbook uses Supabase real-time subscriptions:
All forms (RSVP, songs, guestbook) follow this pattern:
1. Client-side form validation
2. API route handles submission (`/app/api/...`)
3. Server-side validation before database insertion
4. Redirect to success page with confirmation
Key Supabase tables:
Leave a review
No reviews yet. Be the first to review this skill!
# Download SKILL.md from killerskills.ai/api/skills/nextjs-wedding-website-with-supabase/raw