Go client-side, migrate to Vite, open source#37
Merged
Conversation
Rips out every backend system — auth (NextAuth/Resend), Stripe billing, Prisma/Postgres persistence, Remotion Lambda rendering, public snippet routes — and replaces them with: - localStorage snippet storage (src/lib/snippet-storage.ts) - @remotion/web-renderer client-side video generation - No accounts, no plans, no credits, no watermark enforcement Side effects: upgraded Remotion 4.0.68 → 4.0.448, drew background gradients on a <canvas> (web-renderer banned radial-gradient CSS), shimmed Canvas2D fontStretch percentage values, forced dark theme app-wide, replaced the help page with plain TSX (dropped the MDX stack), dropped unused deps (hookform, uuid, lru-cache, react-type-animation). Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Rewrites the doc to describe the post-migration state: localStorage persistence, in-browser renderMediaOnWeb, web-renderer CSS caveats, the forced dark theme (and the useTheme gotcha), and Plausible as the lone third-party service. Also ignores .claude/. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
No longer needed — the Remotion Lambda webhook it tunneled for is gone. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
update-site.yml re-uploaded the Remotion Lambda site on pushes — Lambda rendering is gone, so the workflow has nothing to do. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Replace the Next.js App Router with Vite + React SPA and TanStack Router. The app was already fully client-side, so Next was only providing dev server, bundler and routing — Vite gives faster startup, a plain static build, and drops next, next-plausible, next-themes, eslint-config-next. - Static index.html owns the head (OG, Twitter, favicon, fontStretch shim) - Code-based TanStack Router tree in src/routes.tsx - Pages moved from src/app/ to src/pages/; layouts collapse into MyShell - Hardcoded dark theme via <html class="dark"> — no theme provider - import.meta.env.VITE_* replaces NEXT_PUBLIC_* - Jest switched from next/jest to plain ts-jest - package type set to module; CJS configs renamed to .cjs Also refresh the landing page with a "100% free — No account" tag and a new open-source section linking to the repo and GitHub Sponsors.
Rewrite the README as a standard OSS readme (features, stack, local setup, scripts, env vars, sponsor link) and add .github/FUNDING.yml so the Sponsor button shows up on the repo.
scastiel
changed the title
Run ESLint, Prettier check, and Jest on every push to main and every PR. Also add a format:check script and run prettier --write across src/ so the new check passes from day one.
scastiel
added a commit
that referenced
this pull request
Apr 11, 2026
* Migrate to fully client-side: localStorage + in-browser rendering Rips out every backend system — auth (NextAuth/Resend), Stripe billing, Prisma/Postgres persistence, Remotion Lambda rendering, public snippet routes — and replaces them with: - localStorage snippet storage (src/lib/snippet-storage.ts) - @remotion/web-renderer client-side video generation - No accounts, no plans, no credits, no watermark enforcement Side effects: upgraded Remotion 4.0.68 → 4.0.448, drew background gradients on a <canvas> (web-renderer banned radial-gradient CSS), shimmed Canvas2D fontStretch percentage values, forced dark theme app-wide, replaced the help page with plain TSX (dropped the MDX stack), dropped unused deps (hookform, uuid, lru-cache, react-type-animation). Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> * Update CLAUDE.md for client-side architecture Rewrites the doc to describe the post-migration state: localStorage persistence, in-browser renderMediaOnWeb, web-renderer CSS caveats, the forced dark theme (and the useTheme gotcha), and Plausible as the lone third-party service. Also ignores .claude/. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> * Remove ngrok.yml No longer needed — the Remotion Lambda webhook it tunneled for is gone. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> * Remove GitHub workflow update-site.yml re-uploaded the Remotion Lambda site on pushes — Lambda rendering is gone, so the workflow has nothing to do. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> * Migrate from Next.js to Vite Replace the Next.js App Router with Vite + React SPA and TanStack Router. The app was already fully client-side, so Next was only providing dev server, bundler and routing — Vite gives faster startup, a plain static build, and drops next, next-plausible, next-themes, eslint-config-next. - Static index.html owns the head (OG, Twitter, favicon, fontStretch shim) - Code-based TanStack Router tree in src/routes.tsx - Pages moved from src/app/ to src/pages/; layouts collapse into MyShell - Hardcoded dark theme via <html class="dark"> — no theme provider - import.meta.env.VITE_* replaces NEXT_PUBLIC_* - Jest switched from next/jest to plain ts-jest - package type set to module; CJS configs renamed to .cjs Also refresh the landing page with a "100% free — No account" tag and a new open-source section linking to the repo and GitHub Sponsors. * Add open-source README and GitHub FUNDING config Rewrite the README as a standard OSS readme (features, stack, local setup, scripts, env vars, sponsor link) and add .github/FUNDING.yml so the Sponsor button shows up on the repo. * Add CI workflow and format source with Prettier Run ESLint, Prettier check, and Jest on every push to main and every PR. Also add a format:check script and run prettier --write across src/ so the new check passes from day one. --------- Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Three things bundled together so the repo can ship as a free, open-source, fully client-side app:
1. Rip out the backend
Every server-side system is gone; everything runs in the browser.
localStorageundercodevideo:snippets:v1(src/lib/snippet-storage.ts). No more Postgres/Prisma.@remotion/web-renderergenerates videos in the browser via WebCodecs — no AWS Lambda, no credits./[snippetSlug]): deleted — cross-device sharing required a backend.4.0.68→4.0.448.<canvas>(gradient-canvas.tsx); web-renderer doesn't supportradial-gradientCSS.fontStretchsetter shimmed (canvas-shim.ts) to accept the"100%"value modern browsers emit forfont-stretch: normal.@hookform/resolvers,react-hook-form,uuid,lru-cache,react-type-animation,@mdx-js/*,@next/mdx,remark-prism,@types/uuid,@types/mdx.2. Migrate from Next.js to Vite
With no server code left, Next was only providing a dev server, bundler, and routing shim. Vite gives faster startup, a plain static
dist/, and lets us dropnext,next-plausible,next-themes,eslint-config-next.index.htmlowns the head (OG, Twitter, favicon, fontStretch shim inline<script>).src/routes.tsx— 4 routes.src/app/→src/pages/;/my/*layout collapses intoMyShell.<html class="dark">— no theme provider.import.meta.env.VITE_*replacesNEXT_PUBLIC_*(VITE_BASE_URL,VITE_PLAUSIBLE_DOMAIN).src/main.tsxwhen the env var is set.next/jestto plaints-jest.package.jsonis now"type": "module"; CJS configs renamed to.cjsto silence Vite's CJS Node API deprecation warning.3. Open source prep
README.mdas a standard OSS readme (features, stack, local setup, scripts, env vars, sponsor link)..github/FUNDING.ymlto enable the GitHub Sponsor button.Test plan
npm installcompletes without pulling next/next-auth/stripe/prisma/@remotion/lambdanpm run dev— no Vite CJS deprecation warning; app loads on :3000npm run build && npm start— production build serves all routesnpm test— Jest suite passesnpm run lint— clean/my/snippets— empty state auto-seeds the tutorial snippet in localStorage<slug>.mp4/helprenders with prose styling