Hello dev .. this is Dashmin! It is nothing more than a simple and elegant base to help you in the development of your administrative system. It doesn't have many components yet, but it already has some famous libraries like Material UI and Reactstrap integrated, so if you know any of them it will be easy to create your pages .. if you don't want to use any of them, feel free to use the library. to your liking. So let's start.
If you want to create your admin using DASHmin, follow the installation tutorial below!
├── assets
│ ├── logo.png
│ ├── login.png
│ ├── dashmin.png
├── node_modules
├── public
├── src
│ ├── components
│ ├── helpers
│ ├── routes
│ ├── services
│ ├── store
│ ├── views
│ ├── App.js
│ ├── index.js
├── .editorconfig
├── .env
├── .gitignore
├── .travis.yml
├── package.json
├── README.md
└── LICENSE.mdUser: dashmin pass: 123
To run this project, you need to have Node.js installed on your machine! If you do not have it, go to the website https://nodejs.org/en/ and download and install it as it is taught in the documentation!
To start clone the repository and install the dependencies using the commands below.
git clone https://github.com/hiukky/dashmin-react.git -b master nameOfYourProject
cd nameOfYourProject
yarn install
npm install
Right .. after installing all the dependencies you can run the application and check if everything is working correctly.
yarn run start
npm run start
Ready!! if everything went well, just check your application in the browser http://127.0.0.1:3000/.
Dashmin is already all set up, so for starters you can create your views in src/views/YourView and then use it in the routes file in routes.
Within the views directory create your view component to be rendered.
// Imports
import React from 'react';
// Products
const Example01 = () => (
<div>
<h1>Example01</h1>
</div>
);
export default Example01;// Imports
import React from 'react';
// Products
const Example02 = () => (
<div>
<h1>Example02</h1>
</div>
);
export default Example02;After creating your view, go to routes/index.js and import the created views.
// Views
import Example01 from 'pages/example01';
import Example02 from 'pages/example02';Define your routes.
// Routes
const Routes = {
example01: '/example01',
example02: '/example02',
};After defining the routes, define a const Dashmin by passing defining properties. Dashmin requires information for navbar, sidebar and content. so it is important to inform them.
const Dashmin = {
// navbar
navbar: {
}
// sidebar
sidebar: {
}
// Content
content: [
]
}In navbar you need to enter a dropdown object containing the user and buttons objects.
// Serices
import { logout } from 'services/auth';
const Dashmin = {
// navbar
navbar: {
// Dropdown
dropdown: {
// User Profile
user: {
avatar: 'https://i.imgur.com/NpICPSl.jpg',
name: 'R o m u l l o',
jobRole: 'Administrator',
},
// Buttons events
buttons: {
settings: () => {},
profile: () => {},
logout: () => {
logout();
document.location.reload();
}
}
}
},
}For the sidebar you need to pass brand and buttons. For brand you need to pass only the name of your organization by entering the full name max and abbreviated min.
For buttons, a name, icon and route are required.
Sobre os icones .. o Dashmin usa o React icons, então você pode simplesmente importar os icones que deseja usar e passar o component para icon.
// Icons
import {
IoMdOptions,
IoMdPeople,
} from 'react-icons/io';
const Dashmin = {
// sidebar
sidebar: {
// brand
brand: {
max: 'D A S H M I N',
min: 'dmin'
},
// buttons
buttons: [
{
name: 'Example01',
icon: <IoMdOptions />,
route: Routes.example01,
},
{
name: 'Example02',
icon: <IoMdOptions />
route: Routes.example02,
},
]
}
}Finally the part of content. For it will be necessary to pass an array of objects containing the route and the visualization component to be redemptively view.
// Views
import Example01 from 'pages/example01';
import Example02 from 'pages/example02';
const Dashmin = {
// content
content: [
{
route: Routes.example01,
view: Example01
},
{
route: Routes.example02,
view: Example02
},
]
}The Route file containing the settings made above.
// React
import React from 'react';
// Views
import Example01 from 'views/example01';
import Example02 from 'views/example02';
// Icons
import {
IoMdOptions,
IoMdPeople,
} from 'react-icons/io';
// Routes
const Routes = {
example01: '/example01',
example02: '/example02',
};
// Dashmin
const Dashmin = {
// Navbar
navbar: {
// Dropdown
dropdown: {
// User Profile
user: {
avatar: 'https://i.imgur.com/NpICPSl.jpg',
name: 'R o m u l l o',
jobRole: 'Administrator',
},
// Buttons events
buttons: {
settings: () => {},
profile: () => {},
logout: () => {
logout();
document.location.reload();
}
}
}
},
// Sidebar
sidebar: {
// brand
brand: {
max: 'D A S H M I N',
min: 'dmin'
},
// buttons
buttons: [
{
name: 'Example01',
icon: <IoMdOptions />,
route: Routes.example01,
},
{
name: 'Example02',
icon: <IoMdOptions />
route: Routes.example02,
},
]
},
// Content
content: [
{
route: Routes.example01,
view: Example01
},
{
route: Routes.example02,
view: Example02
},
]
};
export default Dashmin;Once you have followed the steps above, you can now test your app using one of the commands below if you have not previously run it.
yarn run start
npm run start
Ready!! if everything went well, just check your application in the browser http://127.0.0.1:3000/.
📍 Redux