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

Поділитися
Вставка
  • Опубліковано 9 січ 2025

КОМЕНТАРІ • 154

  • @amt.7rambo670
    @amt.7rambo670 9 місяців тому +70

    the only guy whos every video feels like a livestream

    • @WebDevCody
      @WebDevCody  9 місяців тому +10

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

    • @Jeikustus
      @Jeikustus 9 місяців тому +3

      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 9 місяців тому +6

      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  9 місяців тому +4

      @@novaflare-to3we I hear you

  • @nemeziz_prime
    @nemeziz_prime 9 місяців тому +15

    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
    @fluntimes 9 місяців тому +5

    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!

  • @irfansaeedkhan7242
    @irfansaeedkhan7242 9 місяців тому +5

    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

  • @brayan_joan
    @brayan_joan 9 місяців тому +3

    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 👏

  • @AliMousaviNizhad
    @AliMousaviNizhad 9 місяців тому +3

    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 ❤

  • @utkarshtripathi4785
    @utkarshtripathi4785 2 місяці тому

    Completed this project. Loved your way of making things easier . Now on the way to add few more features to this app. Thanks Cody.

  • @aimanelaaqdi5245
    @aimanelaaqdi5245 9 місяців тому +6

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

  • @a7mdbest15
    @a7mdbest15 7 місяців тому

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

  • @Dalamain
    @Dalamain 9 місяців тому +2

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

  • @insensibility
    @insensibility 9 місяців тому +2

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

  • @huynhphatat3919
    @huynhphatat3919 9 місяців тому +2

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

  • @AlexU-o1u
    @AlexU-o1u 9 місяців тому +1

    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

  • @k4f
    @k4f 9 місяців тому +1

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

  • @tracetv8115
    @tracetv8115 9 місяців тому +1

    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!

  • @MyCodingDiary
    @MyCodingDiary 9 місяців тому +1

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

  • @vanshvasishtha7082
    @vanshvasishtha7082 9 місяців тому +1

    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

  • @MyCodingDiary
    @MyCodingDiary 9 місяців тому +1

    Your videos always make my day. Keep shining!

  • @DanteMishima
    @DanteMishima 9 місяців тому

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

  • @HimanshuKumar-hp1vj
    @HimanshuKumar-hp1vj 9 місяців тому +1

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

  • @uminhtetoo
    @uminhtetoo 9 місяців тому +1

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

  • @thespiritualjourney369
    @thespiritualjourney369 9 місяців тому +1

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

  • @smithofcode.
    @smithofcode. 9 місяців тому +1

    Cool project love to see you build something with appwrite

  • @roylaw2866
    @roylaw2866 8 місяців тому

    Super awesome tutorial. Thanks Cody!

  • @juanvieira8249
    @juanvieira8249 9 місяців тому +1

    You are killing it man O.o, thanks!

  • @alexenax1109
    @alexenax1109 9 місяців тому +1

    Loved this tutorial!

  • @Yahya_Umar
    @Yahya_Umar 9 місяців тому

    "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!"

  • @alexandrudinca3406
    @alexandrudinca3406 9 місяців тому

    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.

  • @miladhosayni5045
    @miladhosayni5045 4 місяці тому +1

    It was great 👍, thank you, but one question, what should be done to discuss making money from it?

  • @Lyric-w1r
    @Lyric-w1r 9 місяців тому

    You are incredible! my goal as a programmer

  • @codinginflow
    @codinginflow 9 місяців тому

    You one upped me here bruh

  • @patolorde
    @patolorde 9 місяців тому

    I think this is actually a good project to push

  • @sh3r1ff50
    @sh3r1ff50 9 місяців тому +1

    W Project man

  • @iFunkMasterJ
    @iFunkMasterJ 9 місяців тому +1

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

    • @purvshah4260
      @purvshah4260 9 місяців тому

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

    • @avinavkashyap8802
      @avinavkashyap8802 9 місяців тому

      @@purvshah4260 please have u deployed on vercel??

  • @joshuastories
    @joshuastories 9 місяців тому

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

  • @JollyCoding
    @JollyCoding 9 місяців тому +3

    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 9 місяців тому +1

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

  • @Raphael-jo1rp
    @Raphael-jo1rp 8 місяців тому

    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.

    • @Sanjaysview
      @Sanjaysview 7 місяців тому

      Hey, could you able to complete the project. Im planning to use this as my mini project in academics time is crucial for me if stuck in some error loop it gets worse for my grades.
      Could you confirm that we build this by fallowing tut. It really helps thanks

    • @HONOREDONE-hk7pt
      @HONOREDONE-hk7pt 6 місяців тому

      @@Sanjaysview bro did you build this one?

    • @Sanjaysview
      @Sanjaysview 6 місяців тому

      @@HONOREDONE-hk7pt nah bro had some issues so don't have time to fix will try later

    • @HONOREDONE-hk7pt
      @HONOREDONE-hk7pt 6 місяців тому

      @@Sanjaysview but is it running properly, though?

  • @purvshah4260
    @purvshah4260 9 місяців тому +1

    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  9 місяців тому +1

      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 9 місяців тому

      Did you deploy it??

  • @ardianhotii
    @ardianhotii 9 місяців тому

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

  • @AjaySingh-jz8qx
    @AjaySingh-jz8qx 9 місяців тому

    OMG Mind blown after watching this

  • @avinavkashyap8802
    @avinavkashyap8802 9 місяців тому +1

    please cover the deployment part on vercel

  • @ericsonl_
    @ericsonl_ 9 місяців тому

    Awesome tutorial 🔥

  • @tsatsujnr
    @tsatsujnr 9 місяців тому

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

    • @WebDevCody
      @WebDevCody  9 місяців тому

      I'm sure there are many out there

  • @vanshvasishtha7082
    @vanshvasishtha7082 9 місяців тому +1

    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 9 місяців тому

      Solved it by myself.*

    • @Sanjaysview
      @Sanjaysview 7 місяців тому

      @@vanshvasishtha7082 bro could you explain the fix

  • @insensibility
    @insensibility 8 місяців тому

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

  • @anantdadhich7137
    @anantdadhich7137 7 місяців тому

    Sir this is very nice vedio I would have one question to you which type we should use on tags when we use prisma orm ..string of array or json

  • @felixjumason4859
    @felixjumason4859 9 місяців тому +2

    can on use vercel ?

  • @CodeZakk
    @CodeZakk 9 місяців тому

    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  9 місяців тому

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

  • @arthmasand1762
    @arthmasand1762 3 місяці тому

    when trying to run the command npm run db:push , i am facing the following error: Unrecognized options for command 'push:pg': --config. Pls help

  • @samuelebarbiera1075
    @samuelebarbiera1075 9 місяців тому

    Congrats to the 200k!

  • @raphaeljaggerd3585
    @raphaeljaggerd3585 9 місяців тому

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

  • @gauravsharma1251
    @gauravsharma1251 9 місяців тому +1

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

    • @justigo86
      @justigo86 8 місяців тому

      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.

  • @Enigma-fk7mh
    @Enigma-fk7mh 8 місяців тому

    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

  • @vanshvasishtha7082
    @vanshvasishtha7082 9 місяців тому +1

    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 9 місяців тому

      did you deploy it bro i also need help !!

    • @vanshvasishtha7082
      @vanshvasishtha7082 8 місяців тому

      @@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

  • @gmd9767
    @gmd9767 9 місяців тому

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

  • @HSKdev
    @HSKdev 9 місяців тому

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

  • @npereira3227
    @npereira3227 9 місяців тому

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

  • @purvshah4260
    @purvshah4260 9 місяців тому

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

  • @Ray-b8d5y
    @Ray-b8d5y 7 місяців тому +1

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

    • @WebDevCody
      @WebDevCody  7 місяців тому +1

      I think it uses webrtc under the hood

    • @Ray-b8d5y
      @Ray-b8d5y 7 місяців тому

      @@WebDevCody Thanks for the reply

  • @f4faysal
    @f4faysal 9 місяців тому

    Awesome i try this project really awesome

  • @lotfijbeli1471
    @lotfijbeli1471 9 місяців тому

    keeep creating! thank you

  • @hugomendez7659
    @hugomendez7659 9 місяців тому

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

  • @HONOREDONE-hk7pt
    @HONOREDONE-hk7pt 6 місяців тому

    Cannot find module 'drizzle-orm/postgres-js' or its corresponding type declarations. seems like they don't want me to make this project.

  • @mashuktamim
    @mashuktamim 9 місяців тому

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

  • @mandarliev
    @mandarliev 8 місяців тому

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

    • @WebDevCody
      @WebDevCody  8 місяців тому +1

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

  • @AyoubNachat-wm4no
    @AyoubNachat-wm4no 9 місяців тому +1

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

  • @swastikpatel234
    @swastikpatel234 9 місяців тому

    vcool project , gonna follow for sure

  • @rhinom2012
    @rhinom2012 9 місяців тому

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

    • @WebDevCody
      @WebDevCody  9 місяців тому

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

  • @ameenulhaq8188
    @ameenulhaq8188 7 місяців тому

    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  7 місяців тому

      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.

  • @mutasimahmed8975
    @mutasimahmed8975 9 місяців тому +1

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

    • @WebDevCody
      @WebDevCody  9 місяців тому

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

  • @Manu-mr4mn
    @Manu-mr4mn 9 місяців тому

    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.

  • @mutasimahmed8975
    @mutasimahmed8975 9 місяців тому

    I was trying to build the same thing thanks

  • @criscabreras
    @criscabreras 9 місяців тому

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

  • @billwhite515
    @billwhite515 6 місяців тому

    I recently found this tutorial but I was curious if anyone was having issues with drizzle-kit-0.22.7 taking forever to pull the schema or not working at all

    • @pheonixtutorial3736
      @pheonixtutorial3736 4 місяці тому

      yes, same issue facing
      but now im not even able to run db:push

  • @akuma_168
    @akuma_168 8 місяців тому

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

  • @PhillipLippi
    @PhillipLippi 9 місяців тому

    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?

  • @muhammaduseram9405
    @muhammaduseram9405 8 місяців тому +1

    did anyone deployed it on vercel?

  • @avinavkashyap8802
    @avinavkashyap8802 9 місяців тому +1

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

    • @avinavkashyap8802
      @avinavkashyap8802 9 місяців тому

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

  • @animeshsharma7332
    @animeshsharma7332 8 місяців тому

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

    • @animeshsharma7332
      @animeshsharma7332 8 місяців тому

      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]);

  • @NizzyABI
    @NizzyABI 9 місяців тому

    What a video 🎉

  • @falasefemi3344
    @falasefemi3344 9 місяців тому

    Lovely content thanks

  • @pasionclicks3968
    @pasionclicks3968 5 місяців тому

    hey in this what all are not free , for production?

    • @pasionclicks3968
      @pasionclicks3968 5 місяців тому

      What all are paid things to do this project?
      Can we make this all at free?

  • @BuildItWithSagar
    @BuildItWithSagar 7 місяців тому

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

  • @barringtonlevy1941
    @barringtonlevy1941 9 місяців тому

    This is a cool idea

  • @rawallon
    @rawallon 9 місяців тому

    LFG for devs? Nice idea

  • @wasaabbi
    @wasaabbi 9 місяців тому

    what a cool idea

  • @amt.7rambo670
    @amt.7rambo670 9 місяців тому

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

  • @roshanCodeCortex
    @roshanCodeCortex 9 місяців тому +1

    Did you use any paid software???

  • @user-oi1hackzxpert
    @user-oi1hackzxpert 9 місяців тому

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

    • @00_taha
      @00_taha 9 місяців тому

      did you find the theme ?

    • @user-oi1hackzxpert
      @user-oi1hackzxpert 9 місяців тому

      @@00_taha no,....did you know?

  • @purvshah4260
    @purvshah4260 9 місяців тому

    Is there any free way to deploy this database?

    • @WebDevCody
      @WebDevCody  9 місяців тому

      find a free postgres database service

  • @gravitygaming4295
    @gravitygaming4295 3 місяці тому

    i am still seeing you need to be logged in error please help anyone

  • @farazrazi
    @farazrazi 9 місяців тому

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

  • @yongfengye
    @yongfengye 9 місяців тому

    thanks for you share

  • @gold-junge91
    @gold-junge91 9 місяців тому

    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!

  • @mutasimahmed8975
    @mutasimahmed8975 9 місяців тому

    can you add collaborative code editor like in the thumbnail

    • @WebDevCody
      @WebDevCody  9 місяців тому

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

  • @yanismorzak4704
    @yanismorzak4704 8 місяців тому

    Hello :)
    Is this responsive ?

  • @patolorde
    @patolorde 9 місяців тому

    Why not use convex?

    • @WebDevCody
      @WebDevCody  9 місяців тому +1

      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

  • @keshavgarg8407
    @keshavgarg8407 5 місяців тому

    isn't this more like google meet clone with lesser features but labeled differently

  • @amt.7rambo670
    @amt.7rambo670 9 місяців тому

    14:00

  • @cas818028
    @cas818028 9 місяців тому

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