Build a Responsive React Admin Dashboard | React, Next.js, Tailwind CSS, Headless UI
2022 ж. 3 Жел.
25 419 Рет қаралды
In this video we are going to learn how to create a fully mobile responsive admin dashboard using React, Next.js, Tailwind CSS and Headless UI. This React admin dashboard would be perfect as a starting point for any projects you are working on. Whether it's an eccomerce website that needs a place for staff to manage the store or you're creating a new saas application you can use this tutorial as an easy starting point.
GitHub Repo - github.com/Rettson/React-Admi...
My GitHub - github.com/JasonMerrett
Installation:
Tailwind CSS Next.js Setup Commands - tailwindcss.com/docs/guides/n...
Commands from video:
npx create-next-app admin-dashboard --use-npm
(Use Tailwind CSS link above for Tailwind setup commands)
npm i @headlessui/react @heroicons/react
Link to repo - github.com/Rettson/React-Admin-Dashboard Apologies for the background noise in this video, it's just my laptop over heating 😅 Will most likely go back to recording on my PC as it's much quieter!
Great, this is what I was actually looking for. Thanks man
Great video, would love to see react and typescript next
I love your coding and teaching style - thank you for the great videos :)
Thank you, glad you enjoy them! :)
Thanks for sharing with us!
Excellent Project .. keep it up 👌🏻
Love the tutorial, One tip from me is if you could just Zoom on your code editor it would be great, Im remote at the moment and cant see the text when I 50/50 my youtube and code editor on a single monitor. Thanks man
may I ask why you are using next.js as opposed to plain React? I'm still having trouble understanding what the utility is for next.js. thanks.
would love to see this using the new app directory
i am using NextJs version 12.2.4 where nextjs doesn't allow use state/effect on server side rendering and I am building a admin dashboard where also fetching data from api how would i achieve this ?
Thanks for the video! At minute 59:00 why is it that leave inside the Transition has duration=75 while the others use duration- with a hyphen
Thank you! and sorry about that, that'll be a typo
How do I do it with framer-motion instead of headlessui?
Greetings friend, thanks for sharing... I saw that you are using next 13 but you are still using the previous structure (it must be because it is still in beta face) but even so you have thought of updating the code to the new version.... Sorry for my bad English use translator... You earned a new Latino subscriber living in Venezuela At. Jose Grillo ESPAÑOL Saludos amigo gracias por compartir... vi que estas usandonext 13 pero sigues usando la extructura anterior (debe ser porque esta aun en face beta) pero aun asi has pensado actualizar ek codigo a la nueva version.... Disculpa mi mal ingles uso traductor... Te ganaste un nuevo subscritor Latino vivo en Venezuela At. Jose Grillo
no way! English translation is to the point.
Can you create more videos like this please?
I’m confused with something, using useState makes the component client sided. And you wrapped the entire app inside a client side component. Then what is the point of using next.js
Hi, I'm not too sure what you are getting at here. You can still use hooks whilst taking advantage of next js server side rendering, which is what i assume you are talking about. Considering hooks are a fundamental part of react I think the question would be why would next js use react if you can't even use its main features.
I hope you are not using the experimental APP DIRECTORY of next 13
The layout component he set up is just so set the structure of the app so that the navbar and sidebar appears on all pages . In next js 13 if you use the new app directory it also created a layout component just like he did He didn't need to use the useState
I ran into an issue while following this where when I click on the person's name for the dropdown the dropdown covers the profile picture and name. In your video your dropdown always shows up below what you click on. I've compared my code to yours multiple times and don't see anything different. Have you ran into this before? Trying to figure out where I messed up. I'd also love to see a follow up video on adding in dark mode.
Hey, I'm not too sure what could be causing that unfortunately as I haven't ran into it before. I do sometimes run into issues where I think I copy everything properly but then it just doesn't work for me, in which case I usually copy and paste the entirety of the code to see if it still doesn't work, then i know whether i missed something or the codes broke. In your case maybe check out the code on github and copy all of TopBar.js and see if that works. Also I will definitely do a follow up video on dark mode :)
@@Rettson thank you the compare feature in VSCode did help. Turns out I accidentally mistyped the word absolute on my Menu.items className which is why it wasn't moving it where it should be.
Glad to hear you managed to fix it! :)
@@Rettson Thanks me too.
Why did you go through the extra stress of setting function to check for mobile view when tailwind by design is mobile first so everything u type by default is mobile friendly you just have to set breakpoints using sm,md, lg etc
It's been a while since I wrote the code so I'm not sure about the exact reasons but from what I can remember the biggest reason for doing that was setting the initial state based on whether it's on mobile or desktop because of how the sidebar works. It's an overlay on mobile which if it showed by default would be very annoying so I use the JavaScript to set the showNav state to false so it's hidden on mobile by default but shows on desktop. Not something you could do with Tailwind alone.
Ugh the font size is so small when watchin on tab
Thanks for the feedback, will bear that in mind for future videos! I did zoom in the text for this but it's hard to find a balance between too big for me to write code properly and too small for people on smaller devices to be able to see it.
go get your self a laptop
Thank you again friend for sharing... One question do you think, get more videos complementing this Dashboard.... ??? It's fantastic.... It would be great to see more features... I take this opportunity to wish you a happy new year 2023 and that all your goals are met. I hope to see your channel grow very soon... towards 10,000 subs, then 100,000, 1,000,000 and many more Your friend from Venezuela greets you... Jose Grillo ESPAÑOL Amigo nuevamente gracias por compartir.... Una pregunta piensas, sacar mas videos complementando este Dashboard.... ??? esta fantastico.... seria super poderle ver mas funcionalidades.... Aprovecho la ocasion para desearte un feliz año 2023 y que todas tus metas se cumplan espero ver crecer tu canal muy pronto... rumbo a los 10.000 subs, luego 100.000, 1.000.000 y muchos mas Te saluda tu amigo de Venezuela ... Jose Grillo