Responsive Admin Dashboard Using React

Let's build a responsive admin dashboard using React.
Try Nordpass Business now with 3-month free trial here:

(disclaimer: Nordpass is the sponsor of the video)

In this tutorial, we will go over concepts like Dark/Light Mode, Context API & State management, Layouts & Responsiveness, and Theming.

👾Join my Discord:

✉️Sign up for my newsletter:

🌐GitHub URL:

⚛️More on React

[webdecoded]

Don't forget to try out Nordpass Business!

[StanislavObrazcoff]

7:41 - Breadcrumb component creation
12:30 - React router adding
13:10 - Main container block
15:30 - Credit Card component creation
20:37 - Add styles
22:02 - [Ad] - password manager
23:45 - Continue with styles
24:55 - Adding icons
25:45 - Dummy data
27:00 - Display content
31:20 - Add css variables
38:58 - [Result] design for now
39:43 - Add charts
41:16 - Add Metrics component
50:34 - [Result] design for now
50:45 - Add column chart
59:00 - [Result] design for now
59:45 - Add Header
1:08:09 - Add Footer
1:11:07 - [Result] design for now
1:11:24 - Add Sidebar
1:22:08 - [Result] design for now
1:23:00 - New CSS styles
1:25:00 - Global Context provider for theme
1:27:42 - Using context
1:30:40 - Add useEffect for theme change
1:31:25 - Add dark style
1:33:46 - Add App to theme provider
1:35:00 - [Result] design for now
1:37:43 - Add Context for sidebar toggle
1:41:13 - [Result] design for now
1:41:27 - Fix sidebar style
1:46:15 - Add Routing
1:47:52 - Ad Users page
1:48:33 - [Result] design for now
1:49:04 - Add AdComp component
1:50:44 - Add Activity component
1:53:40 - Add CityRanking component
1:56:00 - Update dashboard with new components
1:56:51 - [Result] design for now
1:57:10 - Small style fixes
1:58:54 - [Result] design for now

[Trump_panavision]

sound quality has become much better +rep

[SuperArnie]

Hi what version of vite are you using ? and do you install all the dependencies separate

[nkitkanjiya]

are you planning to add CURD Operation in the dashboard as like create delete update features? that would be so excited

[pauliuskomolovas]

I had this task and hadnt know how to do it, maeby you will make video about it

This project will require you to build an application using React, NodeJS Express and MongoDB or MySQL. The purpose of the program is to allow the company engaged in the organization of events to register the persons who called the event by phone.


The event organizer, after logging into the program, will see:

Registration form (indicates: i) name and surname; ii) e-mail; (iii) age;) and

The list of registered users (shows a table with the user's first and last name, e-mail, date of birth, administration buttons).

Functionality:

CRUD operations (you can create a user in the registration form, view, update and delete users in the table);

Data storage (users are stored in the database). If you use a MySQL database, it is necessary to create relationships between tables and use "Primary Key" and "Foreign Key" constraints.

Design. Create your own design, but a minimum design is required.

[WiseDv]

Please include crud for users and categories

[darrellparkhouse]

Is there a way to populate a chart using a database?

[FPV]

Hi. Nice tutorial. I'v downloaded github project, but like 20 minutes before end, the code is complete different. Could you please upload on github this code what is in the video? Other tutorials from other bloggers/teachers - are just nogo, like 1 year old, from react 17, and now - it is impossible to deploy them in your dev environment, they just no starting.
Your project is realy first which i could start with actuall react 18, and it works.
but, on the end, it's hard to add css stuff. it different from github sourcecode.
Contexts for theme-switching and menu-collapsing - I added from video, but then I have just give it up, when css changes has begun!
anyway this technology - just sucks! one year old tutorials - you download it from guthub - and now it is impossible to run. it'sreact 17. why should i do now react 17?
then - you are trying like one week to migrate those projects from react 17 to 18 - but no one has even startet, it comes always tons of errors, why so difficult????
in my opinion - react and all this dependencies, legacy codes just like in 1 year old project - its crazy thing, why all are so crazy about this react, anular ans so on. it really sucks! reusable code, yeah, you have time till new version of react comes - then - goodbye your app after react upgrade. sad! 🤔

[warisruzi]

please next tutorial deploy some server final project.
thank you

[lordhakim]

I like all videos is it possible u build bet365 clone with pupeeter and scrap data ?