- 19
- 224 132
Shadee Merhi
Canada
เข้าร่วมเมื่อ 27 ส.ค. 2015
I'm a 25-year-old Software Engineer who loves teaching! I create programming tutorials and other engineering-related content
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
✅ 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
That was awesome man 🙌
In this we have used page directory but now its app directory that gets installed how can we inprove that
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
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.
Can you provide us your source code?
Loved your video- you have a great style of teaching. Are you going to be making any more?
Hey, I am following this tutorial but i am having issues with id as id comes out null
1:09:51 You are importing types from backend to frontend. Not a good approach I believe.
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.
why use nextjs if everything is a client sided component?
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?
1:39:00
2:00, 30:00, 33:00
3:00
Just finished watching an awesome video. I thought Mongoose would be a better choice than Prisma.
Thanks a lot brother this really help me.
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...
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?
Is their an admin feature in this tutorial series? Admin being able to delete comments/posts and ban users?
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?
noice pathway for me bruh!!!!🎉🎉❤
merhi from where in lebanon ?
My dad is from Mdoukha! Are you from there?
kabr chmoun my guy. mom is a merhi.@@shadmerhi
super helpful thank u so much man
“Use client” in the page.tsx yikes 😅
Great work thanks for sharing
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?
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
Thank you so much for this tutorial. I learned git, chakra ui and typescript because of you!!! ♥
You're welcome! I'm honoured you found them valuable ❤
watched this about 10 times, but i'm glad i grasped it!
You're the man. Exactly what I needed.
Hey @shadmerhi , continue creating tutorials using ChakraUI please, we don't have much content in TH-cam about this amazing UI Library.
SQ func: 10:13
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
Same issue! Did you find a fix?
sir, we miss some functionality like edit and delete can you make video on this
"getServerSideProps" is not supported......how can I fix this?
This is incredible!
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
testing multilevel comment on youtube
testing multilevel comment on youtube
You are the best! <3
Thank you for not using libraries.
i hope i could too make such wonderful videos 😍
I'm sure you can!
@@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
Loved, Amazing Content, i'm starting to build it side by side playing your video <3
Thanks so much! Appreciate the kind words
getSession() is not working, anyone who faced this and solved the problem? I am using alternate way to send userid through client
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!!!
clean, good tutorial, and easy to implement deserve like + subscribe!!
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 :)
That's awesome to hear! Glad you're enjoying the content 😁
I didn’t know about command . thanks for sharing
thank very much this really helped me a lot
Thanks ❤
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.
if possible then please integrate rich text editor to the comment box and reply box
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 🙏