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.md
User: 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/.
π Material UI
π Reactstrap
π React Icons
π React Router Dom
π Redux
π Styled Components