Thank you for Purchasing



Dandelion Pro - React Admin Dashboard Template

Version 1.9.3


  • Created : 18 Nov 2018
  • Latest Update : 28 Mar 2021

What is Dandelion Pro?


banner

Dandelion Pro is admin dashboard template based on React Boilerplate. It provides you clean modern design and high performance react app with various color theme. This template has been built to makes the development process easy and fast for you, which is supported by material-ui v3.x, jss (css in js), immutable js, webpack, npm modern workflow and flexible layout with flexbox.

What's Inside?
Dandelion Pro contains more than 40 react components that will meet any needs you may have in your project. Every components, modules and pages are fully customizable, easy to use and suitable for large scale project.

Template Feature


  • Modern Technologies. Built with one of most popular javascript library React.JS and Redux
  • Premium designs. Simple and elegant style with many variant gradient and flat theme
  • Multiple layout orientation. Sidebar Menu and Navigation Menu layout
  • 40+ react components and modules which reusable and easy to modify
  • Eyes are more focused. Come with dark and light mode
  • Next Generation JavaScript written in ES6
  • Responsive design Based on standard 12 Grid System
  • High Performance. Styling with JSS (CSS in JS) and Async Code Splitting
  • Clean code maintained by eslint
  • Fully vector icons and font icons
  • Direct code preview. Get source code easier without open files.
  • And many more...

Files and Folder Structure


├── app           # main application source code
│   ├── actions   # redux action dispatchers and action types
│   ├── api       # api sample dummy data collection and ui initial value
│   │   ├── apps
│   │   ├── chart
│   │   ├── dummy
│   │   ├── icons
│   │   ├── images
│   │   ├── palette
│   │   └── ui
│   ├── app.js
│   ├── components    # UI Components
│   │   ├── Badges
│   │   ├── BreadCrumb
│   │   ├── Calculator
│   │   ├── Calendar
│   │   ├── CardPaper
│   │   ├── Cart
│   │   ├── Chat
│   │   ├── Comments
│   │   ├── Contact
│   │   ├── Counter
│   │   ├── Divider
│   │   ├── DynamicInvoice
│   │   ├── Email
│   │   ├── Error
│   │   ├── Forms
│   │   ├── Gallery
│   │   ├── GuideSlider
│   │   ├── Header
│   │   ├── ImageLightbox
│   │   ├── LandingPage
│   │   ├── Loading
│   │   ├── Notification
│   │   ├── Pagination
│   │   ├── Panel
│   │   ├── PapperBlock
│   │   ├── Product
│   │   ├── Profile
│   │   ├── Quote
│   │   ├── Rating
│   │   ├── Search
│   │   ├── Sidebar
│   │   ├── SocialMedia
│   │   ├── SourceReader
│   │   ├── Tables
│   │   ├── TaskBoard
│   │   ├── TemplateSettings
│   │   ├── TextEditor
│   │   ├── Widget
│   │   └── index.js
│   ├── config         # enviroment and other global configuration
│   ├── containers     # application wrapper and root template
│   │   ├── App
│   │   ├── Charts
│   │   ├── Dashboard
│   │   ├── Forms
│   │   ├── LandingPage
│   │   ├── LanguageProvider
│   │   ├── Layouts
│   │   ├── Maps
│   │   ├── NotFound
│   │   ├── Pages
│   │   ├── Parent
│   │   ├── Tables
│   │   ├── Templates
│   │   ├── UiElements
│   │   └── pageListAsync.js
│   ├── index.html    # main HTML
│   ├── redux         # redux settings
│   ├── styles        # style declaration witc scss and css
│   └── utils         # redux saga configuration
├── internals         # webpack and app configuration
│   ├── config.js
│   ├── generators
│   ├── mocks
│   ├── scripts
│   ├── testing
│   └── webpack
├── package-lock.json
├── package.json      # npm package manager file 
├── postcss.config.js # css config
├── public            # all public assets directory
│   ├── favicons
│   └── images  
├── server            # backend configuration
│   ├── argv.js
│   ├── index.js
│   ├── logger.js
│   ├── middlewares
│   ├── port.js
│   ├── rawdocs.js
│   └── rawicons.js
└── yarn.lock
                        

Installation and Running App


Dandelion Pro is built on top of Material UI
  • Connect to the internet
  • Install NodeJs from NodeJs Official Page
  • Unzip the Dandelion Pro file to a folder in your computer
  • Open Terminal
  • Go to your file project (where you've unzipped the product)
  • Install Modules
    Install module dependencies by run this script in terminal
    npm install
    It will download some necessary dependencies, it could take some minutes, just wait until finish.
  • Build Webpack DLL dependencies(If necessary)
    Install module dependencies by run this script in terminal. This process ussualy done by 'npm install', but if system require it just run this command:
    npm run build:dll
  • Run App
    After build static library, then run the app.
    npm start
    The process should be take about 1-2 minutes.
    process
    INFO:
    - Just run this script whenever you want start the project.
    - Run npm install again if you have new module dependencies,
  • Navigate to http://localhost:3000

Deployment


Production

  • First you have to clone/copy the all project code in your hosting/cloud server.
  • Open your console to access the hosting/cloud server.
  • If you haven't install the dependencies before, please run npm install
  • After that you need to build the production assets first
    npm run build
    It usually take longer time than development to generate and compress production code. The generated files will be placed in build/ process process
  • Then start the app
    npm run start:prod
  • -------- OR -------
  • If you want run it in background you may try PM2 https://www.npmjs.com/package/pm2. Then run this command:
    node node_modules/.bin/cross-env NODE_ENV=production pm2 start server
  • Then navigate to http://localhost:3000
  • Note: After build finish then when you access it on local, all of the assets will be stored in local storage. So when You make a change the result will not update, because browser will take the code from cache.
    This is a default feature from React Boilerplate which has focus of 'offline first'. So will make easier to build Progressive Web Aplication. But you can clear it by clear in local storage by following this step.

    Google Chrome and Opera
    1. Open "Developer Tools" or Right click > Inspect element
    2. Then go to tab "Application"
    3. Choose "Clear Storage" in left sidebar
    4. Scroll down then You will see button "Clear site data"
    5. Just click it to clear all stored assets
      img


    Safari and Firefox
    1. Open "Developer Tools" or Right click > Inspect element
    2. Then go to tab "Storage"
    3. Choose "Local Storage" in left sidebar
    4. Just right click > Delete All
      img

Troublehooting


Installation Problem

  • if got warning like this :
    npm WARN redux-immutablejs@0.0.8 requires a peer of immutable@^3.7.5 but none is installed. You must install peer dependencies yourself.
    npm WARN react-draft-wysiwyg@1.12.13 requires a peer of immutable@3.x.x || 4.x.x but none is installed. You must install peer dependencies yourself.
    npm WARN slick-carousel@1.8.1 requires a peer of jquery@>=1.8.0 but none is installed. You must install peer dependencies yourself.
    npm WARN draftjs-utils@0.9.4 requires a peer of immutable@3.x.x || 4.x.x but none is installed. You must install peer dependencies yourself.
    npm WARN html-to-draftjs@1.4.0 requires a peer of immutable@3.x.x || 4.x.x but none is installed. You must install peer dependencies yourself.
    
    Don't worry the app will run as well

    For warning some of dependencies need another dependencies too, maybe once you install them, there’s some changes from the 3rd party vendor so probably it will make a warning to another dependencies.

  • Stuck on installation related node-pre-gyp. How to fix it?
    Here’s a case error when installation being stuck on node-pre-gyp node-pre-gyp WARN Using request for node-pre-gyp https download Please stop the installation process by press CTRL+C Then run npm install again.
  • Error SCSS or node-sass when NPM start. How to fix it?
    ERROR in ./app/styles/layout/base.scss (./node_modules/css-loader/dist/cjs.js??ref--8-1!./node_modules/postcss-loader/src??ref--8-2!./node_modules/sass-loader/lib/loader.js??ref--8-3!./app/styles/layout/base.scss)
    Module build failed (from ./node_modules/sass-loader/lib/loader.js):
                                  
    - It mean the node-sass not installed succesfully. May because connection problem, changed node environment during installation, or blocked node-sass repository
    - Please install node-sass manually by npm install node-sass --save
    - Build dll libraries npm run build:dll
    - Try to start project again npm start
  • Error warning at the first time npm install Module not found: Error: and ERROR in dll reactBoilerplateDeps. What that’s mean?
    Don’t worry for the errors when npm install or npm build:dll it’s warning messages because the webpack dll cannot go through inside those dependencies directory, some dependencies work for backend side (such as fs and moment module ) so that will not built in dll libraries. You can continue to start the project by run npm start or npm run start:prod (if production) and should work properly. If the program cannot running properly, please try to remove all module in node_modules/. Then install again with npm install.

    FYI: The webpack dll itself use for optimizing building script. Here’s article about webpack dll https://medium.com/@emilycoco/how-to-use-the-dll-plugin-to-speed-up-your-webpack-build-dbf330d3b13c.
  • if got an error with a dependencies installation. Try to remove the problematic package in package.json. Then install again with npm install. After finish try to install the problematic package manually.
  • if still got an error. Try to update the problematic package instead.


Development Problem

Every code changes, the app will updated directly without reloading the pages. when errors happen or warning will show in browser and console browser.


Basic Code Structure


Main HTML

The HTML root in /app/index.html

code

You can put google analytics, font icon, embeded fonts, etc here.



Main JS

The JS root in /app/app.js. This is the entry file for the application, only setup and boilerplate code.

code2


Directory Alias

You can find directory alias settings in /internals/webpack/webpack.base.babel.js

Name Alias Directory Sample Use
UI Components dan-components app/components/ import { CrudTableForm, Notification } from 'dan-components';
Redux Actions dan-actions app/actions/ import { closeAllAction } from 'dan-actions/UiActions';
Component Style Overider dan-styles app/styles/components/ import css from 'dan-styles/Table.scss';
API dan-api app/api/ import brand from 'dan-api/dummy/brand';
Images dan-images public/images/ import decorationDark from 'dan-images/decoration_dark.svg';
3rd Party Vendors dan-vendor node_modules/ import css from 'dan-vendor/react-draft-wysiwyg/dist/react-draft-wysiwyg.css';

Template Architecture


This is template architecture in diagram visualization. Click diagram or full screen button full screen to show in new tab with full screen


Components & Containers

This diagram bellow explain whole project structure.



Routing

This diagram explain routing structure from api menu to page routing and every available layout(containers) to components.



Redux

Explain CRUD data structure from dummy api read by components then created and manipulated by reducers.



Design & Themes

The redux structure about manipulating state that related ui changes.


Starter Project


This source code made for you who want build app from scratch without without being distracted from innate feature. In other word it's an initial(empty) project with built in configuration setup.

  • You can go through to starter-project/ folder
  • Connect to the internet
  • Open Terminal
  • The next installation process are same like was described above
  • Install module dependencies by run this script in terminal
    npm install
    It will download some necessary dependencies, it could take some minutes, just wait until finish.
  • Build Webpack DLL dependencies(If necessary)
    Install module dependencies by run this script in terminal. This process ussualy done by 'npm install', but if system require it just run this command:
    npm run build:dll
  • Run App
    After build static library, then run the app.
    npm start

    process
    INFO:
    - Just run this script whenever you want start the project.
    - Run npm install again if you have new module dependencies,
  • Navigate to http://localhost:3001
  • After this you can can start develop your app with this initial project. And will bo more suitable when use dandelion-pro as a reference

Change Layout and Theme


theme
This app has 15 Themes with dark/light appearance and 4 layouts mode base on navigation menu (Left Sidebar, Right Sidebar, Top Dropdown Menu and Mega menu). You can change the layout via theme panel but not permanently. To make the layout permanent just follow this step.

  • Open app/redux/modules/ui.js
  • Then change the initialState value. Here's the available api:
    Key Type Available Value Example
    theme: String 'greenOrangeTheme', 'purpleRedTheme',
    'skyBlueTheme', 'magentaTheme',
    'purpleTheme', 'pinkGreenTheme', 'orangeTheme',
    'yellowCyanTheme', 'blueCyanTheme', 'blueTheme',
    'yellowBlueTheme', 'cyanTheme', 'redTheme',
    'greyTheme'
    theme: 'pinkGreenTheme'
    type: String 'light', 'dark', type: 'dark'
    gradient: Boolean true, false, gradient: true
    decoration: Boolean true, false, decoration: true
    bgPosition: String 'half', 'full', 'header', bgPosition: 'half
    layout: String 'left-sidebar', 'right-sidebar', 'top-navigation', 'mega-menu', layout: 'left-sidebar

    Here's the complete code
    // file: app/redux/modules/ui.js
    
    const initialState = {
      /* Settings for Themes and layout */
      theme: 'pinkGreenTheme',
      type: 'light', // light or dark
      gradient: true, // true or false
      decoration: true, // true or false
      bgPosition: 'half', // half, header, full
      layout: 'left-sidebar', // left-sidebar, right-sidebar, top-navigation, mega-menu
      /* End settings */
      sidebarOpen: true,
      pageLoaded: false,
      palette: List([
        { name: 'Fruit', value: 'greenOrangeTheme' },
        { name: 'Purple', value: 'purpleRedTheme' },
        { name: 'Ocean Sky', value: 'skyBlueTheme' },
        { name: 'Rose Gold', value: 'magentaTheme' },
        { name: 'Ultra Violet', value: 'purpleTheme' },
        { name: 'Botani', value: 'pinkGreenTheme' },
        { name: 'Ubuntu', value: 'orangeTheme' },
        { name: 'Patriot', value: 'brownTheme' },
        { name: 'Vintage', value: 'yellowCyanTheme' },
        { name: 'Mint', value: 'blueCyanTheme' },
        { name: 'Deep Ocean', value: 'blueTheme' },
        { name: 'School', value: 'yellowBlueTheme' },
        { name: 'Leaf', value: 'cyanTheme' },
        { name: 'Metal Red', value: 'redTheme' },
        { name: 'Grey', value: 'greyTheme' },
      ]),
      subMenuOpen: []
    };
    


Theme Palette Color

This theme has two theme mode, dark and light. To change default color you can find in

  • Light mode: app/api/palette/lightPalette.js
  • Dark mode: app/api/palette/darkPalette.js

Every kind of themes has two palette, there are primary and secondary within light, main, dark and contrastText. Just change the value as you like. In example if you want to change purpleRedTheme in dark mode

// app/api/palette/darkPalette.js
purpleRedTheme: {
  palette: {
    primary: {
      light: '#EDE7F6',
      main: '#673AB7',
      dark: '#512DA8',
      contrastText: '#fff',
    },
    secondary: {
      light: '#FCE4EC',
      main: '#EC407A',
      dark: '#C2185B',
      contrastText: '#fff',
    },
  },
},


UI Redux Architecture

This is UI architecture in diagram visuailzation. Click diagram or full screen button full screen to show in new tab with full screen

Enable Direct Code Preview


To make documenation easy and effective to access and implement, we attached source code in every component demos. We call it Direct Code Preview. This feature can be used in purchased product only (not available in demo).

  • Open config file app/config/codePreview.js
  • By default it set by false
    // file: app/config/codePreview.js
    
    export default {
      enable: false
    };
    
  • Change to enable: true, to enabled direct code preview
  • Test with any component demo, example in http://localhost:3000/app/tables/advanced-table.
  • Then at the bottom of every components you will see <> Show Code Button. Just click it.
  • The source code of that components will show as well.

    theme

    np: Basically this feature read source file directly, so for every changes you make in component will also changes that preview.
  • You can see through, copy and paste directly any component in front of your eyes.
  • This feature use Source Reader component. You can find it in src/app/components/SourceReader/SourceReader.js. It was implemented in mostly component demos.

Create New Page


  • Go to app/containers/
  • Create new folder ex: MyPage. The name must in capitalize
  • Create new js file inside that folder MyPage, ex SamplePage.js. The name must in capitalize
  • Inside the file create a simple page HTML ex:
    // file: app/containers/MyPage/SamplePage.js
    
    import React from 'react';
    import { Helmet } from 'react-helmet';
    import { PapperBlock } from 'dan-components';
    
    class SamplePage extends React.Component {
      render() {
        const title = 'Dandelion Pro. Blank Page';
        const description = 'Dandelion Pro';
        return (
          <div>
            <Helmet>
              <title>{title}</title>
              <meta name="description" content={description} />
              <meta property="og:title" content={title} />
              <meta property="og:description" content={description} />
              <meta property="twitter:title" content={title} />
              <meta property="twitter:description" content={description} />
            </Helmet>
            <PapperBlock title="Blank Page" desc="Some text description">
              Content
            </PapperBlock>
          </div>
        );
      }
    }
    
    export default SamplePage;
    
    
  • Import it asynchronously to the routing. Open file app/containers/pageListAsync.js
    // app/containers/pageListAsync.js
    
    export const SamplePage = Loadable({
      loader: () => import('./MyPage/SamplePage'),
      loading: Loading,
    });
  • Load it inside the template. In this example we'll use in dashboard template. Open file app/containers/App/Application.js
    // file: app/containers/App/Application.js
    
    import { SamplePage } from '../pageListAsync';
    class Application extends React.Component {
      render() {
        const { changeMode } = this.props;
        return (
          <Dashboard history={this.props.history} changeMode={changeMode}>
            <Switch>
              <Route exact path="/app/sample-page" component={SamplePage} />
            </Switch>
          </Dashboard>
        )
      }
    }
  • Then you can access it at http://localhost:3000/app/sample-page
  • Also you can put the a usual link inside <a /> or material button. See this documentation




Routing Architecture

This is Routing architecture in diagram visuailzation. Click diagram or full screen button full screen to show in new tab with full screen

Create New Component


  • Go to app/components/
  • Create new folder ex: MyComponent. The name must in capitalize
  • Create new js file inside that folder MyComponent, ex SampleComponent.js. The name must in capitalize
  • Inside the file create a simple ES6 Class ex:
    // file: app/components/MyComponent/SampleComponent.js
    
    import React from 'react';
    
    class SampleComponent extends React.Component {
      render() {
        return (
          <H1>Hello World</H1>
        );
      }
    }
    
    export default SampleComponent;
    
    
  • Register it to index. Open file app/components/index.js
  • Import that component
    
    // file: app/components/index.js
    
    import SampleComponent from './MyComponent/SampleComponent';
                                  
  • Open a target page where you want use it. Ex: Open src/app/MyPage/SamplePage. (Example page that we've made in previous section)
  • Import component form component library
    import { SampleComponent } from 'dan-components;
  • Then use it inside render function
    render() {
      return (
        <SampleComponent />
      );
    }
                                
  • Here's complete code
    // file: app/containers/MyPage/SamplePage.js
    
    import React from 'react';
    import { Helmet } from 'react-helmet';
    import { PapperBlock, SampleComponent } from 'dan-components';
    
    class SamplePage extends React.Component {
      render() {
        const title = 'Dandelion Pro. Blank Page';
        const description = 'Dandelion Pro';
        return (
          <div>
            <Helmet>
              <title>{title}</title>
              <meta name="description" content={description} />
              <meta property="og:title" content={title} />
              <meta property="og:description" content={description} />
              <meta property="twitter:title" content={title} />
              <meta property="twitter:description" content={description} />
            </Helmet>
            <PapperBlock title="Blank Page" desc="Some text description">
              <SampleComponent />
            </PapperBlock>
          </div>
        );
      }
    }
    
    export default SamplePage;
    
    
  • Then you can check the result at http://localhost:3000/mypage/sample-page

Clean Code with Eslint


Eslint is disabled by default. You can enable it to keep your code consistent and avoiding bug.
NOTE: By enable eslint the running app process at beginning will slower.

Just follow this step to enable eslint
  • Go to internals/webpack/webpack.base.babel.js
  • Just uncomment this code bellow
    module: {
        rules: [
          /*
            Disabled eslint by default.
            You can enable it to maintain and keep clean your code.
            NOTE: By enable eslint running app process at beginning will slower
          */
          //      {
          //        enforce: 'pre',
          //        test: /\.js?$/,
          //        exclude: [/node_modules/],
          //        loader: 'eslint-loader',
          //        options: {
          //          quiet: true,
          //        }
          //      },
          {
  • Then should become like this
    module: {
        rules: [
          /*
            Disabled eslint by default.
            You can enable it to maintain and keep clean your code.
            NOTE: By enable eslint running app process at beginning will slower
          */
          {
            enforce: 'pre',
            test: /\.js?$/,
            exclude: [/node_modules/],
            loader: 'eslint-loader',
            options: {
              quiet: true,
            }
          },
  • Run the project npm start.
    You will be notified with an error message if your code not clean or consistent. ESLint itself is a tool for identifying and reporting on patterns found in ECMAScript/JavaScript code, with the goal of making code more consistent and avoiding bugs.
    More about elint https://eslint.org/docs/user-guide/getting-started

External Reference

Here's some external reference of library that we used


Fonts Used

roboto font



roboto font

Usage:   Checkout example usage in Ui Elements › Typography

Icons Used


To use icon, it has two method

Material Font Icons

  • Please make sure Google Material Icons already embeded in app/index.html.
    If not just embed this inside head tag
    <head>
          <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" />
    </head>
  • Connect to internet
  • Import Material UI Icon to your component
    import Icon from '@material-ui/core/Icon';
  • Then add it inside render method. Example for use access_time icon
    <Icon>access_time<Icon />



Material SVG Icons

It's interesting to have the building blocks needed to implement custom icons. This template use NPM package, @material-ui/icons, that includes the 900+ official Material icons converted to SvgIcon components.

  • Import all necessary icons form Material UI Icons library
    import AccessTime from '@material-ui/icons/AccessTime';
    import Adjust from '@material-ui/icons/Adjust';
    import BatteryStd from '@material-ui/icons/BatteryStd';
                                
  • Use them as component in render method
     render() {
      return (
        <div>
          <AccessTime />
          <Adjust />
          <BatteryStd />
        <div />
      );
    }
                                



Ionicon SVG

Premium designed icons for use in web, iOS, Android, and desktop apps.

  • Import all necessary icons form Material UI Icons library
    import Ionicon from 'react-ionicons'
                                
  • Use them as component in render method
     render() {
      return (
        <div>
          <Ionicon icon="ios-add-circle" fontSize="35px" onClick={() => console.log('Hi!')} color="red"/>
          <Ionicon icon="ios-alert" rotate={true} fontSize="35px" color="blue"/>
          <Ionicon icon="ios-analytics-outline" fontSize="35px" color="#C9C9C9"/>
          <Ionicon icon="md-basket" fontSize="35px" color="rgb(125, 176, 24)"/>
          <Ionicon icon="md-calculator" rotate={true} fontSize="35px" color="rgb(125, 176, 24)"/>
        <div />
      );
    }
                                



Icons Source



Or from original source Google Material Icons and Ion Icons


Sources and Credit


Fonts :
Open Sans

Preview Images Used
Unsplash
Pixabay
randomuser.me

Note: All images are just used for Preview Purpose Only. They are not part of the template and NOT included in the final purchase files.


Credits
Name Repository License
@babel.js https://github.com/babel/babel MIT
@material-ui https://github.com/mui-org/material-ui MIT
axios https://github.com/axios/axios MIT
classnames https://github.com/JedWatson/classnames MIT
draft-js https://github.com/facebook/draft-js BSD Licensed.
express https://github.com/expressjs/express MIT
history https://github.com/ReactTraining/history MIT
immutable https://github.com/facebook/immutable-js MIT
lodash https://github.com/lodash/lodash MIT
material-ui-pickers https://github.com/dmtrKovalenko/material-ui-pickers MIT
moment https://github.com/moment/moment MIT
mui-datatables https://github.com/gregnb/mui-datatables MIT
prop-types https://github.com/facebook/prop-types MIT
react https://github.com/facebook/react MIT
react-animated-slider https://github.com/erichbehrens/react-animated-slider MIT
react-autosuggest https://github.com/moroshko/react-autosuggest MIT
react-big-calendar https://github.com/intljusticemission/react-big-calendar MIT
react-chartjs-2 https://github.com/reactjs/react-chartjs MIT
react-countup https://github.com/glennreyes/react-countup MIT
react-dropzone https://github.com/react-dropzone/react-dropzone MIT
react-google-maps https://github.com/tomchentw/react-google-maps MIT
react-helmet https://github.com/nfl/react-helmet MIT
react-hot-loader https://github.com/gaearon/react-hot-loader MIT
react-input-range https://github.com/davidchin/react-input-range MIT
react-ionicons https://zamarrowski.github.io/react-ionicons/ MIT
react-loading-bar https://github.com/mironov/react-redux-loading-bar MIT
react-markdown https://github.com/rexxars/react-markdown MIT
react-redux https://github.com/reduxjs/react-redux MIT
react-slick https://github.com/akiran/react-slick MIT
react-syntax-highlighter https://github.com/conorhastings/react-syntax-highlighter MIT
react-trello https://github.com/rcdexta/react-trello MIT
react-ultimate-pagination https://github.com/ultimate-pagination/react-ultimate-pagination MIT
recharts https://github.com/recharts/recharts MIT
redux https://github.com/reduxjs/redux MIT
redux-form https://github.com/erikras/redux-form-material-ui MIT
slick-carousel https://github.com/akiran/react-slick MIT
typeface-roboto https://github.com/KyleAMathews/typefaces/tree/master/packages/roboto MIT

Online Suport


If you have any questions about customization of this template wich are not covered in the documentation feel free to ask a question in the comment section or contact me directly via e-mail form on my profile page.

A product by Ilham Meidi Brata



Enjoy and don’t forget to rate my template.

Thank you very much!

Change Log

Version 1.9.3 – 27 Mar, 2021
Fixed: Mobile issue Big Sidebar Navigation
File changes:
app/components/SidebarBig/MainMenuBig.js
Version 1.9.2 – 13 Dec, 2020
Fixed: Mobile issue Form Panel
File changes:
app/components/Panel/panel-jss.js
Chore: Implement react hooks lifecycle for Maps
File changes:
- app/containers/Maps/*.js
- app/containers/Maps/demos/*.js
Chore: Implement react hooks lifecycle for Forms demo
File changes:
- app/containers/Forms/*.js
- app/containers/Forms/demos/*.js
Chore: Implement react hooks lifecycle for Widgets demo
File changes:
- app/containers/Widgets/*.js
- app/containers/Widgets/demos/*.js
Docs: Update color theme change and deployment
Version 1.9.1 – 25 Oct, 2020
Chore: Implement react hooks lifecycle for Tables
File changes:
- app/components/Tables/*.js
- app/components/Tables/tableParts/*.js
- app/containers/Tables/*.js
- app/containers/Tables/demos/*.js
Chore: Implement react hooks lifecycle for Form Components and User Auth
File changes:
- app/components/Forms/*.js
- app/components/TextEditor/*.js
- app/containers/Pages/Users/*.js
Chore: Implement react hooks lifecycle for Chart demo
File changes:
- app/containers/Charts/*.js
- app/containers/Charts/demos/*.js
Chore: Implement react hooks lifecycle for Pages
File changes:
- app/containers/Pages/BlankPage/index.js
- app/containers/Pages/Blog/*.js
- app/containers/Pages/ComingSoon/index.js
- app/containers/Pages/HelpSupport/*.js
- app/components/Comments/
- app/containers/Pages/Maintenance/index.js
- app/containers/Pages/Photos/index.js
- app/containers/Pages/Pricing/index.js
- app/containers/Pages/Settings/*.js
- app/containers/Pages/Standalone/NotFoundDedicated.js
- app/containers/Pages/UserProfile/index.js
- app/containers/Parent/index.js
- app/components/Profile/*.js
- app/components/Pagination/Pagination.js
- app/components/Badges/LimitedBadges.js
Fixed: Change random color picker
File changes:
- app/redux/modules/ui.js
- app/containers/App/ThemeWrapper.js
Fixed: Textfield icon alignment
File changes:
- app/styles/theme/applicationTheme.js
- app/containers/Forms/demos/InputAdornments.js
Version 1.9.0 – 13 Sep, 2020
Chore: Implement react hooks lifecycle for Landing
File changes:
- app/containers/LandingPage/HomePage.js
- app/containers/LandingPage/SliderPage.js
- app/components/LandingPage/
Chore: Implement react hooks lifecycle for Dashboard
File changes:
- app/containers/Dashboard/
- app/components/Calculator/
- app/components/CardPaper/
- app/components/Counter/
- app/components/PapperBlock/
- app/components/Quote/
Chore: Implement react hooks lifecycle for Sample Apps
File changes:
- app/containers/SampleApps/
- app/components/Calendar/
- app/components/Cart/
- app/components/Chat/
- app/components/Comments/
- app/components/Contact/
- app/components/DynamicInvoice/
- app/components/Email/
- app/components/Panel/
- app/components/Product/
- app/components/Rating/
- app/components/SocialMedia/
- app/components/TaskBoard/
Version 1.8.0 – 16 Aug, 2020
UI changes: Adjust textfield UI
File changes:
- app/styles/theme/applicationTheme.js
Chore: Implement react hooks lifecycle
File changes:
- app/components/Header/header-jss.js
- app/containers/App/*.js
- app/containers/Templates/*.js
- app/containers/Templates/layouts/*.js
- app/components/GuideSlider/index.js
- app/components/Header/*.js
- app/components/Notification/Notification.js
- app/components/Notification/Notification.js
- app/components/Search/*.js
- app/components/Sidebar/*.js
- app/components/SidebarBig/*.js
- app/components/SourceReader/SourceReader.js
- app/components/TemplateSettings/index.js
Docs: Update documentation
Add intallation troubleshooting case.
Version 1.7.1 – 26 Jul, 2020
Adjust chat UI
File changes:
- app/components/Chat/chatStyle-jss.js
- app/components/Chat/chatStyle-jss.js
Fixed editable text in contact form and adjust contact detail background
File changes:
- app/components/Contact/AddContact.js
- app/components/Contact/contact-jss.js
Version 1.7.0 – 10 May, 2020
New Sidebar Feature:
  • One level menu navigation
  • Dramatic transparent blur background
File changes:
- app/components/Sidebar/*.js
- app/components/SidebarBig/*.js
Changed page loader to @material-ui/core/LinearProgress
File changes:
- /app/containers/App/ThemeWrapper.js
Fixed: MUI Datatables pagination in mobile screen
File changes: /app/styles/theme/applicationTheme.js
Performance Enhancement:
  • Reduced build file size
  • Fixed twice render in page transition
File changes:
- app/containers/Forms/demos/RatingCustom.js
- app/containers/Templates/layouts/*.js
Refactor redux structure

Move sample applications actions, constants, reducers, dummy-data, and containers to app/containers/SampleApps/[AppsName]

To make access from view to reducers and actions easier

File changes:
- /internals/webpack/webpack.base.babel.js
- (removed) app/actions/
- (added) app/containers/SampleApps/[AppsName]
- (moved) global action to app/redux/actions and app/redux/constant
- /app/redux/modules/*.js
- /app/redux/reducers.js
Version 1.6.2 – 7 Apr, 2020
Fixed: Collapsible sidebar in Safari
File changes:
- app/components/Sidebar/index.js
- app/components/Sidebar/sidebar-jss.js
Fixed: Cannot clear redux form textfiled
File changes:
- app/components/Forms/ReduxFormMUI.js
Fixed: Missing image in gallery page
File changes:
- app/components/Gallery/photo-jss.js
Fixed: Not aligned CRUD Table icons
File changes:
- app/components/Tables/tableParts/DatePickerCell.js
- app/components/Tables/tableParts/TimePickerCell.js
Fixed: Top navigation menu issue
File changes:
- app/containers/Templates/Dashboard.js
- app/components/Header/DropListMenu.js
- app/components/Header/MegaMenu.js
Version 1.6.1 – 22 Dec, 2019
Fixed: Material UI Table responsive
File changes:
- app/styles/theme/applicationTheme.js
- app/containers/Tables/demos/AdvFilter.js
Fixed: Textfield adornment layout
File changes:
- app/styles/theme/applicationTheme.js
- app/containers/Forms/demos/TextFieldsLayout.js
Version 1.6 – 30 Nov, 2019
Chore: Update Material UI and more packages
Fixed: Upload Preview
Fixed: Add new data if data table is empty
Fixed: Open header menu issue
Fixed: Redux form typing experience
Fixed: Datepicker localizations
Version 1.5.0 – 24 Aug, 2019
Feature: Support for RTL layout
Feature: Add new variant sidebar, Big Sidebar
Feature: Add FAQ section in Pricing page
Chore: Update to Material UI version 4.3
Fixed: Webpack dependencies bundler warning
Version 1.4.0 – 20 May, 2019
Feature: Add 10+ stunning email templates
Chore: Update React Boilerplate to version 4.0
Fixed: Multi level menu spacing in sidebar
Fixed: Blank space in landing page on large screen view (min-width: 1400px)
Version 1.3.2 – 9 Mar, 2019
Feature: Optimized scrolling page speed. Now smoother and faster
Feature: Improved search result for ui components and pages
Fixed: Ui issues for calculator widget, clock widget and contact
Fixed: Wrong way route for pages has reducer state in production build
UI Improvement: Change alignment text to left for avatar on collpased menu
Docs: Add starting point for template diagram flow
Version 1.3.1 – 4 Feb, 2019
UI Improvement: Landing Page, Calendar App, and Settings
Fixed: Textfield icon alignment
Fixed: Search input on focus UI issue
Fixed: Sidebar menu spacing in Creative Landing Page
Version 1.3 – 27 Jan, 2019
Feature: Widget Collections
Redesign: Setting Page
Redesign: Checkout Page
Chore: Update material-ui to version 3.9.0
Chore: Update recharts to version 1.4.2
Chore: Update react-dropzone to version 4.3.0
Docs: Add project hierarchy diagram (HOC, Routing, Redux, Designs and Themes)
Version 1.2.1 – 29 Dec, 2018
Fixed: Error libpng issue during installation on windows 10
Fixed: Missing gradient background in Microsoft Edge
Version 1.2 – 18 Dec, 2018
Chore: Refactor code base on eslint rules.
Fixed: Unreadable API for Icons and Code preview.
UI Improvement: Add new themes Joker, Queen, and Sultan.
UI Improvement: Change School theme color and rename some themes.
Feature: Add random theme option.
Version 1.1 – 10 Dec, 2018
Chore: Update React Boilerplate to 3.7.0
Feature: More sample pages in starter-project (Dashboard, Form, and Table)
Feature: Custom cell components for MUI-Datatables
Feature: Added home link in every logo
Feature: Added badges in sidebar
Fixed: Contact layout in Creative Landing Page
Fixed: Uncomplete page title if title too long
UI Changes: Changed color for School Theme
UI Changes: Changed title color for Background header mode
UI Changes: Now sidebar has standard scrollbar design in all operating system ui
UI Changes: Changed text and re-arrange menu
Version 1.0.1 – 25 Nov, 2018
Chore: Update Material UI Picker to 2.0.2
Fix: Background color in Wysiwyg dark mode menu
Fix: Not working animation of Slider widget title
Fix: Footer position in Blog Article
Docs: Add external reference link
Version 1.0 – 18 Nov, 2018
Dandelion Pro released