Build an Event Calendar in Lovable | Prompt Kit

TL;DR

The one-paragraph version before you dive in.

Paste the starter prompt into Lovable Build mode and get a working event calendar: public browse with month view, RSVP with capacity caps, organizer dashboard, and ICS export — all on Supabase Cloud. The capacity race-condition edge function and timezone discipline are non-negotiable. Full chain: ~100–150 credits on a Pro $25/mo plan, about one full day of building.

Setup checklist

Complete these steps in Lovable before pasting the starter prompt — takes about 5 minutes.

Cloud tab settings

Database

Stores events, rsvps, profiles, and categories. The starter prompt creates all four tables plus RLS migrations.

1Click the + button next to Preview in the top toolbar to open the Cloud panel
2Click Database — you'll see an empty Table Editor
3Leave it empty for now — the starter prompt generates the migration file

Auth

Organizers sign up with email/password. Anonymous RSVP is handled server-side in the edge function — no sign-in required for guests.

1Cloud tab → Users & Auth
2Confirm Email sign-in is enabled (it is by default)
3Leave 'Allow new users to sign up' ON — organizers self-register
4Disable any OAuth providers you don't need (Google, GitHub) to reduce surface area

Storage

Stores event cover images uploaded by organizers. One public bucket so images render on the public event cards.

1Cloud tab → Storage
2Click Create bucket, name it 'event-images', toggle Public ON
3Note the bucket name — the starter prompt references 'event-images' throughout

Edge Functions

Hosts the capacity-checked RSVP insert, ICS export, and 24h reminder fan-out. The starter prompt generates the function files; you don't deploy them manually.

1Cloud tab → Edge Functions — leave empty for now
2Functions deploy automatically when Lovable pushes supabase/functions/ to the repo
3After the starter prompt runs, verify functions appear in this tab

Secrets (Cloud tab → Secrets)

RESEND_API_KEY

Purpose: Sends RSVP confirmation emails and 24-hour event reminders via the send-reminders edge function

Where to get it: Go to https://resend.com/api-keys, sign in (free account), click Create API Key, set permission to Sending access, copy the key starting with re_

SITE_URL

Purpose: Used in email templates to build the correct event and unsubscribe links — without this, email links point to undefined

Where to get it: After publishing your Lovable project (top-right Publish button), copy the production URL (e.g. https://my-events.lovable.app) — or your custom domain once set up

Preflight checklist

You're in a fresh Lovable project (Vite + React + TypeScript + Tailwind + shadcn/ui already scaffolded — that's the Lovable default)
You're on Pro $25/mo — the starter + capacity edge function + email follow-ups will burn through Free's 30/mo cap before you finish
You've signed up for a free Resend account at resend.com and verified your sending domain (add SPF + DKIM DNS records) before testing email flow
You understand that timezone handling is the #1 gotcha: events store starts_at as timestamptz (UTC) plus a separate timezone IANA string, and the form must convert local input to UTC before insert

The starter prompt — paste this first

Copy this. Paste it into Lovable Agent Mode (the default chat at the bottom-left of the editor). Hit send.

lovable-agent-mode.txt

~40–60 credits

Build an event calendar app. Stack assumptions: React + Vite + TypeScript + Tailwind + shadcn/ui (already scaffolded), React Router v6 for routes, Supabase JS client against Lovable Cloud.

## Database schema (create a migration: supabase/migrations/0001_events_schema.sql)

Create four tables in the public schema:

1. `profiles` — id (uuid references auth.users.id on delete cascade, primary key), full_name (text), email (text), timezone (text not null default 'UTC'), created_at (timestamptz default now()).
   RLS: enable. Policy: per-user read+write where id = auth.uid().

2. `categories` — id (uuid pk default gen_random_uuid()), name (text not null unique), slug (text not null unique), created_at (timestamptz default now()).
   RLS: enable. Policy: public-read (anon + authenticated). Admin-write via (auth.jwt() ->> 'role' = 'admin') — skip for now, seed a few rows directly.

3. `events` — id (uuid pk default gen_random_uuid()), organizer_id (uuid references auth.users.id not null), title (text not null), slug (text not null unique), description (text), starts_at (timestamptz not null), ends_at (timestamptz not null), timezone (text not null default 'UTC'), location (text), capacity (int), cover_image_path (text), category_id (uuid references categories.id), status (text not null default 'draft' check (status in ('draft','published','cancelled'))), created_at (timestamptz default now()).
   Constraint: check (ends_at > starts_at).
   RLS: enable.
   Policies:
   - Public SELECT: FOR SELECT TO anon, authenticated USING (status = 'published').
   - Organizer write: FOR INSERT TO authenticated WITH CHECK (organizer_id = auth.uid()); FOR UPDATE TO authenticated USING (organizer_id = auth.uid()) WITH CHECK (organizer_id = auth.uid()); FOR DELETE TO authenticated USING (organizer_id = auth.uid()).

4. `rsvps` — id (uuid pk default gen_random_uuid()), event_id (uuid references events.id not null), user_id (uuid references auth.users.id nullable), guest_email (text nullable), guest_name (text nullable), status (text not null default 'going' check (status in ('going','maybe','no'))), responded_at (timestamptz default now()).
   Constraint: unique (event_id, user_id) where user_id is not null.
   RLS: enable.
   Policies:
   - INSERT: blocked for direct client; use edge function only (no anon/authenticated INSERT policy here — the edge function uses the service-role key).
   - SELECT for organizer: FOR SELECT TO authenticated USING (EXISTS (SELECT 1 FROM events e WHERE e.id = rsvps.event_id AND e.organizer_id = auth.uid())).
   - SELECT for own: FOR SELECT TO authenticated USING (user_id = auth.uid()).

## Layouts

Create two layout components:

`src/layouts/PublicLayout.tsx` — top nav with: Logo text 'EventSpace', nav links (Browse Events / Sign in). Clean, minimal. Use shadcn NavigationMenu.

`src/layouts/OrganizerLayout.tsx` — sidebar (240px) with nav links (My Events / New Event / Settings / Public View link), content area on the right. Wrap with `<OrganizerGuard>` that reads supabase auth session; if not authenticated, redirect to /signin.

## Pages and routes (add to src/App.tsx)

- `/` — Events.tsx: grid of published events, sorted by starts_at asc. Each card shows cover image, title, date formatted in event.timezone using date-fns-tz `formatInTimeZone`, location, capacity remaining (total capacity minus rsvp count where status='going'). Include a CalendarGrid component showing the current month with dots on event days.
- `/events/[slug]` — EventDetail.tsx: full event detail. Shows starts_at formatted with `formatInTimeZone(event.starts_at, event.timezone, 'PPP p zzz')` from date-fns-tz. Show capacity: X going / Y capacity. Include RSVPDialog component (Sheet on mobile, Dialog on desktop): name + email fields for guests, or confirm with account for signed-in users. Button disabled when capacity is full. ICS download button at bottom.
- `/organizer` — organizer/Dashboard.tsx: table of organizer's events (all statuses), columns: title, starts_at, status badge, RSVP count. Actions: edit, publish/unpublish toggle, view event.
- `/organizer/events/new` — organizer/EventEditor.tsx with blank form.
- `/organizer/events/[id]/edit` — organizer/EventEditor.tsx pre-populated.
- `/signin` and `/signup` — basic email+password forms using supabase.auth.signInWithPassword and signUp.

## Key components

`src/components/EventCard.tsx` — cover image, title, formatted date (use date-fns-tz), location, category badge, RSVP count chip.

`src/components/CalendarGrid.tsx` — simple month grid (7 columns). Days with events get an indigo dot. Clicking a day scrolls to the event or navigates to it.

`src/components/RSVPDialog.tsx` — form for name + email (guest) or just confirm (signed-in). Calls POST /functions/v1/rsvp-create with JSON body { event_id, guest_name, guest_email, user_id (if signed in), status: 'going' }. Shows loading state and success confirmation.

`src/components/EventForm.tsx` — for organizer create/edit. Fields: title, description, starts_at (date + time input), ends_at, timezone (searchable Select using a list of IANA timezones), location, capacity (number), category (Select), cover image upload (Cloud Storage bucket 'event-images'), status radio (Draft / Published). On submit, combine the date+time inputs with the selected timezone using date-fns-tz `zonedTimeToUtc` before writing to Supabase.

`src/components/OrganizerGuard.tsx` — wraps protected routes.

## Edge functions

`supabase/functions/rsvp-create/index.ts` — accepts POST JSON { event_id, guest_name, guest_email, user_id, status }. Steps: (1) CORS preflight: if req.method === 'OPTIONS' return new Response('ok', { headers: { 'Access-Control-Allow-Origin': '*', 'Access-Control-Allow-Headers': 'authorization,content-type' } }). (2) Use service-role Supabase client. (3) BEGIN transaction: SELECT id, capacity FROM events WHERE id = event_id FOR UPDATE. (4) SELECT COUNT(*) FROM rsvps WHERE event_id = $1 AND status = 'going'. (5) If count >= capacity, return 409 { error: 'capacity_full' }. (6) INSERT INTO rsvps. (7) COMMIT. Return 200 { ok: true, rsvp_id }. Include the CORS headers in every response.

`supabase/functions/ics-export/index.ts` — GET /functions/v1/ics-export?event_id=UUID. Fetches the event row, builds a VCALENDAR/VEVENT block with DTSTART/DTEND in the event.timezone, returns text/calendar with attachment header so browsers download a .ics file.

## Styling cues

Warm community palette: slate-50 background, indigo-600 primary, white cards with rounded-2xl and shadow-sm. Use shadcn Calendar, Dialog, Sheet, Select, Badge, Skeleton. Mobile-first on public pages. Organizer dashboard is desktop-first with a 2-column grid for event cards.

Install date-fns and date-fns-tz as dependencies — these are the correct packages for timezone-aware date formatting in Vite React projects.

Generate the migration first, then the layouts, then the pages in order, then the edge functions.

What this prompt generates

Creates a SQL migration with 4 tables (profiles, events, rsvps, categories), per-organizer RLS policies, and a unique constraint on (event_id, user_id) for rsvps
Scaffolds two layouts: PublicLayout for browsing and OrganizerLayout with sidebar and OrganizerGuard
Generates 6 pages: event browse grid with CalendarGrid, event detail with RSVPDialog, organizer dashboard, event editor with timezone-aware form, sign-in and sign-up
Creates rsvp-create edge function with CORS preflight and DB-level capacity check in a transaction to prevent overselling
Creates ics-export edge function that returns a valid VCALENDAR .ics attachment for any published event

Paste into: Lovable Agent Mode (the default chat at the bottom-left of the editor)

Expected output

What Lovable will generate after the starter prompt runs successfully.

Files

supabase/migrations/0001_events_schema.sql

All four tables, RLS policies, and unique constraint on rsvps

src/layouts/PublicLayout.tsx

Column	Type	Notes
id	uuid primary key	—
organizer_id	uuid references auth.users	—
title	text not null	—
slug	text not null unique	—
starts_at	timestamptz not null	—
ends_at	timestamptz not null	—
timezone	text not null default 'UTC'	—
capacity	int	—
status	text check in ('draft','published','cancelled')	—

Column	Type	Notes
id	uuid primary key	—
event_id	uuid references events	—
user_id	uuid nullable references auth.users	—
guest_email	text nullable	—
guest_name	text nullable	—
status	text check in ('going','maybe','no')	—

Column	Type	Notes
id	uuid references auth.users primary key	—
full_name	text	—
email	text	—
timezone	text not null default 'UTC'	—

Column	Type	Notes
id	uuid primary key	—
name	text not null unique	—
slug	text not null unique	—

Follow-up prompts

Paste these into Agent Mode one by one, in order, after the starter prompt finishes.

Harden the RSVP edge function with CORS and idempotency

CORS headers on every response, upsert instead of duplicate-key error, structured JSON error responses

~15 credits

prompt

Update supabase/functions/rsvp-create/index.ts to be fully hardened:

1. Add CORS preflight at the very top: if (req.method === 'OPTIONS') return new Response('ok', { headers: { 'Access-Control-Allow-Origin': '*', 'Access-Control-Allow-Headers': 'authorization,content-type' } });

2. Include 'Access-Control-Allow-Origin': '*' in every response headers object.

3. For the upsert case: if the combination (event_id, user_id) already exists for a signed-in user, UPDATE the status instead of failing. Use INSERT INTO rsvps (...) ON CONFLICT (event_id, user_id) WHERE user_id IS NOT NULL DO UPDATE SET status = EXCLUDED.status.

4. Return structured JSON in all error cases: { ok: false, reason: 'capacity_full' } with HTTP 409, { ok: false, reason: 'event_not_found' } with HTTP 404, { ok: false, reason: 'invalid_body' } with HTTP 400.

Do not change any other logic in the function.

When to use: Paste right after the starter prompt finishes — before any browser testing, since CORS errors block the RSVP flow in the preview iframe

Add email confirmations and 24h reminders via Resend

RSVP confirmation emails and 24h-before event reminder emails via Resend, scheduled by pg_cron

~40 credits

prompt

Add two email flows using the Resend connector:

1. In supabase/functions/rsvp-create/index.ts, after a successful RSVP insert, call the Resend API to send a confirmation email to the guest_email (or the auth user's email). Use RESEND_API_KEY from Deno.env.get('RESEND_API_KEY'). Email subject: 'You're going to [event.title]!'. Body: event title, formatted date using the event.timezone, location, and a calendar download link (https://{Deno.env.get('SITE_URL')}/functions/v1/ics-export?event_id={event_id}).

2. Create supabase/functions/send-reminders/index.ts — a function that queries all published events where starts_at is between now() + interval '23 hours' and now() + interval '25 hours', finds all rsvps with status='going', and sends each one a reminder email via Resend. Schedule this function to run every hour using pg_cron: CREATE EXTENSION IF NOT EXISTS pg_cron; SELECT cron.schedule('send-reminders', '0 * * * *', $$ SELECT net.http_post(url:='https://[your-project-ref].supabase.co/functions/v1/send-reminders', headers:=jsonb_build_object('Authorization', 'Bearer ' || current_setting('app.service_role_key'))) $$);

Make sure RESEND_API_KEY and SITE_URL are set in Cloud → Secrets before testing.

When to use: Once RESEND_API_KEY and SITE_URL are added to Cloud → Secrets and your Resend domain is verified with SPF + DKIM records

Add recurring events with basic RRULE support

Recurring events with client-side virtual expansion, no DB row duplication

~50 credits

prompt

Add basic weekly and monthly recurring event support:

1. Add a column to events: recurrence_rule (text nullable) — stores simple RRULE strings like 'FREQ=WEEKLY;BYDAY=MO' or 'FREQ=MONTHLY;BYMONTHDAY=1'.

2. In the EventForm.tsx organizer editor, add a Recurrence section after the date fields: a toggle 'Repeating event', and if on, a Select with options: Weekly (every week on the same weekday), Monthly (same date each month), None. Write the appropriate RRULE string to the recurrence_rule column.

3. In the Events.tsx public browse page, when generating the events list for display, if an event has a recurrence_rule, expand virtual instances for the next 3 months in JavaScript (do not duplicate rows in the DB). Each virtual instance reuses the original event's data but with computed starts_at/ends_at. Show a 'Repeating' badge on recurring event cards.

4. In EventDetail.tsx for recurring events, show 'Next occurrences' — list the next 5 dates.

Do not duplicate event rows in the database. Virtual expansion only happens at query/render time.

When to use: Only if you have weekly meetups or regular series — skip entirely for one-off event calendars

Add a public organizer page

Public organizer profile page with event grid and email follow subscription

~30 credits

prompt

Create a public organizer profile page at /o/[organizer-slug]:

1. Add a slug column to profiles: slug (text unique). In the sign-up flow, auto-generate slug from full_name (lowercase, spaces to dashes, append short uuid suffix for uniqueness).

2. Create src/pages/OrganizerProfile.tsx — shows the organizer's name, a bio (add bio text field to profiles), and a grid of all their published events sorted by starts_at. Use the same EventCard component as the browse page.

3. Add a 'Follow by email' form at the bottom of the organizer profile: input for email + Subscribe button. Store subscribers in a new table: organizer_followers (id uuid pk, organizer_id uuid fk auth.users, follower_email text, subscribed_at timestamptz default now(), unique (organizer_id, follower_email)). RLS: public INSERT only (no SELECT for anon), organizer SELECT for own followers.

4. Add a 'View my public page' link in the OrganizerLayout sidebar pointing to /o/[current-user's-slug].

The organizer_followers table is insert-only for anon — do not add a SELECT policy for anon.

When to use: Once you have 3+ active organizers and want to give each a shareable profile page

Add RSVP waitlist when capacity is full

Waitlist status for full events, automatic promotion email when a spot opens up

~40 credits

prompt

Extend the RSVP system to support a waitlist when an event is at capacity:

1. Add 'waitlist' to the rsvps status check constraint: status text check (status in ('going','maybe','no','waitlist')).

2. Update supabase/functions/rsvp-create/index.ts: if the capacity check finds rsvp_count >= capacity, do NOT return 409. Instead, insert the RSVP with status='waitlist' and return 200 { ok: true, status: 'waitlist', position: waitlist_position }. Calculate waitlist position as COUNT(*) FROM rsvps WHERE event_id = $1 AND status = 'waitlist'.

3. Update RSVPDialog.tsx to show 'Join Waitlist' button text when the event detail page shows capacity as full (rsvp_count >= capacity). After a waitlist RSVP, show 'You are #N on the waitlist'.

4. Create supabase/functions/promote-from-waitlist/index.ts — called when a 'going' RSVP is cancelled (status changed to 'no'). It finds the first waitlist RSVP for that event (oldest responded_at), promotes it to status='going', and sends a promotion email via Resend.

5. In the Organizer Dashboard, show a 'Waitlist: N' count next to the RSVP count for each event.

When to use: Only when you are actually hitting capacity on events — most community calendars don't need this until events are selling out

Add RSVP list CSV export for organizers

One-click CSV download of the RSVP list for any event, with name/email/status columns

~20 credits

prompt

Add CSV export of RSVPs to the organizer dashboard:

1. In src/pages/organizer/Dashboard.tsx, add an 'Export RSVPs' button on each event row. When clicked, it should fetch all RSVPs for that event (organizer SELECT policy allows this) and generate a CSV file in the browser.

2. The CSV should have columns: Name, Email, RSVP Status, Responded At. For signed-in attendees, join to profiles to get the name and email.

3. Use the browser's Blob API to download the file: create a Blob with type 'text/csv', create an object URL, click a hidden anchor element to download. File name: '[event-slug]-rsvps.csv'.

4. Show a count 'N going / N maybe / N waitlist' summary row before the export button.

No new edge functions needed — use the existing Supabase JS client with the organizer's auth session, which already has SELECT permission for their events' RSVPs.

When to use: Before any in-person event where you need to check guests in at the door or share the list with a venue

Common errors

Real error strings you'll see. Find yours, paste the fix prompt.

new row violates row-level security policy for table "rsvps"

The rsvps table has no anon or authenticated INSERT policy in the starter — inserts go through the edge function which uses the service-role key. A direct Supabase JS insert from the browser will always fail by design.