Admin Dashboard Project and Free Source Code developed using React NextJS

hey everyone welcome to my YouTube channel my name is rizwan Khan today I'm going to share source code of an admin dashboard so this is a very important project and this is freely available you can install this project and you can use it so in this video I will show you how to integrate this project this is a one step process and I will show you how you can use this project for your uh existing application right just think about an application like e-commerce platform or inventory management system or a food ordering system or movie booking application anything right everything needs to be maintained uh through a dashboard right you may have some product list you may have users record you may have important data to highlight right so everything needs to be a handled through a dashboard so here I'm sharing you uh simple and pre-developed UI component dashboard right so here you can see this is the example of the dashboard this is uh some pages on it so we have this site navigation bar with controls top header with drop downs and notifications and you can see that there are multiple drop downs we have this header section we have this data card which highlight the important data then we have graph charts then we have some cards with some headings and contents right and then we have this beautiful table with the headings and the titles and all right okay so here you can see we have this uh download all button we have this multiple downloads with all the rows right so you can configure your table according to your need so this dashboard has lot of pre-developed UI components which you can use it has a routing system it is developed on Nexus so that's how we got the routing system then we have the sign navigations we have this works like super fast then this we have this test components we have this static page so I will show you how to integrate this project and how you can use and the most important thing is this is fully responsive so we go and check on phone let's small the size yeah so here you can see we have got this static air report page we have this home page right and with all everything is a response responsive now you can see we have this table with horizontal scroll yeah and then we have this drop down which looks like this in Mobile mode and we can go to the profile section which has nothing but just my name then we have this login page and here we can click on this login page here we have the sign up page this looks nice in desktop mode so here we have this AIO which is the logo of this dashboard All in One dashboard you can go to the login page you can go to the home page so there are lots of things right I will show you how to integrate this project and how to use this project so here we have we can take advantage of a lot of pre-developed UI components so here I can show you yeah so here you can see we have this you can find the this link in the description of this video you can go through this here I have a bit of uh X like uh I have mentioned like couple of pre-developed components available with this dashboard here we have this source code link of this dashboard which you can down from here you can download this project and here a little bit of docs about like available components which comes with this dashboard right so here we have this layout component which provides you a side navigation bar with controls and header with controls then we have this amazing data cards so you can see over here these are the data guards like so these are the the properties like this is the inverse version of this data guard if you don't provide inverse then it will be like white [Music] and then we have this table component which takes lot of props like heading subheading and the columns and the data of the table then we have this model component and then we have this input text component right so here uh you can simply copy this uh link which is Aio dashboard then you can open this project over here here also you can find the same details and explanation how to use this project now what you can do you can either clone this project in your system or you can download this project as a zip file so I would like to clone this project instead of downloading as a zip file so I'll simply copy this link and I'll go to my desktop sorry [Music] okay so here I'm going to create a folder to demo this project right for the demo of this project so I will say demo AIO dashboard [Music] now I will say get clone and the link I have just copied which you can see over here or you can simply download it right now let me clone this project okay cloning is completed now I will simply navigate to the project folder so it will just do LS you can see the folder name is Aio dashboard let's go to this project folder and open your project in your choice of editor like vs code and whatever you feel okay so here is this project and it has this is the next JS project uh you know if you have used Nexus this Pages folder is for what like trading the multiple pages but the important folder is SRC which contains everything right so here I'm just gonna do install everything so I will simply do npm install because it requires some dependencies okay now the installation is complete so if you want to run this project in development mode if you want to do some changes and you can simply say npm run tab inside the project root folder and here the project is running on uh zero zero three thousand right okay so what you can do you can go to the browser uh here is a browser let's open a new tab and say localhost 3000 okay now the project is loaded with the same data so these are the example Pages which I have created in this project itself you can simply go and delete this so let me show you first how we can create a page with and we can control it through the side navigation right so simply go to go to inside the project let's go to the welcome page here we have this Pages folder and if you ever ever worked with Nexus you know what happens with this Pages folder you can create a page over here right so here if I will show you profile.js so what it has it has nothing but just a default export with a layout the layout provides the side navigation bar and the headers right so simply I will create a new page I will say let's give it a name like uh Analytics so whatever the name we are going to give here will be our routing URL right so analytics.js and here I will simply say const analytics equals to so this is just an example page props you can say return [Music] with H1 now let's export this page sport say default analytics see this now let's go to the browser and here we are going to say slash analytics so this is the page name the file name it's hit enter and you can see we can we have got this hello world so it's a basic idea how it exists work but let's add things on top of it so what we are going to do we are going to this SRC folder and here we have this Pages which starts with capital T and here I'm going to create a folder the name Analytics [Music] right and here inside this I will create my index.js file and also if required we can create the style sheet uh dot CSS file inside this analytics folder okay so I will just copy my analytics code from here copy and paste sorry paste over here in this file uh which is here analytics index.js let's go to the analytics.js and remove everything and simply say export default create a default component and here we're going to say return and we'll add layout component we'll say layout and here we have at this layout component right dash at the radiio components and layout and here I'm going to say H1 [Music] hello world see let's go and see let's refresh this the same page and we have got all the navigations and everything right side navigation bar with drop downs login sign up and this home page profile right but the problem over here is uh we have to go to the analytics phase always through the URL right so we need to add this analytics in our site site navigation right so what we can do we can go to the project back and here you can find a file which says routes touches okay and here let's add a new route of its sub props like to name and if you want to provide an icon you can provide the icon so let's simply copy this paste over here on two we're gonna say its name is analytics so this is the URL Analytics and then we are going to give it a name Analytics okay and the this will be seen save now let's go and see we got this analytics route in our site navigation bar we can switch to the statistics page and then we can go back to the analytics page and here we have got hello world and this is not looking very nice if you see the other Pages this looks very aligned and arranged right so we can go to the Analytics or we can go to the free uh this page and we can see what else we have so we have this section number right so we can use this section component to uh to align things properly right so I can go to the simply uh analytics page and instead of using this still simply remove this I will have this and I will say Okay I want a section [Music] okay and inside this section I want to show uh some data say data data card as you can see things are also importing over here from the AI AIO library right so here we can say we need to say what is the heading or if you simply go and check it takes label value percentage and inverse right so label value percentage value and inverse say label and here you say my Theta [Music] and then we say value let's say some random number and percentage value if you want to show in the form of percentage as well say let's remove this comma 20 percent and let's see this go to the page and what happens refresh something wrong oh what do you have to there is a mistake we have to remove this H1 and we have to use our actual component which is analytics okay so you say analytics and see it is imported over here from our SRC Pages analytics folder okay save let's go to the uh again now you can see after the refresh my system is bit slow because I'm using using so many things in the background so here we have got this my data card with the value and the plus 20 okay so if I do if I go and say analytics where is the page index.js and here I will say I want this inverse I will say true then it will be in a reverse inverse version of that card so you see things are white and this is the value like this you can have multiple cards [Music] okay and here I say my data 2 my data 3 and let's remove inverse from not because it is not going to look nice and for my document with printer okay save let's go [Music] and see this is how this looks one thing we are missing which is the header section so we go to the page and you see we must have a header uh header header header uh let me check over here yeah so here you can see we have this header section we can simply import this header section from the eio components header section let's go and import over here header [Music] okay let's import it here you can see this is the imported the props required inside this you can find just copy it from here paste foreign so we can give it a name like Anna Analytics and here you can say welcome to my Analytics [Music] next page but I'm doing so much wrong so here if you hide if you remove this right component which is not required right now see this and go to this page and you can see we got this heading analytics my analytic page with the submitting now if you want to add some uh write items like right component as you can see this is a function where you can pass a component so if I pass action button I'll have to just import this action button okay so here we have got our action button right on the top of it from the AIO component section button and this is the icon right so this icon you can find from the react right he can simply import [Music] ant react like an icon slash AI okay because if you see this is a I so you have to use this slash here see so you can you can find lots of icons in this website you can simply go to the react happen icons and you can search for an icon and then you can simply import the icon and start using it here let's see add new user or whatever you want you can just show over here you can see we have got this admin user button why not let me inspect this so here we have got this add new button just click on this and we have got something wrong like set model is not defined because I think we have written something over here yeah set model function so I will simply remove this and say alert hello uh here we are gonna say adding now we have got this hello okay working nice okay let's let me show you how we can add a model to this component right so here if you go and the page you see this is this is an example of a model you can simply copy this model uh paste over here and let's go down here let's import our model let's say model so it requires lot of props which we have to provide so if you see we have this is open which indicates it's a William value either to row if it is open then true or if it is not then it is false on close you can execute some functions heading it has whatever heading you want to give you can give so let's say I want to say model s open say two and say heading goes to my model [Music] and you want to provide subheading as well okay so there is no option of subheading there is option like positive text with text on the right side of the model negative text text on the right right and text on the left side of the model okay you can simply say positive text let's say save negative text cancel okay save this let's go how it looks now this is the model which I have given true that's why I can see this model right now but yeah we can create a functions like to open and close the model so let's say our model is to add a new user user [Music] new user owner set new user or else to use State and say new student will say also initially the value will be false and let's pass this new user model to this okay and say handle what is it says uh on close then handle close the function so we'll say on close to pass the function to this say user model that is going to be sorry let me use a model and that's it concludes will say false okay so okay looks fine save this [Music] and let's go to the analytics page click on this add new user okay we are getting hello why we are getting hello because okay so on this action button I am not using this model at all right so I'll simply go and on click of this I will say set new user model and that is going to be two so this model will be visible right we are setting the state through let's go and click on this add new user and now we got the model and if you want if you click click on this close button this will be closed because we have given a function on close set this to false now we can add some more functions like if you see over here we have this on cancel and on submit right so on click of save like on positive text click on this if you click on this so on subnet I will say through a message says alert and two and submit and here I will say the same message like said user false so after alert it will be false see let's go check so here we are gonna say admin user and then click on Save we got alert we can submit so you can fire any request API request if you want to get if you want to add a form inside this model you can add the form as well without any problem right so simply go and say okay let's close this close this model and remove this here we're gonna say [Music] eight see now let's go and click on this add new user and see we got hello world so here you can add a form also right so let me give you the example um let me add input let's copy this and inside this model um I will add an input just for the demo say input or let's copy it and copy this the instrument here so here we have few things like type text placeholder email this is an example right and name is email liabilizing okay save this let's go and go to this Google is 3000 and see we got an input so this is how this works right this is how the model works now also we can add graphs like if you go to the home page okay so now we are in the home page and here we have see we have some cards so how you can add the card so just go to the analytics number and back and see what do we have how to how we can add the card so given the example of data cards table models okay I think I forgot to mention about the cards but you can find here okay no card is here okay let me show you live so here we just go let's format things and here we have this header section here we have this card section now we simply go create one more section [Music] and inside this section we are going to add the card number okay and we need to import the card so that is also coming from the components which says card and here the card needs heading and subheading and we're gonna say my car one provide subheading [Music] say my heading a little bit much see this no see go and check so we got a my card with subheading of card and a minimum height of like around 200 something now if you want to show some content inside this you can simply add the content inside this like uh you can say let's say I have some dummy components over here so I can simply go to the SRC Pages components SRC components here I have some dummy component I'll say I want to add a paragraph or I want to add a chart so say bar chart okay so I'll import this component bar chart so if you go and check this component this is an example with some dummy data right you can Implement in your own if you want or you can copy this one not a problem so simply go and say bar chat here is the problem bar chart example let's import this and save this let's go to the component yeah so here a bit of delay so here you can see we have got this bar with this highlighting part like when we hover we can see the data so these are the data you can understand this graph later but this is how you can work with the card right now there is another component dummy component which I've created over here for the demo uh you can see the billing history right so billing history uh just go down so it is nothing but just a table with a mean heading with a subheading so meaning like billing history submitting like download your previous something heading right if you want to show some action button then you can add action button this is a this is the columns right table column heading so if you go and see the columns so these are columns which is which has nothing but array of object and here we have the key of the column and then the heading which is nothing but the label of the column then we have again a key which says billing hyphen date and this is the heading so this is how it is going to look on UI billing iPhone 8. if you want to provide an icon then you can simply use the icon key and it provide an icon from the react icons okay so then we have a key amount and then we have heading amount so this is about the column if you just close and see the data this is again an array of uh objects and whatever the key we have used inside this column we are using as a key over here so the key if you see we have this key which is nothing but invoice same we have key as invoice and the value of that invoice and if you want to provide an icon then you can provide icon on that column right so this is how this data you can pass inside this table and let me show you how this works so I'm going to call this billing history uh whatever this name bling history inside my Analytics so after the section I'll say [Music] billing history okay so now it is imported uh billing history from the uh local components right and let's see this let's go to the demo uh page so here let's refresh okay so you can see we have got this billing history table with the data whatever we have given inside the bling history of this download all button which says some like download all invoice and other things right so this is uh the billing history table which you can also use from this uh from this dashboard project okay now uh anything uh which I'm missing now let me show you how this looks like this looks in responsive mode Let's go to the uh mobile mode and here you can see we have this nice responsive design we have this horizontal scroll inside this table we can click on this login and go to the login page we can click on this uh user icon and go to the other pages right here we have this uh Sub menu site navigation meaning wherever you want we can go right one thing uh so how how to maintain all the drop downs and everything right so if I if I will show you over here so you can see and close this UI components let's go to the data folder and here you can see the index.js file so you can see the menu list so here you can provide your new menu list whatever you want and wherever you want to navigate so you can see the href slash file we have this integration we have this guide we have this help center we have this logout the same menus are here if you click on this the profile integration guide helps enter and login so all these things are you can provide from here menu list then here we have another menu list which is about login menu list so login and sign up so here you can see go to the login and sign up right so this is how you can add the data to the to that components furthermore on advanced level just go to the pages uh yeah this will do UI components and go to the header if you want to add a new widget let's say here we have this notification after that notification you want to add something else so you can go to this for this component header index.js you can see we have this list which shows dashboard users and settings which you can find over here that's what gives us in settings let me close this depth so this is the left menu right uh comment for you left menu [Music] then we have this right menu okay keyboard right menu and inside this right menu what do we have we have this list again and here we have this menu list and this is nothing but a lot the data which we are providing from here okay so header login menu list if you just go we can see header login menu list we are trading through that list and we're getting the menu list okay and you can find the menu list component in this component only in this file only right so this is uh you can see the drop down menu and here we have label login slash sign up which you can see over here login slash sign up so if I will change this to something else like login slash register now we can see we have this login slash let me just check instead of login slash sign up right so this is the first menu let's close now the second drop down menu which is nothing but if you see the difference this drop down menu has nothing but a label which shows as a text there's another drop down menu which has a prop which is custom menu where you can pass the icon and I have given notification icon which is from uh react icons right so here we have notification icons so here we have got notification icon then we have given count like Pro 4 and then we screen center false this is a parameter which requires for a responsive mode right so you also you can also provide this now we have this notification drop down close this you can create your custom notification if you want you can modify this person right now we have this uh user icon right this is the notification party let's close this now we have this drop down menu with the drop down one and then so label I have given label as well as custom menu but you cannot see the label drop down one because the custom menu is has a higher priority if there is a custom menu then label will be header okay so custom menu is nothing but a user icon that's why we are seeing this user icon over here over here and it has no inert style for the container but it has a list which is menu list again you can find the manually inside this data index.js menu list okay so this was the important thing which which is important to mention here that's why I have mentioned if you want to customize it if you want to modify it if you want to add more menus to it then you can go from here so in the next uh video I will show you how we can make this more advanced like instead of modifying this header and all we can simply create things from the data itself we can have some customization in the object and we can go through it so hopefully uh you like this video and if you liked it then don't forget to subscribe and share this video with your friends this is a very important tool right right because uh whatever the application you're using that application needs some kind of dashboard you may have list of users products everything can be monitored through this this dashboard so thank you for watching don't forget to like share and subscribe have a nice day

Channel: Rizwan Khan

Views: 9,623

Keywords: reactjs admin dashboard, react admin dashboard, react admin panel, bootstrap admin template, react dashboard, bootstrap admin template free, react admin template, admin panel template free download, admin dashboard template free download, free admin template, react admin dashboard github, simple dashboard html template free, react js admin template free, react dashboard template, bootstrap dashboard template free, dashboard template free download, react admin template free

Id: Ti6RbnDPye4

Length: 34min 53sec (2093 seconds)

Published: Thu May 11 2023