Thank you for Purchasing



Dandelion Pro - React Admin Dashboard Template

Version 2.5.4


  • Created : 18 Nov 2018
  • Latest Update : 11 Mar 2024

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, jss (css in js), immer 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

Offline Access


Enable offline access

This is a feature from React Boilerplate which has focus of 'offline first'. So will make easier to build Progressive Web Aplication. The next frontier in performant web apps: availability without a network connection from the instant your users load the app.

  • Open app/app.js At very bottom just enable(uncomment) this code
    if ('serviceWorker' in navigator) {
      window.addEventListener('load', () => {
        navigator.serviceWorker.register('/service-worker.js').then(registration => {
          console.log('SW registered: ', registration);
        }).catch(registrationError => {
          console.log('SW registration failed: ', registrationError);
        });
      });
    }
    }
  • Next, open /internals/webpack/webpack.prod.babel.js Then enable(uncomment) the webpack plugin import
    const WorkboxPlugin = require('workbox-webpack-plugin');
    and enable(uncomment) WorkboxPlugin webpack config around line:87
    new WorkboxPlugin.GenerateSW({
      // these options encourage the ServiceWorkers to get in there fast
      // and not allow any straggling "old" SWs to hang around
      clientsClaim: true,
      navigateFallback: '/index.html',
      skipWaiting: true,
      maximumFileSizeToCacheInBytes: 5242880
    }),
  • Go to console, then do the same as deployment method above. Build the site
    npm run build
  • After finish run the site in production mode
    npm run start:prod
  • Then navigate to http://localhost:3000
  • WARNING: Do not cache build/.htaccess and build/service-worker.js in your server, required for offline-first updates.
  • Note 1: With this feature all scripts will be stored in Local Storage, so can be accessed even offline. And if any updates, The service-worker.js will handle it when browser reload or re-open the site. Once update received, the site won't changes immediately, because the status is pending/waiting, Please run the second reload to set the update as active.
    sw
  • Note 2: 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.
    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


Here's most common error problem when installation and first setup project

  • When installation and you got error like this :
    
    Could not resolve dependency:
    peer example-peer-package@"^3.2.0" from example-package@3.0.0
    example-package@3.0.0 from the root project
            
  • Try to remove the error package (i.e example-package@3.0.0) from package.json Then install again.
    npm install
    After installation done, try to install the problematic package manually with --legacy-peer-deps options.
    npm install example-package@3.0.0 --legacy-peer-deps
    Example for multiple packages
    npm install example-package@3.0.0 other-package@1.0.0 --legacy-peer-deps
  • 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.

  • if got an error with a dependencies installation. Try to remove the all module node_modules/. Then install again with npm install. If error still happen, please try to remove the problematic package node_modules/ foler. After that try to install the problematic package manually. npm install ‹package_name› --save-dev
  • if still got an error. Try to update the problematic package instead.
  • When you run npm run dev, build, etc, then you got error like this:
    
    Error: error:0308010C:digital envelope routines::unsupported
        at new Hash (node:internal/crypto/hash:67:19)
        at Object.createHash (node:crypto:130:10)
            
  • Open terminal and paste these as described:
    1. Linux and macOS (Windows Git Bash)
      export NODE_OPTIONS=--openssl-legacy-provider
    2. Windows command prompt
      set NODE_OPTIONS=--openssl-legacy-provider
    3. Windows PowerShell
      $env:NODE_OPTIONS = "--openssl-legacy-provider"
  • Then try npm run dev or npm run build again
  • 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.
  • If you get error messages when start project npm start like this
    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):
    Error: ENOENT: no such file or directory, scandir '/Users/retina/Documents/Enlite/enlite-prime_v1/starter-project/node_modules/node-sass/vendor'
            
  • 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
  • If you get error messages when login/register or in Pre-build Apps
    {"error":{"code":400,"message":"API key not valid. Please pass a valid API key.","errors":[{"message":"API key not valid. Please pass a valid API key.","domain":"global","reason":"badRequest"}],"status":"INVALID_ARGUMENT"}}
            
  • {"error":{"code":400,"message":"API key not valid. Please pass a valid API key.","errors":[{"message":"API key not valid. Please pass a valid API key.","domain":"global","reason":"badRequest"}],"status":"INVALID_ARGUMENT"}}
                                          @firebase/database: FIREBASE WARNING: Firebase error. Please ensure that you spelled the name of your Firebase correctly
            
  • Please check the firebase configuration in app/firebase/config.js. By default we use fake configuration script.
  • If you haven't make you're configuration please follow the firebase setup instruction
  • Then replace you're config script to app/firebase/config.js


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: []
    };
    


Permanent UI Setting

All UI configuration above will be reseted once page reload. To make it permanent you can store the config in local storage with redux-persist plugins.

  • Open app/redux/configureStore.js
  • In persistConfig.whitelist add the reducer name['ui']
    // file: app/redux/configureStore.js
    const persistConfig = {
      key: 'dandelion',
      storage,
      whitelist: ['ui']
    };                          
                              
  • Make some UI changes, i.e dark-mode then reload the browser, then ui changes will be persisted.
  • Note: you can also add another reducer name to whitelist to save the state in local storage. If you want to reset them, just clear the local storage.


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

Google Maps API Config


Google Maps Platform products are secured from unauthorized use by restricting API calls to those that provide proper authentication credentials. These credentials are in the form of an API key - a unique alphanumeric string that associates your Google billing account with your project, and with the specific API or SDK. For more details please check https://developers.google.com/maps/documentation/javascript/get-api-key

Before you begin

Before you start using the Maps JavaScript API, you need a project with a billing account and the Maps JavaScript API enabled. To learn more, see Set up in Cloud Console.

Creating API keys

The API key is a unique identifier that authenticates requests associated with your project for usage and billing purposes. You must have at least one API key associated with your project.

To create an API key:

  1. Go to the Google Maps Platform > Credentials page. https://console.cloud.google.com/project/_/google/maps-apis/credentials
  2. On the Credentials page, click Create credentials > API key. The API key created dialog displays your newly created API key.
  3. Click Close.The new API key is listed on the Credentials page under API keys.(Remember to restrict the API key before using it in production.)

Adding the API key to your request

You must include an API key with every Maps JavaScript API request. In the following example, replace YOUR_API_KEY with your API key.

<script async defer src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap"></script>

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 2.5.4 – 11 Mar, 2024
Feature: Create unlimited menu level for sidebar
File changes:
- app/api/ui/menu.js
- app/components/Sidebar/MainMenu.js
- app/components/Sidebar/sidebar-jss.js
- aapp/redux/modules/ui.js
Version 2.5.3 – 18 Sep, 2023
Chore: Remove MUI Hidden deprecated component
File changes:
- app/components
Version 2.5.2 – 22 Jul, 2023
Fixed: creative sidebar menu
File changes:
- app/components/LandingPage/SideNav.js
Fixed: EditableFormTable when edit new item
File changes:
- app/containers/Tables/reducers/crudTbFrmReducer.js
Version 2.5.1 – 25 Mar, 2023
Chore: Replace happypack with babel-loader
File changes:
- package.json
- internals/webpack/webpack.base.babel.js
Version 2.5.0 – 27 Jan, 2023
Feature: Add Service Worker
File changes:
- package.json
- app/app.js
- internals/webpack/webpack.prod.babel.js
Chore: Upgrade to Material UI 5
File changes:
- package.json
- app/components/*.js
- app/containers/*.js
- app/styles/theme/applicationTheme.js
Version 2.4.2 – 7 Nov, 2022
Fixed: Deprecated installation react-animated-slider
File changes: package.json
Fixed: Node v18 run and build error
File changes: package.json
Docs: Update troubleshooting cases
Version 2.4.1 – 24 Sep, 2022
Chore: Update Depenedencies
File changes: package.json
Docs: Add redux-persist settings
Version 2.4 – 2 Apr, 2022
Chore: Upgrade to webpack 5
Chore: Update dependencies
Version 2.3 – 15 Feb, 2022
Feature: Redux-persist to connect state with local storage
File changes:
- app/app.js
- app/redux/configureStore.js
Chore: update to react v17 and update another packages
File changes:
- .eslintrc
- package.json
- app/components/**/*
- app/containers/**/*
- app/i18n.js
- internals/webpack/webpack.base.babel.js
- internals/webpack/webpack.dev.babel.js
- internals/webpack/webpack.prod.babel.js
Chore: Change react-scrollspy to organism-react-scroll-nav
File changes:
- package.json
- app/components/LandingPage/SideNavMobile.js
- app/components/LandingPage/Header.js
Docs: Add Google Maps setup
Version 2.2 – 29 Nov, 2021
Chore: Migrate from immutable.js to immer.js
File changes:
- app/app.js
- app/components/**/*
- app/containers/**/*
- app/redux/**/*
Fixed: Single menu active link
File changes:
- app/api/ui/menu.js
- app/components/SidebarBig/MainMenuBig.js
- app/containers/App/Application.js
- app/containers/Parent/index.js
- app/containers/**/*
- app/redux/modules/ui.js
Version 2.1.1 – 5 Sep, 2021
Update deprecated dependecies
File changes:
- package.json
- app/styles/layout/_forms.scss
- app/styles/layout/_variables.scss
- app/components/SourceReader/SourceReader.js
- app/api/dummy/blog-post.md
- app/containers/Pages/Blog/Markdown.js
- server/middlewares/addDevMiddlewares.js
Remove sourcemap warning in devtool
File changes:
- internals/webpack/webpack.base.babel.js
Adjust Blog styling classname
File changes:
- app/components/Profile/profile-jss.js
- app/containers/Pages/Blog/blogStyle-jss.js
- app/containers/Pages/Blog/SidebarBlog.js
Change autocomplete to MUI Lab
File changes:
- app/containers/Forms/Autocomplete.js
- app/containers/Forms/demos/AutoSuggest.js
- app/containers/Forms/demos/HighlightSuggest.js
- app/containers/Forms/demos/SelectSuggestions.js
- app/containers/Forms/demos/SelectSuggestionTags.js
- app/containers/Forms/demos/TagSuggestions.js
- app/styles/theme/applicationTheme.js
Version 2.1.0 – 31 May, 2021
Chore: Implement react hooks lifecycle for sample UI Components and Layouts
File changes:
- app/containers/UiElements/demos/*.js
- app/containers/UiElements/*.js
- app/containers/Layouts/demos/*.js
- app/containers/Layouts/*.js
Fixed: warning on responsive chart dimension
File changes:
- app/containers/Charts/demos/*.js
- app/components/Widget/*.js
Disable offline access by default
File changes:
- app/app.js
- internals/webpack/webpack.prod.babel.js
Docs: Add guide how to enable offline access
Version 2.0.0 – 25 Apr, 2021
Chore: Update react version and update some dependencies.
File changes:
- package.json
- app/components/Calendar/.js
- app/components/TaskBoard/.js
- app/containers/Forms/demos/InlineWysiwyg.js
- app/components/Tables/AdvTable.js
- app/components/DynamicInvoice/CommercialInvoice.js
Feature: change react-google-map to @react-google-maps/api
File changes:
- app/containers/Maps/
Feature: change react-ion-icons to ionicons v3.0.0 font icons
File changes:
- app/containers/
- app/components/
Fixed: Missing socialmedia/timeline component
File changes:
- app/components/SocialMedia/Timeline.js
Fixed: Material UI warning for Accordion and Select compoents
File changes:
- app/containers/Forms/demos/SelectVariant.js
- app/components/Email/EmailList.js
- app/containers/Pages/HelpSupport/
- app/containers/UiElements/demos/Accordion/ControlledAccordion.jss
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