Personal calorie tracking app built with React, TypeScript, and Supabase. Track meals, manage recipes with ingredients, and view nutrition insights.
ℹ️ Use google account to login
When running the app locally, my Supabase project is used (same as here https://fatbook.pages.dev/).
- Copy
.env.productionto.env.local - Run
npm install - Run
npm run dev
Useful commands
- Prod build:
npm run build - Check bundle size:
npx vite-bundle-visualizer
- Cloudflare Pages - web hosting
- Supabase - DB, Auth
- Google - Auth Provider
To use Fatbook with your own Supabase project you need following prerequisites:
- configured Google Cloud project with Oauth ClientID
- configured Supabase project with Fatbook schema (either local or cloud one)
- Go to the Google Cloud Platform and create a new project if necessary.
- Create Oauth ClientID
- API&Services > Credentials > Create Credentials > Oauth ClientID
- App type: Web
- Add
http://localhost:3000to authorized origins - Add
http://localhost:54321/auth/v1/callbackto authorized redirect URIs
- Copy
.env.template, save it as.env.localand fill folowing env variables:- Set
SUPABASE_AUTH_GOOGLE_CLIENT_IDas "Client ID" from Google Cloud project - Set
SUPABASE_AUTH_GOOGLE_SECRETas "Client Secret" from Google Cloud project
- Set
Details: https://supabase.com/docs/guides/auth/social-login/auth-google#prerequisites
It is possible to develop using locally run Supabase (supabase/local-development),
- Install docker (e.g. docker desktop or rancher desktop)
- Install Supabase CLI
- Launch Supabase:
supabase start - Supabase will output URLs for resources
- Copy "API URL" to
.env.localasVITE_SUPABASE_URL - Copy "anon key" to
.env.localasVITE_SUPABASE_ANON_KEY
- Copy "API URL" to
- Reset local DB (this will apply migrations and insert seed data):
supabase db reset --local- Go to local Supabase console > Table Editor
- Make sure there are tables and date (e.g.
dishestable)
- Run
npm install - Run
npm run dev - Login with Google account
- Go to https://supabase.com/ and click "Start your project"
- Fill the form, save database password
- Install Supabase CLI
- Link your project to Fatbook:
supabase link --project-ref <project-id> - Reset remote DB (this will apply migrations and insert seed data):
supabase db reset --linked- Go to Supabase console > Table Editor
- Make sure there are tables and date (e.g.
dishestable)
- Add following env variables to
.env.local:- Set
VITE_SUPABASE_URLwith "Project URL" value from Supabase project home page - Set
VITE_SUPABASE_ANON_KEYwith "API Key" value from Supabase project home page
- Set
- Enable Google Auth provider
- Go to Supabase > Authentication > Providers
- Enable Google provider
- Set Client ID and Client Secret (you can take them from
.env.localor Google Cloud) - Copy "Callback URL" and add it to Google Cloud to authorized redirect URIs
- run
npm install - run
npm run dev - Login with Google account
End-to-end tests use Playwright with real user authentication. Tests run against your actual Supabase instance using a dedicated test user.
ℹ️ Note: A test login form appears on the login page in development mode for E2E authentication. Real users should use Google authentication.
- Create a test user in your Supabase dashboard (Authentication > Users)
- Copy
.env.templateto.env.testand add your test credentials:E2E_TEST_EMAIL=test@example.com E2E_TEST_PASSWORD=your_test_password
- Install Playwright:
npm run test:e2e:install
npm run test:e2e # Run all E2E tests
npm run test:e2e:ui # Interactive mode