Master video capture, uploads, user authentication, and dynamic sharing features step-by-step, all while building a full stack screen recording and video sharing platform using Next.js and Bunny!
⭐ Join JS Mastery Pro: https://jsm.dev/snapcast-jsmpro
💎 Become a Top 1% Next.js Developer: https://jsm.dev/snapcast-nextjs
👉 Bunny (create your free account and get one extra free month): https://jsm.dev/jsm-bunny
1. Go to your Account Settings: https://jsm.dev/redeem-bunny and update your Personal Details
2. If a pop-up asks for your card details, simply close it — you don’t need to enter any payment info.
3. Go to the Billing section, click Enter Promo Code, and use the code: JSMASTERY
Note: If the “Enter Promo Code” option doesn’t appear immediately, try refreshing the page.
📁 Free Video Kit (Code, Design, Repo, Guide): https://jsm.dev/snapcast-kit
🎨 Tailwind v4 Crash Course - https://jsm.dev/snapcast-tailwindv4
Arcjet (bot detection, rate limiting, attack protection, and more): https://jsm.dev/snapcast-arcjet
WebStorm: https://jsm.dev/snapcast-webstorm
Junie AI: https://jsm.dev/snapcast-junie
Rate us on TrustPilot: https://jsm.dev/trustpilot
https://discord.com/invite/n6EdbFJ https://twitter.com/jsmasterypro https://instagram.com/javascriptmastery https://linkedin.com/company/javascriptmastery
Business Inquiries: [email protected]
Time Stamps:
00:00:00 — Introduction
00:04:16 — Setup Next.js
00:12:04 — Home Page UI
00:38:28 — Video Card
00:54:54 — Authentication UI
01:01:49 — Authentication Logic
01:06:21 — Database Setup
01:28:19 — Upload Page
02:06:19 — Setup Bunny for Video Upload
02:42:53 — Implement Arcjet
03:04:00 — Home Page (Fetching Data)
03:20:55 — Video Detail Page
03:40:47 — Recording Feature
04:07:27 — User Profile Page
04:14:35 - Deployment