{"id":44715174,"url":"https://github.com/diploi/starter-web-app","last_synced_at":"2026-05-24T02:33:10.015Z","repository":{"id":328165288,"uuid":"1114456237","full_name":"diploi/starter-web-app","owner":"diploi","description":"A modern, production-ready template for building full-stack React applications using React Router. AI friendly, SSR, TailwindCSS, TypeScript.","archived":false,"fork":false,"pushed_at":"2026-03-06T09:10:53.000Z","size":1345,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2026-03-06T13:38:01.846Z","etag":null,"topics":["api","backend","database","deployable","diploi","example","postgresql","react","react-router","starter","starter-kit","starter-project","supabase"],"latest_commit_sha":null,"homepage":"https://diploi.com/starter-kit/web-app","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/diploi.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2025-12-11T11:55:03.000Z","updated_at":"2026-03-06T09:10:57.000Z","dependencies_parsed_at":null,"dependency_job_id":null,"html_url":"https://github.com/diploi/starter-web-app","commit_stats":null,"previous_names":["diploi/starter-react","diploi/starter-web-app"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/diploi/starter-web-app","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/diploi%2Fstarter-web-app","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/diploi%2Fstarter-web-app/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/diploi%2Fstarter-web-app/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/diploi%2Fstarter-web-app/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/diploi","download_url":"https://codeload.github.com/diploi/starter-web-app/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/diploi%2Fstarter-web-app/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":33419556,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-23T22:14:44.296Z","status":"online","status_checked_at":"2026-05-24T02:00:06.296Z","response_time":57,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["api","backend","database","deployable","diploi","example","postgresql","react","react-router","starter","starter-kit","starter-project","supabase"],"created_at":"2026-02-15T13:39:36.253Z","updated_at":"2026-05-24T02:33:10.010Z","avatar_url":"https://github.com/diploi.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cimg alt=\"icon\" src=\".diploi/icon.svg\" width=\"32\"\u003e\n\n# Web App Starter Kit for Diploi\n\n[![launch with diploi badge](https://diploi.com/launch.svg)](https://diploi.com/starter-kit/web-app)\n[![component on diploi badge](https://diploi.com/component.svg)](https://diploi.com/starter-kit/web-app)\n[![latest tag badge](https://badgen.net/github/tag/diploi/starter-web-app)](https://diploi.com/starter-kit/web-app)\n\nA production-ready React Router + Supabase starter that showcases SSR, runtime ENV wiring, Tailwind CSS styling, and Supabase-backed data flows.\n\nThis starter kit demonstrates:\n\n- 🔐 Supabase API access with typed helpers\n- ⚡️ React Router SSR + Vite dev experience\n- 🎨 Tailwind CSS styling with sensible defaults\n- 🗄️ Supabase migrations, seeds, and Edge Functions\n- 🧩 Diploi-managed components, ENV, and deployment automation\n\n---\n\n## ✨ Overview\n\nThis starter kit consists of two Diploi components configured in [diploi.yaml](diploi.yaml):\n\n- **`react`** — React Router application (Vite, SSR, Tailwind, TypeScript)\n- **`supabase`** — Database, auth, migrations, seed data, Edge Functions\n\nDiploi automatically wires the components together by injecting `SUPABASE_URL` and `SUPABASE_ANON_KEY` into the React component at runtime. No manual `.env` files are required in any environment.\n\n---\n\n## 🧱 Architecture\n\n### 1️⃣ React (React Router) Component\n\n- Based on the Diploi [react-vite](https://github.com/diploi/component-react-vite) component and the official React Router starter.\n- The app shell lives in [app/root.tsx](app/root.tsx) with SSR, streaming, and document links already configured.\n- Runtime environment variables load through the route `loader` exported from [app/lib/useEnv.ts](app/lib/useEnv.ts), ensuring the browser only receives the variables Diploi injects.\n- [app/lib/useSupabase.ts](app/lib/useSupabase.ts) exposes a singleton Supabase browser client backed by those ENV variables.\n- The landing view in [app/welcome/welcome.tsx](app/welcome/welcome.tsx) explains Diploi development workflow and renders a Supabase-powered todo demo via [app/welcome/supabase.tsx](app/welcome/supabase.tsx).\n- Styling is handled with Tailwind CSS (already wired up through Vite) plus a minimal set of custom classes inside [app/app.css](app/app.css).\n\n#### Environment Variables\n\nAccess ENV values with the `useEnv` helper hook.\n\n### 2️⃣ Supabase Component\n\n- Based on the Diploi [supabase](https://github.com/diploi/component-supabase) component.\n- Ships with a `todos` table defined in [supabase/migrations/20260120083000_todo.sql](supabase/migrations/20260120083000_todo.sql) and sample rows in [supabase/seed.sql](supabase/seed.sql).\n- Includes Edge Functions scaffolding inside [supabase/functions](supabase/functions) with a `main` router ([supabase/functions/main/index.ts](supabase/functions/main/index.ts)) and a `hello` example ([supabase/functions/hello/index.ts](supabase/functions/hello/index.ts)).\n- Works seamlessly with the Supabase Studio bundled in the component. Diploi exposes the correct connection strings via the Diploi Console.\n\n---\n\n## 💡 Docs\n\n- [React Router](https://reactrouter.com)\n- [Diploi Remote Development](https://diploi.com/dev)\n- [diploi.yaml reference](https://diploi.com/yaml)\n- [Supabase CLI \u0026 migrations](./supabase/README.md)\n\nBuild something great! 🚀\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdiploi%2Fstarter-web-app","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdiploi%2Fstarter-web-app","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdiploi%2Fstarter-web-app/lists"}