Building an AI-Powered Next.js 14 Web App with People Detection & Recording | using ShadcnUI
939Learn how to build an AI-powered web app using ShadcnUI & Next.js 14. This tutorial will walk you through people detection & recording features, incorporating TailwindCSS and OpenAI technology TensorflowJS. Ready to elevate your web development skills along with Artificial Intelligence? Let's get started!
Live Website: https://watchtower-ai.vercel.app/
Github repository: https://github.com/KoushikJit/watchtower-ai
Timestamps :
0:00 Intro
1:39 Creating a Hello World app
4:52 Installing UI Library shadcn/ui
7:12 Adding Webcam
9:14 Layout using tailwind.css
15:53 Implementing Dark Mode
19:20 Mirror webcam video
21:00 More layout using shadcn & tailwind
25:50 Using Sonner from shadcn/ui
26:54 Adding animation to Buttons
27:59 Popover component for volume slider
31:30 Adding audio for notification sounds
34:48 Layout code for wiki section
37:20 Implementing Tensorflow
39:08 Loading cocossd model
42:16 Loading page when model is loading
44:46 Running predictions with model
50:05 Draw objects on canvas
58:45 Updating draw logic for mirrored video
1:03:38 Add recording feature
1:18:00 Add buttons to wiki section
1:20:03 Image capture
1:21:55 Adding social handles
1:23:06 Deployment
I created a Next.js 14 website that uses artificial intelligence to detect people, records a 30-second clip, and saves it for review later.
In this video I'll show how I made it from scratch, and deployed it to the cloud, so that everyone can use it.
The Link of the actual website has been shared below.
You don't need any prior knowledge of either NextJS, Tensorflow, or any of the packages that I am going to use.
All you need is NodeJS installed and a text editor like VS Code.