KeyFrame

Inspiration We wanted to make green-screen style background removal feel as simple as using a modern web app—no heavy editing software, no complicated setup. The idea was to help creators quickly turn raw footage into clean, usable clips.

What it does Untitled lets users:

Create an account and sign in Upload a video and start a keying/render job Track job progress/status Download the processed output once it’s done How we built it Frontend: React + Vite + React Router for fast iteration and a clean auth + dashboard flow. Backend: Node.js + Express APIs with request validation, JWT authentication, and a small database to persist users and jobs. Auth: /api/auth/signup, /api/auth/login, /api/auth/me with tokens stored client-side for authenticated requests. Jobs pipeline: job records store status/progress so the UI can reflect rendering state and results. Challenges we ran into Debugging failures end-to-end: frontend often only shows a generic HTTP error (like a 500) while the real issue is in backend logs. Validation + UX: enforcing rules (email format, password length, duplicates) without making signup frustrating. Keeping state consistent: handling auth loading, redirects, and protected routes cleanly. Local integration: making frontend ↔ backend communication smooth during development (ports, proxying, env vars). Accomplishments that we're proud of A complete full-stack flow from signup → login → authenticated session → job workflow A UI that’s clean, focused, and built around a simple creator experience A backend structure that’s easy to extend (more job types, better progress events, richer job metadata) What we learned Schema-based validation prevents a lot of subtle bugs and unclear errors. “Good errors” matter: consistent API error shapes + server-side logging dramatically reduces debugging time. Designing job status/progress early makes async workflows much easier to scale. What's next for Untitled Better observability: improved server logs + user-facing error messages (especially for failed jobs). Richer job controls: cancel/retry, more detailed progress steps, history and filtering. Stronger auth + security: rate limiting, email verification, safer token storage options. Quality upgrades: more output formats, faster processing, and configurable keying settings for advanced users.

Built With

• css
• express.js
• node.js
• react
• router
• sqlite
• tailwind
• typescript
• vite
• zod