"Zest: React Admin" is a premium admin dashboard theme built with the Powerful React framework and Bootstrap 4 with Reactstrap and create-react-app. It is specially designed to give your admin panel a unique and elegant look. It is easy to customize and coded in developer friendly manner. It is one Multi concept theme with tons of pages.

It is fully responsive admin dashboard template and is adaptive with any size viewport. Solid integration of reusable UI components and latest trending plugins. This theme can be used for various types of project applications. Various niche based admin panels for like Music, CRM, Freelancing, Blogging, Ecommerce, University, Hospital, Social Media and General make this template a complete one stop solution for all your needs.

Zest: React Admin includes many react based plugins. It is designed to be a complete admin panel for any web project.

You will need to have installed Node.js on your computer. Also insure that you have NPM installed.
You can check if these are installed properly by opening up a Terminal (Linux or Mac) or Command Prompt (Windows)
and entering the command: node --version and npm --version These commands should output something similar to "v0.10.31" and "1.4.23" respectively.

Download the project folder and Unzip it on your computer.

Then open your terminal window

Please note that any commands must be ran from the project's root folder.

Open the your project folder in the terminal as per below instructions

Once you have Node and npm installed open your terminal and change the directory to your project folder.

On the Mac you can just type

cd

into the command line and then drag and drop the project folder on to the terminal window. This will add the path of the project directory next to the cd you just typed. Hit return and you have changed to your project folder.

On Windows you will have to open cmd.exe and then type in

cd path\to\project\directory

and hit return to change into your project folder.

Installing plugins

From the project's root folder type

npm install

into the command line.

We've made it easy to develop and test on your local machine. You can start a local server by running the command

From the project's root folder type

npm start

into the command line.

This will start a local server and open up your browser.

Then you can start your browser and visit this link

http://localhost:3000/

Below is the list of commands available for this project. Please make sure all these commands are run in terminal with directory set as your project root directory.

Within the download you'll find the following file structure and contents

Once downloaded, unzip the compressed folder and you'll see something like this:

zest-react-admin
├── CHANGELOG.md
├── LICENSE.md
├── README.md
├── package.json
├── node_modules
│   ├── ...
├── public
│   ├── ...
│   ├── ...
│   ├── index.html
│   └── manifest.json
└── src
    ├── assets
    │   ├── css
    │   ├── fonts
    │   │   └── ...
    │   ├── img
    │   │   └── ...
    │   └── sass
    │       ├── zest-admin
    │       │   ├── mixins
    │       │   │   └── ...
    │       │   ├── plugins
    │       │   │   └── ...
    │       │   └── ...
    │       └── zest-admin.scss
    ├── components
    │   │── blog
    │   │   ├── ...
    │   ├── common
    │   │   ├── ...
    │   ├── ecommerce
    │   │   └── ...
    │   ├── general
    │   │   └── ...
    │   ├── hospital
    │   │   └── ...
    │   ├── music
    │   │   └── ...
    │   ├── social
    │   │   └── ...
    │   ├── university
    │   │   └── ...
    │   └── index.js
    ├── index.js
    ├── routes
    │   └── ...
    │   └── ...
    │   └── index.jsx
    ├── variables
    │   │── blog
    │   │   ├── ...
    │   ├── crm
    │   │   ├── ...
    │   ├── ecommerce
    │   │   └── ...
    │   ├── freelance
    │   │   └── ...
    │   ├── general
    │   │   └── ...
    │   ├── hospital
    │   │   └── ...
    │   ├── music
    │   │   └── ...
    │   ├── settings
    │   │   └── ...
    │   ├── social
    │   │   └── ...
    │   ├── university
    │   │   └── ...
    │   └── topbar.jsx
    └── views
        │── blog
        │   ├── ...
        ├── crm
        │   ├── ...
        ├── ecommerce
        │   └── ...
        ├── freelance
        │   └── ...
        ├── general
        │   └── ...
        ├── hospital
        │   └── ...
        ├── music
        │   └── ...
        ├── social
        │   └── ...
        ├── university
        │   └── ...
        └── index.js

Zest: React Admin has the power of multiple admin themes in one. There are total 9 different admin themes integrated in this one project. Namely General, Hospital, University, Music, CRM, Freelance, Blog, Ecommerce, Social Media.

All the code is separated properly with proper folder names. You can easily separate and use only one or all admins as per your liking.

The procedure to separate each admin different is explained later in this documentation.

Zest: React Admin has dynamic routes integrated from a single file. Routing file of each admin is separate and all are located in src/routes folder of the project.
You will find routing file of each admin matching its name in this folder.

Below is how a routing file looks like

• { path: "/path-for-component", name: "ComponentName", icon: "iconClassName", component: YourComponent, parentid: "uniquename" },
  child: [
  	{ path: "/path-for-component", name: "ComponentName" }
  ]
  { path: "/path-for-component", component: "ComponentName", type: "child" },

  • path (path for your route - this will be seen in the browser url input - example /dashboard)
  • name (name of your route - this will appear in the Sidebar and AdminNavbar components - example Dashboard)
  • icon (icon to be displayed alongside with links in Sidebar component - example i-heart)
  • component (this is the View component that you want to be displayed on the specified route - example Dashboard)
  • layout (path of the layout in which the View component you want to be rendered - in our template demo you only have to options: /admin and /auth - but due to this routing system you can add more, for example /new-layout)

Basic App components like Header, Sidebar, Footer, Chat Bar are located under src/components/common folder.

App Header

The top bar of app is located at src/components/common/Header/Header.jsx

App Sidebar

The sidebar of app is located at src/components/common/Sidebar/Sidebar.jsx

This sidebar is where all the menu links are displayed. It can also be called as left sidebar of the app

ChatSidebar and Chatbar

The chat sidebar of app is located at src/components/common/ChatSidebar/ChatSidebar.jsx

This sidebar is where all the chat contacts are displayed. It can also be called as right sidebar of the app

The chatbar content of app is located at src/components/common/Chatbar/Chatbar.jsx

This Chatbar is having all the details like contacts, groups etc. displayed in chat sidebar.

App Footer

The footer of app is located at src/components/common/Footer/Footer.jsx

This footer is displayed at the end of each page in app.

Header Messages

The messages in header top bar of app is located at src/components/common/Messages/Messages.jsx

This messages are displayed in dropdown of the topbar.

Header Notifications

The messages in header top bar of app is located at src/components/common/Notifications/Notifications.jsx

This notifications are displayed in dropdown of the topbar.

Basic Layout design of each of 9 admins is located under src/layouts folder. All the common components of each admin are defined under layout files.

All site has a admin can have its own individual layout setting. Settings like menu color, top bar color, chat open or closed, menu default size etc. can be defined in each admin individually.
These setting files for each admin are located at src/variables/settings folder.

To easily configure all the data in the app, we define them under variables section. These variable setting files for each admin are located at src/variables folder.
All the variables settings for each admin are separated in their own respective folder. Common layout based settings for each admin are under the src/variables/settings folder.

Since Bootstrap is developed to be mobile first, we use a handful of media queries to create sensible breakpoints for our layouts and interfaces. These breakpoints are mostly based on minimum viewport widths and allow us to scale up elements as the viewport changes.

Bootstrap primarily uses the following media query ranges—or breakpoints—in our source Sass files for our layout, grid system, and components.

// Extra small devices (portrait phones, less than 576px)
// No media query for `xs` since this is the default in Bootstrap

// Small devices (landscape phones, 576px and up)
@media (min-width: 576px) { ... }

// Medium devices (tablets, 768px and up)
@media (min-width: 768px) { ... }

// Large devices (desktops, 992px and up)
@media (min-width: 992px) { ... }

// Extra large devices (large desktops, 1200px and up)
@media (min-width: 1200px) { ... }

While Bootstrap uses ems or rems for defining most sizes, pxs are used for grid breakpoints and container widths. This is because the viewport width is in pixels and does not change with the font size.

See how aspects of the Bootstrap grid system work across multiple devices with a handy table.

All the images are placed under public/images folder.
All the admin have separate folder for their respective images.

Site logo and favicon images are placed under public/images folder.
Along with logo and favicon apple touch icon images are also configured in this app. These images are also located under public/images folder.
This images are included in public/index.html file.

All the images in this react admin app are configured using "node-sass". The scss files are located under src/assets/scss/ folder. All the files are compiled at the time of starting the project. Also any changes made is src/assets/scss/zest-admin.scss file leads to regeneration of src/assets/scss/zest-admin.css file. This css file src/assets/scss/zest-admin.css is included in the src/index.js file.

All the color codes and variables are stored in src/assets/scss/zest-admin/_variables.scss
You can make any color code change in this file and re-save src/assets/scss/zest-admin.scss file. This is regenarete the css file of the project.

Fonts Icons used under this project are located at src/assets/fonts/ folder. "Simple-line-icons" font icons are used in this project. This font icons are integrated in src/index.js file.

Along with these icons fontAwesome icon sets are also integrated in this app. You can view all the icons under general admin -> icon sets menu section.

Google Fonts "Roboto" are used in this app. Following font code <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700" rel="stylesheet" /> is used in public/index.html file.

Following plugins are integrated under package.json file

• Bootstrap 4
• Chart.js
• Font Awesome Icons
• jQuery
• jVectormap
• Moment
• Node SASS
• Perfect Scrollbar
• React Color Picker
• React Slider
• React Autosuggest
• React Big Calendar
• React Bootstrap Datatable
• React CKEditor
• React Count to
• React Data grid
• React Date picker
• React Date Range picker
• React Date Time Picker
• React Wysiwyg editor
• React Dropzone
• React Google Maps
• React Input Mask
• React Masonry gallery
• React Notification Alert
• React Numeric Input
• React Scripts
• React Tagsinput
• React Time Picker
• Reactstrap

To Build your app for production, you need to run the "npm run build" command in your terminal window (all the details stated above).

By default as per the package.json file homepage variable, the build will assume that this app is hosted at /zestreact/app/.

To change the directory to your own you need to replace the zestreact/app with your own directory various places.

1. Open .env file and replace REACT_APP_BASEDIR=/zestreact/app to REACT_APP_BASEDIR=/new/directory and REACT_APP_IMGDIR=/zestreact/app to REACT_APP_IMGDIR=/new/directory. Note: Do not add "/" at the end of the directory path.

2. Open .env.production file and replace REACT_APP_BASEDIR=/zestreact/app to REACT_APP_BASEDIR=/new/directory. Note: Do not add "/" at the end of the directory path.

3. Open package.json file and replace "homepage": "https://jaybabani.com/zestreact/app", to "homepage": "https://yourdomain/new/directory",. Note: Do not add "/" at the end of the directory path.

After changing to desired directory, you must run npm run build command to generate the production build ready for deployment.

This command will generate build folder in your project directory. This might take some time depending on the size of your project.

Once this directory is generated, you can upload this directory on your server via Ftp.

Visit the directory url on your server, you should see your react site up and running online.

In case if images are not displayed properly then please copy the build/public/images folder to the root directory of your server.

All the 9 admins integrated in this app can separated into single admin. First take the backup of all your files and store in a safe place.

Now lets assume you need to separate "general" admin dashboard from the directory and remove all the other admins.

Step 1: Go to public/images directory and delete all folders inside except public/images/general, public/images/mail, public/images/profile.

Step 2: Go to src/components directory and delete all folders except src/components/general, src/components/common. Then open src/components/index.js file in your editor and delete all the sections except Common and General Components. Also make sure you export only components that are included in common and general components only.

Step 3: Go to src/layouts directory and delete all .jsx files except src/layouts/General.jsx, src/layouts/BlankPage.jsx, src/layouts/LoginPage.jsx. Do not delete the src/layouts/PageLayouts folder. Then open src/routes folder delete all files except src/routes/general.jsx. Please make sure to open this file src/routes/general.jsx in your editor and remove the multi purpose components.

Step 4: Go to src/variables directory and delete all folders except src/variables/general, src/variables/settings

Step 4: Go to src/views directory and delete all folders except src/views/general.

Note: You can repeat the above process for all other respective admins as well.

Thank you for purchasing. If you have any questions that are beyond the scope of this documentation, please feel free to contact me at email: themepassion@jaybabani.com.