Shadee Merhi
Shadee Merhi
  • 19
  • 224 132
Tailwind CSS + Next.JS 13 Tutorial - Building the YouTube UI 🚀
In this video, I build the TH-cam UI using Tailwind CSS and Next.JS 13. I build it entirely from scratch without any preparation to capture my raw thinking process when it comes to building UI’s.
✅ Tools and Concepts Covered:
🚀 Next 13 Fundamentals (Page Routing, Layouts & Global Components)
🚀 Tailwind CSS
🚀 Responsive Design
👉 Repo link: github.com/shadeemerhi/tailwind-next-youtubeui
👉 Tailwind/Next setup docs: tailwindcss.com/docs/guides/nextjs
❤️ Tips & Donations Link: paypal.me/shadeemerhi?country.x=CA&locale.x=en_US
( Thank you very much for your support!)
❗️ Please comment with any feedback, questions, or concerns!
👾 JOIN MY DISCORD FOR DIRECT ACCESS TO ME! I WANT TO HELP YOU! 👉 discord.gg/kFVVYbcy7D
Timestamps
0:00 - Intro
1:25 - Next 13 Layouts and Global Components
25:20 - Top Navigation
1:23:28 - Side Navigation (React multi-select navigation)
1:58:18 - Video Components
2:31:18 - Outro
มุมมอง: 10 354

วีดีโอ

Build a Search Bar with Next.js and Prisma (Search API endpoint)
มุมมอง 36Kปีที่แล้ว
In this video, we'll cover how to build full-stack search functionality into your Next.js application using Prisma. We'll look at how to add search query params to the URL, and use the search params to make a GET request to a /search API endpoint. ❤️ Tips & Donations Link: paypal.me/shadeemerhi?country.x=CA&locale.x=en_US ( Thank you very much for your support!) Code: github.com/shadeemerhi/nex...
Building a Nested Comments System with React
มุมมอง 13Kปีที่แล้ว
In this video, we will discuss building forum-like, deeply nested comment functionality as seen on Reddit, using React.js and Tailwind CSS 🚀 ❤️ Tips & Donations Link: paypal.me/shadeemerhi?country.x=CA&locale.x=en_US ( Thank you very much for your support!) This video is an extension of my 6-part Reddit series: th-cam.com/video/zhx9FUSuAsM/w-d-xo.html Join my growing Discord community to gain d...
Tailwind CSS Dark Mode with React (Next.JS)
มุมมอง 6Kปีที่แล้ว
Learn how to add dark mode to your React applications using Tailwind CSS. We will build 2 custom React hooks that will help us leverage our browsers local storage to apply dark mode utility classes to our React components. ❤️ Tips & Donations Link: paypal.me/shadeemerhi?country.x=CA&locale.x=en_US ( Thank you very much for your support!) 🔗 Resources GitHub Repo: [github.com/shadeemerhi/tailwind...
Realtime Chat App with NextJS, GraphQL, NodeJS, MongoDB, Prisma, TypeScript (iMessage Clone) 💬🔥 | P4
มุมมอง 10Kปีที่แล้ว
👉 Repo link (demo): github.com/shadeemerhi/imessage-graphql 👉 Repo link (video build): github.com/shadeemerhi/imessage-graphql-tutorial ❤️ Tips & Donations Link: paypal.me/shadeemerhi?country.x=CA&locale.x=en_US ( Thank you very much for your support!) ❗️This video is Part 4 of a multi-part series! Please check out Part 1 here if you're new to the series: th-cam.com/video/mj_Qe2jBYS4/w-d-xo.htm...
Realtime Chat App with NextJS, GraphQL, NodeJS, MongoDB, Prisma, TypeScript (iMessage Clone) 💬🔥 | P3
มุมมอง 9K2 ปีที่แล้ว
👉 Repo link: github.com/shadeemerhi/imessage-graphql ❤️ Tips & Donations Link: paypal.me/shadeemerhi?country.x=CA&locale.x=en_US ( Thank you very much for your support!) ❗️This video is Part 3 of a multi-part series. I'm currently working on the new parts and am planning to release them every 4-7, so be sure to subscribe for those! ❗️ Please comment with any feedback, questions, or concerns! 👾 ...
Realtime Chat App with NextJS, GraphQL, NodeJS, MongoDB, Prisma, TypeScript (iMessage Clone) 💬🔥 | P2
มุมมอง 8K2 ปีที่แล้ว
👉 Repo link: github.com/shadeemerhi/imessage-graphql ❤️ Tips & Donations Link: paypal.me/shadeemerhi?country.x=CA&locale.x=en_US ( Thank you very much for your support!) ❗️This video is Part 2 of a multi-part series. I'm currently working on the new parts and am planning to release them every 4-7, so be sure to subscribe for those! ❗️ Please comment with any feedback, questions, or concerns! 👾 ...
Realtime Chat App with NextJS, GraphQL, NodeJS, MongoDB, Prisma, TypeScript (iMessage Clone) 💬🔥 | P1
มุมมอง 47K2 ปีที่แล้ว
👉 Repo link: github.com/shadeemerhi/imessage-graphql ❤️ Tips & Donations Link: paypal.me/shadeemerhi?country.x=CA&locale.x=en_US ( Thank you very much for your support!) ❗️This video is Part 1 of a multi-part series. I'm currently working on the new parts and am planning to release them every few days, so be sure to subscribe for those! ❗️ Please comment with any feedback, questions, or concern...
Reddit Clone REACTJS Tutorial! (Next.js, Firebase v9, Chakra UI, TypeScript, Recoil) 🔥🚀 | PART 6
มุมมอง 6K2 ปีที่แล้ว
👉 Repo link: github.com/shadeemerhi/reddit-clone-yt ❤️ Tips & Donations Link: paypal.me/shadeemerhi?country.x=CA&locale.x=en_US ( Thank you very much for your support!) ❗️This video is the 6th and FINAL Part of a multi-part series. I'm going to be creating more builds and tutorials in the future so be sure to subscribe! ❗️ Please comment with any feedback, questions, or concerns! 👾 JOIN MY DISC...
Reddit Clone REACTJS Tutorial! (Next.js, Firebase v9, Chakra UI, TypeScript, Recoil) 🔥🚀 | PART 5
มุมมอง 6K2 ปีที่แล้ว
👉 Repo link: github.com/shadeemerhi/reddit-clone-yt ❤️ Tips & Donations Link: paypal.me/shadeemerhi?country.x=CA&locale.x=en_US ( Thank you very much for your support!) ❗️This video is PART 5 of a multi-part series. I'm currently working on the next and FINAL part, Part 6, which will be covering Firebase Security Rules and Deployment. Part 6 will be coming in a few days, so be sure to subscribe...
Reddit Clone REACTJS Tutorial! (Next.js, Firebase v9, Chakra UI, TypeScript, Recoil) 🔥🚀 | PART 4
มุมมอง 7K2 ปีที่แล้ว
👉 Repo link: github.com/shadeemerhi/reddit-clone-yt ❤️ Tips & Donations Link: paypal.me/shadeemerhi?country.x=CA&locale.x=en_US ( Thank you very much for your support!) ❗️This video is PART 4 of a multi-part series. I'm currently working on Part 5, which should be coming in a few days, so be sure to subscribe! ❗️ Please comment with any feedback, questions, or concerns! 👾 JOIN MY DISCORD FOR DI...
Reddit Clone REACTJS Tutorial! (Next.js, Firebase v9, Chakra UI, TypeScript, Recoil) 🔥🚀 | PART 3
มุมมอง 12K2 ปีที่แล้ว
👉 Repo link: github.com/shadeemerhi/reddit-clone-yt ❗️ Stack Overflow Link at 5:28: stackoverflow.com/questions/32311081/check-for-special-characters-in-string ❤️ Tips & Donations Link: paypal.me/shadeemerhi?country.x=CA&locale.x=en_US ( Thank you very much for your support!) ❗️This video is PART 3 of a multi-part series. I'm currently working on the new parts and am planning to release them ev...
Reddit Clone REACTJS Tutorial! (Next.js, Firebase v9, Chakra UI, TypeScript, Recoil) 🔥🚀 | PART 2
มุมมอง 12K2 ปีที่แล้ว
👉 Repo link: github.com/shadeemerhi/reddit-clone-yt ❗️ Link to ResetPassword component: github.com/shadeemerhi/reddit-clone-yt/blob/main/src/components/Modal/Auth/ResetPassword.tsx ❤️ Tips & Donations Link: paypal.me/shadeemerhi?country.x=CA&locale.x=en_US ( Thank you very much for your support!) ❗️This video is PART 2 of a multi-part series. I'm currently working on the new parts and am planni...
Reddit Clone REACTJS Tutorial! (Next.js, Firebase v9, Chakra UI, TypeScript, Recoil) 🔥🚀 | PART 1
มุมมอง 34K2 ปีที่แล้ว
👉 Repo link: github.com/shadeemerhi/reddit-clone-yt ❤️ Tips & Donations Link: paypal.me/shadeemerhi?country.x=CA&locale.x=en_US ( Thank you very much for your support!) ❗️This video is Part 1 of a multi-part series. I'm currently working on the new parts and am planning to release them every other day, so be sure to subscribe for those! ❗️ Please comment with any feedback, questions, or concern...
Land a Software Developer Job After Coding Bootcamp - Tips from a Software Engineer
มุมมอง 1.5K2 ปีที่แล้ว
The coding bootcamp students I mentor often ask me what they should be working on after graduating to help with their job search, so in this video, I share two things that will separate you from everyone else and really impress tech recruiters. #codingbootcamp #softwaredevelopment #softwareengineering Music (courtesy of TH-cam Audio Library) Sundown Drive - Ghostwrite Official ([th-cam.com/vide...
Why You Should Work at a Startup as a Software Engineer
มุมมอง 8902 ปีที่แล้ว
Why You Should Work at a Startup as a Software Engineer
Building my Portfolio Website: React.JS, GraphQL & MongoDB
มุมมอง 2.7K2 ปีที่แล้ว
Building my Portfolio Website: React.JS, GraphQL & MongoDB

ความคิดเห็น

  • @zayyynull_
    @zayyynull_ 4 วันที่ผ่านมา

    That was awesome man 🙌

  • @sanidhya5433
    @sanidhya5433 หลายเดือนก่อน

    In this we have used page directory but now its app directory that gets installed how can we inprove that

    • @shadmerhi
      @shadmerhi 22 วันที่ผ่านมา

      I'd stick with the app directory as it's the current pattern. While there will be some differences, you should still be able to proceed with the app directory

  • @amankumbhalwar
    @amankumbhalwar หลายเดือนก่อน

    I'm finding your Reddit playlist very helpful. However, you seem to have stopped making videos. Please continue with this project or start another one.

  • @jashveermusic
    @jashveermusic 2 หลายเดือนก่อน

    Can you provide us your source code?

  • @billybund4833
    @billybund4833 3 หลายเดือนก่อน

    Loved your video- you have a great style of teaching. Are you going to be making any more?

  • @mihirkapile6925
    @mihirkapile6925 3 หลายเดือนก่อน

    Hey, I am following this tutorial but i am having issues with id as id comes out null

  • @satishkumarsajjan2132
    @satishkumarsajjan2132 4 หลายเดือนก่อน

    1:09:51 You are importing types from backend to frontend. Not a good approach I believe.

  • @lietreumchanomai
    @lietreumchanomai 6 หลายเดือนก่อน

    31:01 if your text didnt appear use this instead (auth/invalid-credential). Firebase has change the admin authentication API. check their websites for full detals.

  • @sweattypalms_0183
    @sweattypalms_0183 6 หลายเดือนก่อน

    why use nextjs if everything is a client sided component?

  • @SocialVibing-Karr83
    @SocialVibing-Karr83 6 หลายเดือนก่อน

    This looks amazing! Can you do a tutorial on making “Amino: Communities and Fandom “clone tutorial playlist publicly or make one privately for a custom order price?

  • @zenithsomining820
    @zenithsomining820 6 หลายเดือนก่อน

    1:39:00

  • @zenithsomining820
    @zenithsomining820 7 หลายเดือนก่อน

    2:00, 30:00, 33:00

  • @zenithsomining820
    @zenithsomining820 7 หลายเดือนก่อน

    3:00

  • @NikhilPatil647
    @NikhilPatil647 7 หลายเดือนก่อน

    Just finished watching an awesome video. I thought Mongoose would be a better choice than Prisma.

  • @Sumi-ql3wj
    @Sumi-ql3wj 8 หลายเดือนก่อน

    Thanks a lot brother this really help me.

  • @princeabadi2889
    @princeabadi2889 8 หลายเดือนก่อน

    i don't have the pages and styles tab thing in the app in vscode 10:15 I give up! I was about to make this as my last year final project of my honors degree.. but i don think this is attainable in 5 weeks time...

  • @TranMinhThanh
    @TranMinhThanh 8 หลายเดือนก่อน

    Nice video bro, a question if you haven't answer or mention in later videos that I didn't come up to yet. Why don't you move getPost() into usePost hook and update postState from there itself?

  • @aura7117
    @aura7117 8 หลายเดือนก่อน

    Is their an admin feature in this tutorial series? Admin being able to delete comments/posts and ban users?

  • @rounakagarwal1294
    @rounakagarwal1294 8 หลายเดือนก่อน

    Hey buddy, really appreciate solving this live. This certainly helps on how to approach a problem in steps. However, the solution to update the replies of each comment, by making a separate state on each recurse, doesn't seem very right. I am not sure, can you please provide a bit more explanation for this logic. It sure displays each reply on the UI but is it actually updating the original (main) comments state and persisting it?

  • @platinumend9472
    @platinumend9472 9 หลายเดือนก่อน

    noice pathway for me bruh!!!!🎉🎉❤

  • @psyferinc.3573
    @psyferinc.3573 9 หลายเดือนก่อน

    merhi from where in lebanon ?

    • @shadmerhi
      @shadmerhi 9 หลายเดือนก่อน

      My dad is from Mdoukha! Are you from there?

    • @psyferinc.3573
      @psyferinc.3573 9 หลายเดือนก่อน

      kabr chmoun my guy. mom is a merhi.@@shadmerhi

  • @younesouterbah
    @younesouterbah 10 หลายเดือนก่อน

    super helpful thank u so much man

  • @StephenRayner
    @StephenRayner 10 หลายเดือนก่อน

    “Use client” in the page.tsx yikes 😅

  • @KJPrince
    @KJPrince 10 หลายเดือนก่อน

    Great work thanks for sharing

  • @paladime8167
    @paladime8167 11 หลายเดือนก่อน

    I'm having trouble understanding how the session is being sent to the back-end, in the mutation the only variable that is sent is $username. How does the backend know the current session?

    • @shadmerhi
      @shadmerhi 11 หลายเดือนก่อน

      Hey! In hindsight, I should have implemented authentication very differently as opposed to using Next-Auth. I would recommend you use JWT token-based authentication instead of session-based as JWT is stateless (i.e. the server does not need to store session information) and thus makes it much simpler in a distributed application like this one. My apologies for the confusion

  • @earljohnmasaga6440
    @earljohnmasaga6440 11 หลายเดือนก่อน

    Thank you so much for this tutorial. I learned git, chakra ui and typescript because of you!!! ♥

    • @shadmerhi
      @shadmerhi 11 หลายเดือนก่อน

      You're welcome! I'm honoured you found them valuable ❤

  • @sadique_x_
    @sadique_x_ 11 หลายเดือนก่อน

    watched this about 10 times, but i'm glad i grasped it!

  • @samuelumoh6646
    @samuelumoh6646 11 หลายเดือนก่อน

    You're the man. Exactly what I needed.

  • @pcgs_
    @pcgs_ 11 หลายเดือนก่อน

    Hey @shadmerhi , continue creating tutorials using ChakraUI please, we don't have much content in TH-cam about this amazing UI Library.

  • @MO-432
    @MO-432 ปีที่แล้ว

    SQ func: 10:13

  • @rikeshsherpa-z5u
    @rikeshsherpa-z5u ปีที่แล้ว

    nesting works perfectly fine but when adding a new comment we get an error , it replaces current comment with all its reply begin shifted to newly added comemnt

    • @henryteng5191
      @henryteng5191 10 หลายเดือนก่อน

      Same issue! Did you find a fix?

  • @swapnilramteke3060
    @swapnilramteke3060 ปีที่แล้ว

    sir, we miss some functionality like edit and delete can you make video on this

  • @fahadullakhan1793
    @fahadullakhan1793 ปีที่แล้ว

    "getServerSideProps" is not supported......how can I fix this?

  • @imAskja
    @imAskja ปีที่แล้ว

    This is incredible!

  • @tonyvito5062
    @tonyvito5062 ปีที่แล้ว

    I guess if you named your variables correctly that would make much sense instead of comments you should have named it to replies which means each comment has replies and each reply has replies and so on

    • @GhulamQadir-lb6hu
      @GhulamQadir-lb6hu 8 หลายเดือนก่อน

      testing multilevel comment on youtube

    • @GhulamQadir-lb6hu
      @GhulamQadir-lb6hu 8 หลายเดือนก่อน

      testing multilevel comment on youtube

  • @DaivyMorales
    @DaivyMorales ปีที่แล้ว

    You are the best! <3

  • @11vag
    @11vag ปีที่แล้ว

    Thank you for not using libraries.

  • @meharsain728
    @meharsain728 ปีที่แล้ว

    i hope i could too make such wonderful videos 😍

    • @shadmerhi
      @shadmerhi ปีที่แล้ว

      I'm sure you can!

    • @meharsain728
      @meharsain728 ปีที่แล้ว

      @@shadmerhi I'm a fresher in Bs Computer science, I'm looking for a job, you're senior, can you give me tips or any helping material so that I can crack the interview and start my journey in Tech... Best Regards

  • @meharsain728
    @meharsain728 ปีที่แล้ว

    Loved, Amazing Content, i'm starting to build it side by side playing your video <3

    • @shadmerhi
      @shadmerhi ปีที่แล้ว

      Thanks so much! Appreciate the kind words

  • @hamail-1
    @hamail-1 ปีที่แล้ว

    getSession() is not working, anyone who faced this and solved the problem? I am using alternate way to send userid through client

  • @theshubhagrwl
    @theshubhagrwl ปีที่แล้ว

    This is actually the best tutorial that I have watched becuase this was real, showing the struggle and confusions that happen while doing something new. I also watched another tutorial on the same topic and it was like an AI generated voice with pasting snippets (like fireship). I like watching the thought process not just code. GREAT WORK!!!

  • @EmperorAlles
    @EmperorAlles ปีที่แล้ว

    clean, good tutorial, and easy to implement deserve like + subscribe!!

  • @hazadus
    @hazadus ปีที่แล้ว

    Just completed this part with Next.js 13, this tutorial is awesome!! Can't wait to continue building the app tomorrow! Got a couple of troubles along the way, but all the solutions are here in the comments. Thanks Shadee, you are awesome Teacher! Can't express my gratitude for your videos! P.S. completed the Reddit app few days ago, too :)

    • @shadmerhi
      @shadmerhi ปีที่แล้ว

      That's awesome to hear! Glad you're enjoying the content 😁

  • @marcosgonzales2007
    @marcosgonzales2007 ปีที่แล้ว

    I didn’t know about command . thanks for sharing

  • @bellyndayikeza4799
    @bellyndayikeza4799 ปีที่แล้ว

    thank very much this really helped me a lot

  • @mohammadmalek5042
    @mohammadmalek5042 ปีที่แล้ว

    Thanks ❤

  • @amardeep6088
    @amardeep6088 ปีที่แล้ว

    Even i have changed version to 4.0.0 i am still getting the parent id error, I think there is something wrong in the logic.

  • @ftheworld2885
    @ftheworld2885 ปีที่แล้ว

    if possible then please integrate rich text editor to the comment box and reply box

  • @nwaformicah433
    @nwaformicah433 ปีที่แล้ว

    Nice job bro I, i love your work. You are the best teacher for me on graphql❤ Can you please to another tutorial on graphql Express server and folder arrangement 🙏