Build a Pair Programming Finder with Video & Screen Share (Next.js, Shadcn, Tailwind, Typescript)

Be sure to checkout Stream (the sponsor of this video) for a great SDK for doing video and messages. Use this link getstream.io/video/sdk/react/...
Link to the code: github.com/webdevcody/dev-finder
00:00:00 Overview
00:04:56 Next.js Setup
00:05:59 Shadcn Setup
00:06:29 Setup Darkmode
00:10:06 Database + Drizzle
00:23:51 Next-Auth
00:27:24 Setup Google OAuth
00:35:33 Create Room
00:54:41 Extend Session Type
01:01:42 Header
01:15:37 Show Rooms
01:18:46 Top Loader
01:22:22 Browse Page
01:33:44 Room Page
01:45:42 Tags
01:53:31 Tag list
01:56:46 Video Player
02:06:01 Token Provider
02:11:04 Participants List
02:13:30 Leave Call
02:15:07 Logout
02:16:57 Tag Filter
02:26:20 Clickable Tags
02:32:22 Track Own Rooms
02:37:45 Deleting Rooms
02:47:53 Middleware
02:50:17 Nav Authorization
02:58:55 Edit Room
03:13:25 Toasts
03:18:12 Header Issue
03:19:28 Delete Account
03:28:59 Placeholder State
03:32:35 Deploying
My Products
📖 ProjectPlannerAI: projectplannerai.com
🤖 IconGeneratorAI: icongeneratorai.com
📝 ThumbnailCritique: thumbnailcritique.com
Useful Links
💬 Discord: / discord
🔔 Newsletter: newsletter.webdevcody.com/
📁 GitHub: github.com/webdevcody
📺 Twitch: / webdevcody
🤖 Website: webdevcody.com
🐦 Twitter: / webdevcody

Пікірлер: 133

  • @amt.7rambo670
    @amt.7rambo6702 ай бұрын

    the only guy whos every video feels like a livestream

  • @WebDevCody

    @WebDevCody

    2 ай бұрын

    thanks man, that's the approach I go for in my teachings

  • @Jeikustus

    @Jeikustus

    2 ай бұрын

    He said this in his older videos, his goal is to make the video with no cuts so that if something went wrong in his code, he can show how he debugged and fixed it. (and I agree HAHA it looks like a livestream)

  • @novaflare-to3we

    @novaflare-to3we

    Ай бұрын

    For real, I hope he won't change his style of teaching. I like how he did like a "real dev" would do when starting and making on their own project. You need to know how to read documentations on tools and libraries you want to use for your application. Please, Cody don't change man. Thank you! I don't mind spending more minutes just watching you set up "auth" or something.

  • @WebDevCody

    @WebDevCody

    Ай бұрын

    @@novaflare-to3we I hear you

  • @a7mdbest15
    @a7mdbest15Күн бұрын

    finally a creative good idea instead of the same tutorial you see in every web dev tutorial, thanks man

  • @nemeziz_prime
    @nemeziz_prime2 ай бұрын

    I'm so glad that some youtube dev channels like this are taking extra efforts to bring amazing dev projects to everyone! This project is unique, not like some clone or common project

  • @fluntimes
    @fluntimes2 ай бұрын

    Next.js, Shadcn, Tailwind, Typescript... I just love that combo. The ability to build things super fast and adding Zod to the mix just makes this a great project to learn from. Thanks!

  • @joan.paucar
    @joan.paucar2 ай бұрын

    Cody, I've watched the entire video at 2x, and I must say it's excellent. Learning everything from a single video instead of searching through multiple sources is incredibly convenient. Thanks man 👏

  • @dalar2
    @dalar22 ай бұрын

    This is incredible - think I'm gonna watch the whole thing first then watch again and build it.

  • @AliMousaviNizhad
    @AliMousaviNizhadАй бұрын

    Although that I am not that professional as Cody, but watching him doing real time coding gives me a huge confidence to become a good programmer in the future ❤

  • @WebDevCody

    @WebDevCody

    Ай бұрын

    You got this!

  • @tracetv8115
    @tracetv81152 ай бұрын

    I love to watch experts at their craft. I am not familiar with next, postgre but everything is so clear and nice to follow! Keep up ur great work buddy!

  • @huynhphatat3919
    @huynhphatat39192 ай бұрын

    I like you making this type of video. Fullstack project with ReactJS - NextJS. And thank you for sharing your knowledge

  • @aimanelaaqdi5245
    @aimanelaaqdi52452 ай бұрын

    Hey Cody, quick handy shortcut: Option + Shift + O to remove automatically unused imports :)

  • @MyCodingDiarie
    @MyCodingDiarie2 ай бұрын

    You're doing a fantastic job. Don't ever stop creating!

  • @irfansaeedkhan7242
    @irfansaeedkhan72422 ай бұрын

    wow this is what we wanted, a practical app, solves real world problem, also full of learning, i request in your next project make working rich text editor in which mentions hashtags emojis work properly for edit copy paste and posts and fetched from database, there is no practical tutorial on that, everyone makes fb insta twiter clone but miss the part which is editor and posts, which be reshared, multiple images can be added, retweeted, other person can reshare you post etc

  • @HimanshuKumar-hp1vj
    @HimanshuKumar-hp1vj2 ай бұрын

    That's awesome i will build that after completing my current project

  • @uminhtetoo
    @uminhtetoo2 ай бұрын

    Thank you so much for sharing your experience and knowledge, Sir.

  • @roylaw2866
    @roylaw2866Ай бұрын

    Super awesome tutorial. Thanks Cody!

  • @k4f
    @k4f2 ай бұрын

    You’ve been killing it bro! Loving the content! Very grateful

  • @MyCodingDiarie
    @MyCodingDiarie2 ай бұрын

    Your videos always make my day. Keep shining!

  • @smithofcode.
    @smithofcode.2 ай бұрын

    Cool project love to see you build something with appwrite

  • @thespiritualjourney369
    @thespiritualjourney3692 ай бұрын

    wow! again an awesome video. Keep going!. love ur content, ur efforts on making all of this. and congrats on 200K.

  • @insensibility
    @insensibility2 ай бұрын

    Happy 200K cody! Happy to be here from the start! :'>

  • @WebDevCody

    @WebDevCody

    2 ай бұрын

    Thanks man!

  • @joshuastories
    @joshuastories2 ай бұрын

    Thank you very much for all you do. Really, really appreciate it. 🙏

  • @juanvieira8249
    @juanvieira82492 ай бұрын

    You are killing it man O.o, thanks!

  • @user-jm1qz4dj9l
    @user-jm1qz4dj9l2 ай бұрын

    You are incredible! my goal as a programmer

  • @patolorde
    @patolorde2 ай бұрын

    I think this is actually a good project to push

  • @alexenax1109
    @alexenax11092 ай бұрын

    Loved this tutorial!

  • @user-gy7te1ql3g
    @user-gy7te1ql3gАй бұрын

    Good content and method of its presentation. I would suggest to add data verification on the server side as required measures for security. Also error handling and logging whould be beneficial for those who are new to it

  • @ardianhotii
    @ardianhotii2 ай бұрын

    Very nice video, thank you for sharing this and also building these good and helpful apps ❤❤

  • @mutasimahmed8975
    @mutasimahmed89752 ай бұрын

    I was trying to build the same thing thanks

  • @DanteMishima
    @DanteMishima2 ай бұрын

    Thank you Cody for reminding me why I stopped dealing with this next stuff

  • @WebDevCody

    @WebDevCody

    2 ай бұрын

    for real man

  • @AjaySingh-jz8qx
    @AjaySingh-jz8qx2 ай бұрын

    OMG Mind blown after watching this

  • @Raphael-jo1rp
    @Raphael-jo1rp17 күн бұрын

    Small update on Drizzle Studio for those who face a problem to access it: 1/ update drizzle kit: npm i drizzle-kit@latest -D 2/ in the drizzle.config.ts, change driver to dialect and connectionString to url 3/ restart your studio: npm run db:studio It should work just fine.

  • @ericsonl_
    @ericsonl_2 ай бұрын

    Awesome tutorial 🔥

  • @f4faysal
    @f4faysal2 ай бұрын

    Awesome i try this project really awesome

  • @mutasimahmed8975
    @mutasimahmed89752 ай бұрын

    Thank you please make a part 2 with more features such as screen share , collaborative code editor

  • @WebDevCody

    @WebDevCody

    2 ай бұрын

    this tutorial had screen share capabilities. It is built into getstream.io

  • @samuelebarbiera1075
    @samuelebarbiera10752 ай бұрын

    Congrats to the 200k!

  • @lotfijbeli1471
    @lotfijbeli14712 ай бұрын

    keeep creating! thank you

  • @alexandrudinca3406
    @alexandrudinca3406Ай бұрын

    The information presented in this video based on the application is very good!! I was curious about one aspect, if for such an application or for the current application, role-based structures can be integrated, protected pages for each role, and how you would approach such an aspect. Let's say we have roles for admin, user, and superuser.

  • @swastikpatel234
    @swastikpatel2342 ай бұрын

    vcool project , gonna follow for sure

  • @falasefemi3344
    @falasefemi33442 ай бұрын

    Lovely content thanks

  • @wasaabbi
    @wasaabbi2 ай бұрын

    what a cool idea

  • @sh3r1ff50
    @sh3r1ff502 ай бұрын

    W Project man

  • @iFunkMasterJ
    @iFunkMasterJ2 ай бұрын

    Nearly the exact same project is on my list of projects to build (different stack though). Competition incoming 🙂

  • @purvshah4260

    @purvshah4260

    2 ай бұрын

    liked your project ideas can you please share that list with me i am just done with the clones

  • @avinavkashyap8802

    @avinavkashyap8802

    2 ай бұрын

    @@purvshah4260 please have u deployed on vercel??

  • @barringtonlevy1941
    @barringtonlevy19412 ай бұрын

    This is a cool idea

  • @JollyCoding
    @JollyCoding2 ай бұрын

    Great choice on making the DB local, while a tiny bit harder for beginners than a flashy UI, they'll learn a useful skill for the future! PlanetScale reminded us we cant rely on free offerings from companies forever!

  • @o_glethorpe

    @o_glethorpe

    2 ай бұрын

    Could be worse really, remember parse? Just shut off and told us: here, host everything yourself.

  • @yongfengye
    @yongfengye2 ай бұрын

    thanks for you share

  • @Yahya_Umar
    @Yahya_Umar2 ай бұрын

    "Hello there! Just wanted to let you know that I'm eagerly awaiting your inventory management system project using Next.js. Looking forward to it!"

  • @mashuktamim
    @mashuktamim2 ай бұрын

    You are a gem bro. Love to have your linkedIn handle

  • @NizzyABI
    @NizzyABI2 ай бұрын

    What a video 🎉

  • @rawallon
    @rawallon2 ай бұрын

    LFG for devs? Nice idea

  • @gmd9767
    @gmd97672 ай бұрын

    @Cody, more Convex DB videos please ;-). Continue the great work though, your videos are sweet

  • @raphaeljaggerd3585
    @raphaeljaggerd35852 ай бұрын

    Please do an online coaching site next can go well with the skills learned from this tutorial

  • @codinginflow
    @codinginflow2 ай бұрын

    You one upped me here bruh

  • @avinavkashyap8802
    @avinavkashyap88022 ай бұрын

    please cover the deployment part on vercel

  • @criscabreras
    @criscabreras2 ай бұрын

    I would really love if you could do a tutorial for beginners with sveltekit, supabase and shadcn-svelte 🙏

  • @insensibility
    @insensibilityАй бұрын

    Hey, Cody. What theme and icons are you using here?

  • @hugomendez7659
    @hugomendez76592 ай бұрын

    Excellent video, but could you do projects like an e-commerce, house rentals, car sales, etc.? It's just my recommendation, good job. :)

  • @tsatsuadogla-bessa8732
    @tsatsuadogla-bessa87322 ай бұрын

    Aside tailwind UI/Shadcn UI examples are there other places you recommend to get tailwind components like a header, sidebar etc.

  • @WebDevCody

    @WebDevCody

    2 ай бұрын

    I'm sure there are many out there

  • @samiranroyy1700
    @samiranroyy17002 ай бұрын

    Sir ❤

  • @npereira3227
    @npereira32272 ай бұрын

    This is a great idea and I'd actually love to use it. Is it going to be hosted live?

  • @WebDevCody

    @WebDevCody

    2 ай бұрын

    Maybe I could

  • @jordan9506
    @jordan950623 күн бұрын

    What do you think about Clerk auth and what are the pros/cons of using it in comparison to NextAuth?

  • @WebDevCody

    @WebDevCody

    23 күн бұрын

    I find clerk much better the next auth, but some people don’t like paid auth services

  • @CodeZakk
    @CodeZakk2 ай бұрын

    hi thanks. i have a question which is better should you use nextjs fullstack or nextjs with backend framework like express or nestjs. in which situation you should use nextjs fullStack thanks!

  • @WebDevCody

    @WebDevCody

    2 ай бұрын

    It depends, all in one is easier to deploy and develop on

  • @HSKdev
    @HSKdev2 ай бұрын

    How to make that cool blur background? Can you share the code?

  • @vanshvasishtha7082
    @vanshvasishtha7082Ай бұрын

    Hey Cody, Amazing Content, just want to deploy this in vercel, How to do this ? can you share some references for that, it will be helpful.

  • @purvshah4260

    @purvshah4260

    Ай бұрын

    did you deploy it bro i also need help !!

  • @vanshvasishtha7082

    @vanshvasishtha7082

    Ай бұрын

    @@purvshah4260 Finished with the Project today, was doing some changes on my end, Will be trying to deploy it on Vercel, Though railway also gives you 5 $ Credits. will share something if i get any resources

  • @felixjumason4859
    @felixjumason48592 ай бұрын

    can on use vercel ?

  • @vanshvasishtha7082
    @vanshvasishtha7082Ай бұрын

    Hey Cody, after initializing a Different authConfig in auth, i am still getting this error "PostgresError: insert or update on table "room" violates foreign key constraint "room_userId_user_id_fk""

  • @vanshvasishtha7082

    @vanshvasishtha7082

    Ай бұрын

    Solved it by myself.*

  • @purvshah4260
    @purvshah42602 ай бұрын

    I want to deploy this on vercel should i follow the same common procedure which all the next js app follow or this app requires a different way to host it live ??? Please help me to deploy it on vercel

  • @WebDevCody

    @WebDevCody

    2 ай бұрын

    same approach, point vercel to your repo, setup env variables, find a database host, point your vercel to your prod database, run migration scripts against your prod database

  • @avinavkashyap8802

    @avinavkashyap8802

    2 ай бұрын

    Did you deploy it??

  • @PhillipLippi
    @PhillipLippi2 ай бұрын

    Dude, how do you come out with these ideas? I mean, you're a very creative person but how do you arrange to make these personal projects?

  • @gauravsharma1251
    @gauravsharma1251Ай бұрын

    Error: {"code":"","StatusCode":"","message":"initial WS connection could not be established","isWSFailure":true} while setting streamio

  • @justigo86

    @justigo86

    26 күн бұрын

    Not sure if you ever figured this out, but I had the same issue. For me, it was because the dotenv stream API key was not pulling into the video-player.tsx file. This was because I didn't use the same naming convention for the API_KEY variable in the dotenv file. If you do not start your variable name with NEXT_PUBLIC_ then your variable won't be recognized in a 'use client' file. It's a NextJS requirement.

  • @ameenulhaq8188
    @ameenulhaq818811 күн бұрын

    question: do you guys get paid by all these platforms you mentioned other than stream? e.g. nextjs vercel, nextauth, dirzzle, shadcn etc?

  • @WebDevCody

    @WebDevCody

    11 күн бұрын

    No, only stream is who sponsored this video. Everything else is just fee and open source tools to use (other than vercel). Vercel I used because it makes deployment easy compared to many other solutions, so it often makes tutorials easier to follow.

  • @AyoubNachat-wm4no
    @AyoubNachat-wm4no2 ай бұрын

    nice project, can i get the vscode theme you are using

  • @Taha_tr

    @Taha_tr

    2 ай бұрын

    did you find the theme ?

  • @AyoubNachat-wm4no

    @AyoubNachat-wm4no

    2 ай бұрын

    @@Taha_tr no

  • @purvshah4260
    @purvshah42602 ай бұрын

    when i exit the video meeting it closes the room but my web-cam and mic is still working ...How to fix that HELP !!!

  • @rhinom2012
    @rhinom20122 ай бұрын

    Why not configure force-dynamic on layout instead of adding noStore in every data access function to make the app dynamic?

  • @WebDevCody

    @WebDevCody

    2 ай бұрын

    that's an option, but I think the next team is going to start recommending use noStore since it's more flexibile

  • @muhammaduseram9405
    @muhammaduseram940528 күн бұрын

    did anyone deployed it on vercel?

  • @Manu-mr4mn
    @Manu-mr4mn2 ай бұрын

    Since Lucia Auth exists I no longer use next auth…Lucia Auth feels like what next auth should have been and the best thing about Lucia is that you can use it with whatever you want.

  • @farazrazi
    @farazrazi2 ай бұрын

    It would be helpful to have your pressed keys gets printed on screen for viewers.

  • @Enigma-fk7mh
    @Enigma-fk7mh19 күн бұрын

    After adding "use client" to room-card & user-room-card im getting this error : Import trace for requested module: ./node_modules/postgres/src/connection.js:1:0 Module not found: Can't resolve 'net' ./node_modules/postgres/src/index.js ./src/db/index.ts ./src/lib/auth.ts ./src/app/room-card.tsx I tried various fixes still not able to fix this, please help

  • @gold-junge91
    @gold-junge912 ай бұрын

    Thanks lot dude ❤ i have look so much full stack piece of sh*** videos, copy pasting his own stuff that is already working and not like you that go way that people have to go when they beginn!

  • @akuma_168
    @akuma_16825 күн бұрын

    how to do it without sdk? or will it be feasible to do it?

  • @avinavkashyap8802
    @avinavkashyap88022 ай бұрын

    Please show us how can we deploy it to vercel,please please ,please

  • @avinavkashyap8802

    @avinavkashyap8802

    2 ай бұрын

    so,when can we expect the deployment video sir??,I am eagerly waiting for it

  • @user-oi1hackzxpert
    @user-oi1hackzxpert2 ай бұрын

    bro which vscode theme u r using ??????????????????

  • @Taha_tr

    @Taha_tr

    2 ай бұрын

    did you find the theme ?

  • @user-oi1hackzxpert

    @user-oi1hackzxpert

    2 ай бұрын

    @@Taha_tr no,....did you know?

  • @vanshvasishtha7082
    @vanshvasishtha70822 ай бұрын

    33:21 IF YOU GET an error that Docker Desktop is Shutting Down, delete this Folder C:\Users\\AppData\Roaming\Docker folder fixes the problem and restart the PC

  • @radhagovindbhaktirasa
    @radhagovindbhaktirasa11 күн бұрын

    how the other user join the room what is logic behind that

  • @Anshucodes
    @Anshucodes2 ай бұрын

    you should add a docker compose file !!

  • @WebDevCody

    @WebDevCody

    2 ай бұрын

    That’s what I did in this tutorial

  • @Anshucodes

    @Anshucodes

    2 ай бұрын

    @@WebDevCody oops !! i forgot to check the source code !

  • @user-nx7ml9cu3t
    @user-nx7ml9cu3tКүн бұрын

    Does this project uses webrtc , websocket something like that or what?

  • @WebDevCody

    @WebDevCody

    Күн бұрын

    I think it uses webrtc under the hood

  • @user-nx7ml9cu3t

    @user-nx7ml9cu3t

    Күн бұрын

    @@WebDevCody Thanks for the reply

  • @animeshsharma7332
    @animeshsharma7332Ай бұрын

    Why does my webcam light stays on even after I switch the camera off or leave the call?

  • @animeshsharma7332

    @animeshsharma7332

    Ай бұрын

    NVM fixed the issue, added another useEffect solved the problem. useEffect(() => { return () => { navigator.mediaDevices .getUserMedia({ video: true, audio: true }) .then((stream) => { stream.getTracks().forEach((track) => track.stop()); }); }; }, [call]);

  • @amt.7rambo670
    @amt.7rambo6702 ай бұрын

    Bro is there anything paid software that u are using to make this project..?

  • @yanismorzak4704
    @yanismorzak470424 күн бұрын

    Hello :) Is this responsive ?

  • @mutasimahmed8975
    @mutasimahmed89752 ай бұрын

    can you add collaborative code editor like in the thumbnail

  • @WebDevCody

    @WebDevCody

    2 ай бұрын

    eh that's a different type of project. vscode already has an extension that does that

  • @purvshah4260
    @purvshah42602 ай бұрын

    Is there any free way to deploy this database?

  • @WebDevCody

    @WebDevCody

    2 ай бұрын

    find a free postgres database service

  • @amt.7rambo670
    @amt.7rambo6702 ай бұрын

    14:00

  • @cas818028
    @cas8180282 ай бұрын

    Cody you are always trying to new dbs, thought on xata? 15gb free tier

  • @WebDevCody

    @WebDevCody

    2 ай бұрын

    Never used it

  • @roshanCodeCortex
    @roshanCodeCortex2 ай бұрын

    Did you use any paid software???

  • @patolorde
    @patolorde2 ай бұрын

    Why not use convex?

  • @WebDevCody

    @WebDevCody

    2 ай бұрын

    people asked for just next.js with next-auth so I decided to just keep it basic for this tutorial - I'm sure I'll still be doing more convex tutorials in the future