Nestlog

A shared, real-time baby-tracking app (feeds, pees, poops) built with Next.js, TypeScript, Tailwind CSS, and Supabase.

Getting started

1. Install dependencies:

   npm install
   

2. Create a Supabase project at supabase.com, then copy .env.local.example to .env.local and fill in your project's URL and anon key (found under Project Settings → API):

   cp .env.local.example .env.local
   

   NEXT_PUBLIC_SUPABASE_URL=https://your-project.supabase.co
   NEXT_PUBLIC_SUPABASE_ANON_KEY=your-anon-key
   

3. Apply the database schema: open your Supabase project's SQL Editor and run each file in supabase/migrations/ in filename order (they're timestamped). (If you have the Supabase CLI linked to this project, supabase db push works too.)

4. Optional but recommended for a two-person household: under Authentication → Providers → Email in the Supabase dashboard, turn off "Confirm email" so signup doesn't require clicking an email link first.

5. Optional — enable "Continue with Google":

   • In Google Cloud Console, create an OAuth 2.0 Client ID (Web application) with authorized redirect URI https://<your-project-ref>.supabase.co/auth/v1/callback.
   • In the Supabase dashboard, under Authentication → Providers → Google, paste the Client ID and Client Secret and enable it.
   • Under Authentication → URL Configuration, add http://localhost:3000/auth/callback (and your production URL + /auth/callback once deployed) to the Redirect URLs allowlist.
   • Google sign-ins skip the manual name/email/password fields and land on /onboarding to finish household setup, with the name field prefilled from the Google profile when available.

6. Run the dev server:

   npm run dev
   

   Open http://localhost:3000. Signup collects your name, email, password, and household choice (create or join, via invite code) all on one screen; on success you land straight on the Log tab. (If your Supabase project has email confirmation on, you'll finish household setup at /onboarding after confirming instead.) Then add your baby.

Project structure

• src/app — Next.js App Router pages: /login, /signup, /onboarding (fallback household setup for the email-confirmation case), / (Log), /timeline, /reports
• src/components — React components, grouped by feature (auth, onboarding, baby, log, timeline, reports, layout)
• src/lib/supabase — Supabase client helpers (browser, server, and proxy clients, using @supabase/ssr) and generated Database types
• src/lib/entries.ts — grouping/sorting/formatting helpers shared by the Log and Timeline screens
• src/lib/reports.ts — client-side stat/daily-aggregate computation for the Reports screen
• proxy.ts — refreshes the Supabase auth session on each request (this Next.js version renamed middleware.ts to proxy.ts)
• supabase/migrations — SQL schema migrations, applied in order

Data model

Four tables, matching the paper log this app replaces:

• households — a household using the app, with a unique invite_code for onboarding
• users — one row per household member, mirrors auth.users
• babies — one row per baby, belongs to a household
• entries — one row per logged event: type (feed / pee / poop), timestamp, notes, amount_ml (feed only), logged_by

Row Level Security is enabled on all four tables, scoped so a signed-in user can only see/edit their own household's data (via a current_household_id() helper function). New users attach to a household through the create_household/join_household Postgres functions (called from the onboarding screen), not by inserting rows directly.

The matrix UI clusters same-instant entries (e.g. a feed logged alongside a pee) back into a single row for display, since the paper log this replaces often has multiple things happening at once — see groupEntriesIntoMoments in src/lib/entries.ts.

Realtime is enabled on entries (see the enable_realtime migration), so when one household member logs something, the other sees it appear live without refreshing — this is delivered subject to the same RLS policies, so only household members receive it.

Both Home and Timeline sort moments chronologically by timestamp (the event's actual time), most recent first — groupEntriesIntoMoments in src/lib/entries.ts handles both the clustering and the sort.

Reports (/reports) computes stat cards (total entries/feeds, avg mL per feed, avg gap between feeds), two per-day bar charts, and a daily summary table — all client-side from the fetched entries, no SQL aggregation views. Fine at household scale; revisit if this becomes commercial and datasets grow.

Design system

The "paper" visual language (warm off-white surfaces, ruled-line table dividers, amber/sage/terracotta/brand-blue accents) is defined as Tailwind v4 theme tokens directly in src/app/globals.css via @theme — this Tailwind version doesn't use a tailwind.config.js, so tokens like --color-sage live in CSS and generate bg-sage/text-sage/etc utilities automatically. Shared primitives live in src/components/ui (Field, TextInput, PrimaryButton) and src/components/brand (BrandMark). Per-person identity colors (avatars, "logged by" pills) cycle through a fixed sage/terracotta/brand-blue palette by household join order — see src/lib/person-colors.ts. There is no dark mode; the design spec is light-only by intent.

Troubleshooting

Login/signup succeeds but bounces back to /login, or server-side Supabase calls fail with UNABLE_TO_GET_ISSUER_CERT_LOCALLY: some local setups (antivirus/VPN software doing HTTPS inspection) install a certificate your browser trusts but Node.js doesn't, so the server can't verify your session with Supabase even though the browser signed in fine. Workaround for local dev only — never for production:

NODE_TLS_REJECT_UNAUTHORIZED=0 npm run dev

Stack

• Framework: Next.js (App Router) + TypeScript
• Styling: Tailwind CSS
• Backend: Supabase (Postgres, Auth, Realtime)
• Hosting: Vercel