NextJS Full-Stack Video Conferencing App: { Let's Talk App }

Design the app interface in Figma to visualize layout and function. Organize assets in UI design folder and assets, source icons from the SVG repo, then push updates to GitHub.

Set up a figma team and project, design landing and home pages on a desktop frame, and showcase connect, communicate, and collaborate with Clark authentication.

Build a desktop home page with a navigation bar and four main menu boxes for upcoming, previous, recordings, and my room, plus a new meeting modal.

Learn how to design and prototype modals in Figma, creating a responsive overlay for instant meetings, join meetings, and schedule meetings with onClick triggers and centered overlays.

Design and prototype the meeting setup page for a nextjs video conferencing app, featuring a black video area, join with mic and camera off, and navigation to the meeting page.

Design a user interface for a nextjs video conferencing app, creating a meeting page with a black video area, invite button, and controls, upcoming, previous, recordings, and my room pages.

Install the latest Next.js, create the app, enable Tailwind CSS and app router, and run the dev server to explore the Next.js starter template.

Add authentication to a Next.js video conferencing app using Clerk, wrap the app in a Clerk provider, and configure login and register routes with env keys.

Create login and register pages using Clark's sign in and sign up components, apply the New Brutalism theme, and enable animations with Tailwind CSS v4 in globals.

Delete the initial app file, create a root group named main with home and meeting routes, and build a home layout with a navbar that renders children.

Create the main route layout for the lets talk app, rendering a guest landing page when no user is signed in and the home content for signed-in users via clerk.

Update the app metadata for seo with a new title and description, create a favicon, and build a navbar with links from constants using the shared CDN function.

Create NextJS home routes (my room, previous, upcoming, recordings) and implement a real-time date and time status bar on the home page using use client, useEffect, and setInterval.

Create the main right-hand menu with four items and use three Chack'n dialogues as triggers for new, join, and scheduled meetings, and render a menu item card for each item.

Create a client menu item component in a Next.js app with image, title, background color, hover color, and a click handler; style with global CSS and export the component.

Create a client main menu component as a grid of boxes, using three CDN dialogues with triggers and content, including title, description, meeting input, date picker.

Install the stream packages for back end and front end, generate user tokens with a Next.js server action, and set up client components for calls, video rendering, and camera controls.

wrap the app with a custom stream provider that initializes a stream video client using your api key and clark-authenticated user, generating a secure token on the server.

Create meeting function handles instant or scheduled meetings, validates inputs, generates a random id with crypto, creates or gets the meeting, updates members, and redirects with toasts.

Create a dynamic Next.js meeting page that reads the meeting id from the url, fetches call details with a custom hook, and renders a setup, meeting room, or not-allowed alert.

Create a client meeting setup component to manage user and call state, toggle mic and camera, join the meeting, and render the meeting room with grid or speaker layouts.

Implement an end call button component that renders only for the meeting owner, calls end call on click, and redirects to home using Next.js router.

Build and wire the remaining pages for a Next.js full-stack video conferencing app, including upcoming, previous, recordings, and my room, with a reusable call list and hook-driven data fetching.

Deploy your Next.js app to the internet by importing it into Vercel. Push changes from GitHub, run npm install --force, and set the domain with base URL.

Express gratitude to learners and reinforce the core concepts of building a NextJS full-stack video conferencing app for the Let's Talk App.