How I Built My First Screen Recording App with Next.js + Supabase

Hey everyone 👋

I recently finished building my first real-world project — a screen recording app inspired by Loom — and I wanted to share what I learned along the way.

🔧 Tech Stack I Used

Next.js (frontend + routing)

Supabase (Auth, Database, Storage)

TailwindCSS (styling)

💡 What I Learned

Setting up Google + email sign-in with Supabase Auth.

Recording both screen and webcam, then uploading videos directly to Supabase Storage.

Handling async video uploads without breaking the recording flow.

Adding modern UI touches that make the tool feel smooth and professional.

⚡ Cool Features I’m Adding Next

AI Eyes on Camera 👉 helps correct eye contact so videos look more natural, like you’re speaking directly to your audience.

AI Notes 👉 automatically generates meeting notes or video summaries after each recording.

A Chrome extension for instant one-click screen recording.

🌱 Why This Matters
Screen recording is one of the most powerful ways to share ideas, explain projects, or give feedback without endless meetings. Adding tools like AI Eyes on Camera and AI Notes makes the experience even better — you appear more confident on camera, and your viewers get a clear written summary right away.

I’d love to hear from others in this community — what features would you want in a modern screen recording app?

Thanks for reading, and if you’re starting out: building even a small project teaches you far more than just tutorials 🚀