... d a s h m i n ...

_{Built with ❤︎ by Romullo}

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!

✓ Structure

├── 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

✓ Preview

User: dashmin pass: 123

Live demo

Login

Admin

✓ Requirements

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!

✓ Instalation

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

or

npm install

✓ How to use

Right .. after installing all the dependencies you can run the application and check if everything is working correctly.

yarn run start

or

npm run start

Ready!! if everything went well, just check your application in the browser http://127.0.0.1:3000/.

✓ Creating your views

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.

views / Example01.js

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;

views / Example02.js

// Imports
import React from 'react';

// Products
const Example02 = () => (
  <div>
    <h1>Example02</h1>
  </div>
);

export default Example02;

✓ Configuring Routes and Dashmin

routes / index.js

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: [

  ]
}

navbar: { }

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();          
        }
      }
    }
  },
}

sidebar: { }

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,
      },
    ]
  }
}

content: [ ]

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
    },
  ]
}

Full configuration

The Route file containing the settings made above.

routes / index.js

// 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;

Finishing

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

or

npm run start

Ready!! if everything went well, just check your application in the browser http://127.0.0.1:3000/.

✓ Libraries

📍 Material UI

📍 Reactstrap

📍 React Icons

📍 React Router Dom

📍 Redux

📍 Styled Components