CryptoZone : React Redux Crypto Trading Admin

CryptoZone : React Redux Crypto Trading Admin

CryptoZone

CryptoZone : React Redux Crypto Trading Admin

CryptoZone is a popular open source WebApp template for admin dashboards and admin panels. It utilizes all of the react-bootstrap components in design and re-styles many commonly used plugins to create a consistent design that can be used as a user interface for backend applications.

Thank you for purchasing this React template.

If you like this template, Please support us by rating this template with 5 stars

React.JS Installation & Setup -

1.- Install npm

It will create 'node_module' folder in this all dependency files will be install with this command. npm install

npm install

2.- Run Project

With is command file will be compiled and it will be loaded on local server `http://localhost:3000`. npm start

npm start

3.- Production Build

Builds the app for production to the `build` folder. Run the following command in your terminal. npm run build

npm run build

4.- Note:

To get more help on the React.js checkout React

5.- Further help

You can learn more in the Create React App Documentation To learn React, check out the React Documentation.

Sass Compile -

1.- Install Sass

Sass is an NPM package that compiles Sass to CSS (which it does very quickly too). To install Sass run the following command in your terminal: npm add -D sass 

npm add -D sass

2.- Write Sass Command

Everything is ready to write a small script in order to compile Sass. Open the package.json file in a code editor. You will see something like this:

In the scripts section add an scss command

"scripts": {
  "sass": "sass --watch src/assets/scss/main.scss src/assets/css/style.css"
},

3.- Run the Script

To execute our one-line script, we need to run the following command in the terminal: npm run sass 

npm run sass

Folder Directories -

  • public
    • index.html
  • src
    • context
      • ThemeContext.js
      • ThemeDemo.js
    • css
    • icons
      • avasta
      • feather
      • flaticon
      • font-awesome-old
      • helveticaNeue
      • icomoon
      • line-awesome
      • material-design-iconic-font
      • simple-line-icons
      • themify-icons
    • images
      • avatar
      • big
      • browser
      • card
      • contact
      • demo
      • pattern
      • product
      • profile
      • tab
      • table
    • jsx
      • components
        • AppsMenu
        • bootstrap
        • charts
        • chatBox
        • Dashboard
        • Forms
        • PluginsMenu
        • table
      • layouts
        • nav
          • Header.js
          • NavHader.js
          • SideBar.js
        • ChatBox
        • EventSidebar.js
        • Footer.js
        • PageTitle.js
        • Setting.js
      • pages
        • Error400.js
        • Error403.js
        • Error404.js
        • Error500.js
        • Error503.js
        • ForgotPassword.js
        • LockScreen.js
        • Login.js
        • Registration.js
        • Widget.js
      • index.js
    • scss
      • abstracts
      • base
      • components
        • app
        • charts
        • forms
        • ico
        • map
        • tables
        • uc
        • ui
        • widget
      • layout
        • footer
        • header
        • rtl
        • sidebar
        • theme
        • typography
        • version-dark
        • version-transparent
      • pages
      • main.scss
    • services
      • AuthService.js
      • AxiosInstance.js
      • PostsService.js
    • store
      • actions
      • reducers
      • selectors
      • store.js
    • vendor
      • animate
      • aos
      • bootstrap-select
      • bootstrap-v4-rtl
      • deznav
      • metismenu
      • perfect-scrollbar
    • App.js
    • index.js
  • package.json

Theme Features -

Layout is controlled by settings object Layout Settings inside public/index.html

 <!-- Default layout  -->
 <body   
  data-typography = "poppins"
  data-theme-version = "light"
  data-layout = "vertical"
  data-nav-headerbg = "color_4"
  data-headerbg = "color_1"
  data-sidebar-style = "full"
  data-sibebarbg = "color_4"
  data-sidebar-position = "fixed"
  data-header-position = "fixed"
  data-container = "wide"
  data-primary = "color_1"
  data-secondary = "color_1"
  direction = "ltr"
>

Color Theme -

So many color option available

  • color_1
  • color_2
  • color_3
  • color_4
  • color_5
  • color_6
  • color_7
  • color_8
  • color_9
  • color_10
  • color_11
  • color_12
  • color_13
  • color_14
  • color_15
<!-- layout-1  -->
<body 
  data-typography = "poppins"
  data-theme-version = "light"
  data-layout = "vertical"
  data-nav-headerbg = "color_4"
  data-headerbg = "color_1"
  data-sidebar-style = "full"
  data-sibebarbg = "color_4"
  data-sidebar-position = "fixed"
  data-header-position = "fixed"
  data-container = "wide"
  data-primary = "color_1"
  data-secondary = "color_1"
  direction = "ltr"
>

<!-- layout-2 -->
<body 
  data-typography ="poppins"
  data-theme-version ="light"
  data-layout ="horizontal"
  data-nav-headerbg ="color_2
  data-headerbg ="color_2"
  data-sidebar-style ="full"
  data-sibebarbg ="color_1"
  data-sidebar-position ="fixed"
  data-header-position ="fixed"
  data-container ="wide"
  data-primary ="color_2"
  data-secondary ="color_1"
  direction ="ltr"
>

<!-- layout-3 -->
<body 
  data-typography ="poppins"
  data-theme-version ="light"
  data-layout ="vertical"
  data-nav-headerbg ="color_8"
  data-headerbg ="color_1"
  data-sidebar-style ="full"
  data-sibebarbg ="color_1"
  data-sidebar-position ="fixed"
  data-header-position ="fixed"
  data-container ="wide"
  data-primary ="color_8"
  data-secondary ="color_1"
  direction ="ltr"
>


<!-- layout-4 -->
<body 
  data-typography ="poppins"
  data-theme-version ="light"
  data-layout ="vertical"
  data-nav-headerbg ="color_5"
  data-headerbg ="color_5"
  data-sidebar-style ="full"
  data-sibebarbg ="color_1"
  data-sidebar-position ="fixed"
  data-header-position ="fixed"
  data-container ="wide"
  data-primary ="color_5"
  data-secondary ="color_1"
  direction ="ltr"
>


<!-- layout-5 -->
<body 
  data-typography = "poppins"
  data-theme-version = "light"
  data-layout = "vertical"
  data-nav-headerbg = "color_11"
  data-headerbg = "color_1"
  data-sidebar-style = "full"
  data-sibebarbg = "color_11"
  data-sidebar-position = "fixed"
  data-header-position = "fixed"
  data-container = "wide"
  data-primary = "color_11"
  data-secondary = "color_1"
  direction = "ltr"
>

<!-- layout-6 -->
<body 
  data-typography = "poppins"
  data-theme-version = "light"
  data-layout = "vertical"
  data-nav-headerbg = "color_1"
  data-headerbg = "color_1"
  data-sidebar-style = "full"
  data-sibebarbg = "color_1"
  data-sidebar-position = "fixed"
  data-header-position = "fixed"
  data-container = "wide"
  data-primary = "color_5"
  data-secondary = "color_1"
  direction = "ltr"
>

<!-- layout-7 -->
<body 
  data-typography = "poppins"
  data-theme-version = "light"
  data-layout = "vertical"
  data-nav-headerbg = "color_9"
  data-headerbg = "color_1"
  data-sidebar-style = "full"
  data-sibebarbg = "color_9"
  data-sidebar-position = "fixed"
  data-header-position = "fixed"
  data-container = "wide"
  data-primary = "color_9"
  data-secondary = "color_1"
  direction = "ltr"
>

<!-- layout-8 -->
<body 
  data-typography = "poppins"
  data-theme-version = "light"
  data-layout = "vertical"
  data-nav-headerbg = "color_10"
  data-headerbg = "color_1"
  data-sidebar-style = "mini"
  data-sibebarbg = "color_10"
  data-sidebar-position = "fixed"
  data-header-position = "fixed"
  data-container = "wide"
  data-primary = "color_10"
  data-secondary = "color_1"
  direction = "ltr"
>

Credits -

Project Main Features -

  • Redux
  • Bootstrap
  • Built in SASS
  • Fully Responsive
  • Ready to used widget
  • Detailed Documentation
  • Attractive Calendar
  • Invoice
  • User Profile
  • Timeline
  • Ckeditor
  • Form Examples
  • Many Charts Options
  • Form Validation
  • Input Slider
  • Advanced Form Elements
  • Form Wizard
  • Social
  • Bootstrap
  • Datatable
  • Table Sorting
  • React Table
  • Date Picker
  • Sweetalert
  • Toaster
  • Lightbox
  • Scroll
  • Chatbox
  • Router

Index.js Structure

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
import reportWebVitals from './reportWebVitals';
import { BrowserRouter } from 'react-router-dom';
import {Provider} from 'react-redux';
import {store} from './store/store';
import  ThemeContext  from "./context/ThemeContext"; 
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<React.StrictMode>
 <Provider store = {store}>
  <BrowserRouter basename='/'>
   <ThemeContext>
    <App />
   </ThemeContext> 
  </BrowserRouter>                
 </Provider>	
</React.StrictMode>,  
);
reportWebVitals();

Create a Page

import React from "react";

export function MyPage() {
  return(
   <h1>Hello!</h1>
  ) 
}

Our Products -

Samar | Creative Agency React NextJs Template

Lezato : React Redux Restaurant Admin Template

Boltz - React Crypto Admin and Dashboard Template

Job Board - Job Board React Template

Zenix - React Redux Crypto Admin Dashboard

MOPHY - Payment React Redux Admin Dashboard

Karciz - React Redux Ticketing Admin Dashboard

KingArchitect | Property Portfolio & Real Estate React Template - No JQuery

Industry - Factory & Industrial React Template

Umang Academy : Kindergarten, Kids Play School React Template

Uena - React Saas Admin Dashboard Template

MetroAdmin - Bootstrap, Laravel & React Admin Dashboard

Do You Need Help To Customization

After Purchase A Template...

You Will Start Customizing According Your Requirement
BUT What If You Don't Know

SOLUTION IS HIRE DexignZone

Hire Same Team For Quality Customization

  • We Will Customize Template According To Your Requirement
  • We Will Upload On Server And Make Sure Your Website is Live
rahulxarma dexignzones@gmail.com

Version History - #back to top

26 November 2024

  • Update Dependency
  • Update Code

12 Junuary 2023

  • New - Created & Upload CryptoZone