Dev notes
Calendar
A full-stack personal calendar with four views, Google Calendar sync, event sharing, and Pokémon card attachments — built on Postgres and date-fns.
Architecture overview
- Next.js frontend + Express BFF gating all database access behind Auth0 session verification
- Postgres for events, members, attachments, and Google OAuth tokens; no heavy calendar library on the frontend
date-fns for all date math — named imports so only the functions used land in the bundle
The four views
- Day, week, month, and year — each is its own async server component with its own Suspense boundary and matching skeleton
- Skeleton matches the exact view structure (same row heights, same grid) to prevent CLS when the JS chunk arrives
- Week view has an overlap layout engine: simultaneous events get equal-width columns instead of stacking
Google Calendar sync
- OAuth 2.0: user connects in Settings, backend exchanges the authorization code for tokens, stores the refresh token in Postgres
- Webhook-driven: Google push notifications hit the Express backend when events change; backend fetches the delta and upserts into Postgres
- Token refresh: middleware checks expiry before every Google API call and refreshes automatically using the stored refresh token
Sharing and permissions
- Calendars can be shared; each member has either an owner or viewer role
- Only owners can add or remove members, delete the calendar, or modify Google Calendar ACL entries
addCalendarAclEntry fires fire-and-forget after the DB insert so ACL latency never delays the HTTP response
Other features
- Pokémon card attachments: events can have TCG cards pinned to them, stored as card IDs and fetched from TCGdex on render
- Countdown view: days-until calculator for named upcoming events
- Events list: infinite scroll via IntersectionObserver; observer reconnects after each page load to prevent duplicate callbacks