This is a Next.js web application for Megan's 40th Birthday weekend at Disneyland. It features a Disneyland-themed UI, dynamic RSVPs stored in Google Sheets, and calendar integrations.
- Framework: Next.js 16 (App Router)
- Database: Google Sheets via
googleapis - Deployment URL:
https://party.shaffer.tech - Styling: Standard CSS Modules (
globals.css,page.module.css) - Key Theme: Magical Disneyland aesthetic (Disney Red, Blue, Yellow color scheme), gradient overlay on castle background, custom SVG icon.
Copy the .env.local.example to .env.local and fill in the required values.
cp .env.local.example .env.local- Go to the Google Cloud Console.
- Create a new project.
- Enable the Google Sheets API.
- Go to IAM & Admin > Service Accounts and create a new Service Account.
- Create and download a JSON key for this Service Account.
- Open the downloaded JSON file. You will need the
client_emailandprivate_key. - Extract the
private_key(it should look like-----BEGIN PRIVATE KEY-----\n...\n-----END PRIVATE KEY-----\n). - Create a new Google Sheet on your normal Google account.
- IMPORTANT: Click "Share" on the Google Sheet, and share it with the
client_emailfrom your Service Account as an Editor. - The sheet requires 7 columns:
Timestamp, Name, Guests, Comment, Saturday, Sunday, Monday. - Get the Google Sheet ID from the URL (the long string between
/d/and/edit). - Add these to your
.env.localfile:GOOGLE_CLIENT_EMAIL="[email protected]" GOOGLE_PRIVATE_KEY="-----BEGIN PRIVATE KEY-----\nYOUR_PRIVATE_KEY_HERE\n-----END PRIVATE KEY-----\n" GOOGLE_SHEET_ID="your_sheet_id_here"
- Create an OAuth client ID in Google Cloud Console.
- Set the Authorized redirect URIs (
http://localhost:3000/api/auth/callback/googleandhttps://party.shaffer.tech/api/auth/callback/google). - Add to
.env.local:GOOGLE_CLIENT_ID="your-client-id" GOOGLE_CLIENT_SECRET="your-client-secret" NEXTAUTH_SECRET="your_random_secret_string"
- Install dependencies:
npm install - Run the Guest RSVP site (
party.shaffer.techmode):npm run dev
- Or run Megan's Itinerary site (
40.shaffer.techmode):npm run dev:megan
- Open
http://localhost:3000in your browser.