Our Space

Our Space is a private Next.js application for a couple. It combines shared notes, memories, moods, movies, personal expense ledgers, anniversary settings, realtime Supabase sync, Cloudinary media uploads, PWA support, OneSignal push notifications, and responsive Tailwind-based app screens.

Stack

• Next.js App Router with TypeScript strict mode
• Tailwind CSS for layout, responsive grids, app surfaces, animation classes, and native-feeling controls
• Local UI primitives in components/ui/ plus native dialog/input/select controls
• Supabase Auth, PostgreSQL, Row Level Security, and Realtime
• Cloudinary for hero images, memory photos, profile pictures, and movie posters
• Recharts for finance trend and category charts
• OneSignal Web Push through Supabase Edge Functions
• Local toast provider for feedback notifications

Project Structure

app/
  actions.ts                         # Server actions for auth, setup, notes, expenses, moods, memories, movies
  api/cloudinary/upload/route.ts      # Auth-protected Cloudinary upload endpoint
  auth/callback/route.ts              # Supabase OAuth/email callback
  login/page.tsx                      # Supabase password login and forgot-password entry point
  reset-password/page.tsx             # Password reset completion page
  layout.tsx                          # Root layout, PWA metadata, iOS splash links, providers
  page.tsx                            # Protected app server page
  globals.css                         # Tailwind globals and app tokens
components/
  auth/
    login-form.tsx                    # Sign in, sign up, forgot-password request
    reset-password-form.tsx           # New-password form after email reset callback
  expenses/
    expense-dialog.tsx                # Expense form with fixed local currency
    expense-feed.tsx                  # Own editable ledger and partner read-only feed
    finance-charts.tsx                # Recharts week/month + category charts
  memory/
    memory-map-panel.tsx              # Memory map surface and memory cards
  movies/
    movie-dialog.tsx                  # Movie create/edit form, poster upload, multi-category selection
    movies-panel.tsx                  # Movie board and details dialog
  layout/app-providers.tsx            # Theme, toast, realtime, and runtime providers
  notes/
    note-card.tsx                     # Blur/countdown time-locked note card
    note-dialog.tsx                   # Note form
  our-space/
    client.tsx                        # Main realtime app shell
lib/
  auth.ts                             # Current session/profile/partner helpers
  constants.ts                        # Currency/category constants and formatting
  data.ts                             # App data query and chart aggregation logic
  supabase/
    browser.ts
    server.ts
  types.ts                            # Shared TypeScript interfaces
supabase/migrations/
  final_schema.sql                    # Fresh database schema
  202607*.sql                         # Incremental migrations for moods, memories, movies, couple settings

Environment Variables

Copy .env.example to .env.local and fill in:

NEXT_PUBLIC_SUPABASE_URL=
NEXT_PUBLIC_SUPABASE_ANON_KEY=
SUPABASE_SERVICE_ROLE_KEY=

NEXT_PUBLIC_CLOUDINARY_CLOUD_NAME=
NEXT_PUBLIC_CLOUDINARY_HERO_IMAGE_URL=
CLOUDINARY_API_KEY=
CLOUDINARY_API_SECRET=

NEXT_PUBLIC_APP_URL=http://localhost:3000
NEXT_PUBLIC_ONESIGNAL_APP_ID=your-onesignal-app-id

NEXT_PUBLIC_CLOUDINARY_HERO_IMAGE_URL should be a high-quality Cloudinary URL for the couple hero image. Runtime uploads are organized by upload kind, including hero images, memories, and movie posters.

Supabase Edge Function secrets for push notifications:

supabase secrets set \
  ONESIGNAL_APP_ID=your-onesignal-app-id \
  ONESIGNAL_REST_API_KEY=your-onesignal-rest-api-key \
  APP_URL=https://dailymoments.vercel.app \
  NOTIFICATION_WEBHOOK_SECRET=your-webhook-secret

Install and Run

npm install
npm run dev

Open http://localhost:3000.

Useful checks:

npm run typecheck
npm run build

Supabase Setup

1. Create a Supabase project.
2. Enable Email/Password auth in Supabase Auth.
3. Run the migrations in supabase/migrations/ via Supabase CLI, or use final_schema.sql only for a fresh local database reset.
4. Add auth redirect URLs for password reset:

http://localhost:3000/auth/callback
https://your-production-domain.com/auth/callback

The reset email can use Supabase's default template. It enters the app at /auth/callback?next=/reset-password; Supabase only needs /auth/callback in the allowlist.

5. Create auth users and let the setup flow create/link profiles, or seed profiles manually for local testing.

Example profile seed:

insert into public.profiles (id, email, display_name, country_code, currency)
values
  ('USER_A_UUID', '[email protected]', 'Vietnam Partner', 'VN', 'VND'),
  ('USER_B_UUID', '[email protected]', 'Singapore Partner', 'SG', 'SGD');

update public.profiles
set partner_id = 'USER_B_UUID'
where id = 'USER_A_UUID';

update public.profiles
set partner_id = 'USER_A_UUID'
where id = 'USER_B_UUID';

The schema defines:

• profiles: user identity, country, fixed currency, partner link
• notes: shared note CRUD with optional unlock_at, attachments, author/recipient
• individual_expenses: owner-only writes, partner-readable rows, category enum, currency enum
• daily_moods: per-profile mood tracking with partner visibility
• memory_map_entries: shared memories with location and optional photos
• movies: shared movie list with movie_status enum, optional multi-category text[], poster URL, rating, and reaction
• couple: couple-level settings such as hero image, anniversary date, and exchange-rate cache

Recent movie migrations:

20260716_change_movie_category_to_array.sql
20260716_make_movie_category_optional.sql
20260716_change_movie_status_to_enum.sql

This is the beginning of the README. Read the rest at the original. Read the full README ↗