Git Product home page Git Product logo

crystal-dashboard's Introduction

Crystal React Bootstrap Dashboard

Crystal Dashboard

Crystal React Bootstrap Dashboard is a beautiful, multi-purpose admin dashboard which is with React, Redux & Bootstrap. It contains a lot of simple and easy to use React components. You can use this dashboard to build many kind of dashboard include health, employees, company dashboard.

This package includes:

  • Charts
  • Buttons
  • Notifications
  • Sweet Alert
  • Redux Form
  • AirBnB React Dates
  • Google Map
  • Uber Vector Map
  • React Bootstrap Table
  • React Big Calendar

In order to keep our stylesheet easy to maintain and customize by everyone. Stylesheet is writen by SCSS.

Live preview

Get started

Development

git clone https://github.com/jslancerteam/crystal-dashboard
npm install
npm start

Build

npm run build

File structure

./src/
├── assets
│   ├── images
│   └── styles
│       ├── base  
│       ├── base.scss
│       ├── icons.scss
│       └── react-dates
├── components
│   ├── FormInputs
│   │   ├── Checkbox.js
│   │   ├── Radio.js
│   │   ├── TextInput.js
│   │   ├── index.js
│   │   └── renderField.js
│   ├── MobileMenu.js
│   ├── MyBigCalendar
│   │   ├── Toolbar.js
│   │   └── index.js
│   ├── SideBar
│   │   ├── Nav.js
│   │   ├── UserInfo.js
│   │   └── index.js
│   ├── Switch.js
│   ├── Tags.js
│   └── ThemeOptions.js
├── config
│   └── configureStore.js
├── index.js
├── pages
│   ├── Calendar
│   │   └── index.js
│   ├── Charts
│   │   ├── Nasdaq.js
│   │   ├── PerformanceChart.js
│   │   ├── PublicPreference.js
│   │   ├── UserBehavior.js
│   │   └── index.js
│   ├── Components
│   │   ├── Buttons
│   │   │   ├── ButtonGroups.js
│   │   │   ├── ButtonSizes.js
│   │   │   ├── ButtonStyles.js
│   │   │   ├── ButtonsWithLabel.js
│   │   │   ├── Colors.js
│   │   │   ├── Pagination.js
│   │   │   ├── SocialButtons.js
│   │   │   └── index.js
│   │   ├── Grid
│   │   │   ├── GridCollection.js
│   │   │   ├── Paragraph.js
│   │   │   └── index.js
│   │   ├── Icons.js
│   │   ├── Notifications.js
│   │   ├── Panels
│   │   │   ├── AccordionGroup.js
│   │   │   ├── PageSubcategories.js
│   │   │   ├── TabGroup.js
│   │   │   └── index.js
│   │   ├── SweetAlert.js
│   │   ├── Typography.js
│   │   └── index.js
│   ├── Dashboard
│   │   ├── EmailChart.js
│   │   ├── SalesChart.js
│   │   ├── Tasks.js
│   │   ├── UserBehaviorChart.js
│   │   └── index.js
│   ├── Forms
│   │   ├── ExtendedForms
│   │   │   ├── DatePicker.js
│   │   │   ├── Switches.js
│   │   │   ├── TagSection.js
│   │   │   └── index.js
│   │   ├── RegularForms
│   │   │   ├── FormElements.js
│   │   │   ├── HorizontalForm.js
│   │   │   ├── StackedForm.js
│   │   │   └── index.js
│   │   ├── ValidationForms
│   │   │   └── index.js
│   │   └── index.js
│   ├── Icons
│   │   └── index.js
│   ├── Main
│   │   ├── Footer.js
│   │   ├── Header.js
│   │   └── index.js
│   ├── MapsPage
│   │   ├── GoogleMap.js
│   │   ├── Map.js
│   │   ├── VectorMap.js
│   │   └── index.js
│   ├── Tables
│   │   ├── ExtendedTables
│   │   │   ├── BigTable.js
│   │   │   ├── TableWithLinks.js
│   │   │   ├── TableWithSwitch.js
│   │   │   └── index.js
│   │   ├── ReactBootstrapTable
│   │   │   └── index.js
│   │   ├── RegularTables
│   │   │   ├── PlainBackgroundTable.js
│   │   │   ├── StripedTable.js
│   │   │   └── index.js
│   │   ├── generateData.js
│   │   └── index.js
│   └── UserProfile
│       ├── ProfileForm.js
│       ├── UserInfo.js
│       └── index.js
├── reducers
│   ├── Auth.js
│   ├── Layout.js
│   ├── ThemeOptions.js
│   └── index.js
└── registerServiceWorker.js

Author

David Tran @davidtranwd

License

Licensed under MIT

crystal-dashboard's People

Contributors

davidtran avatar lpbaiser avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

crystal-dashboard's Issues

Login Page

Hi Brother,

Brother, can you help me to create login page for this dashboard. because I'm beginner in react-redux, and i tried login page but, its not routing to main dashboard after clicking the login button, please help me. Thank you....

Run with PM2 on production server

I am not able to run its build to production server.
Getting “Uncaught SyntaxError: Unexpected token <”

I am using following code to run the production build

const express = require('express')
const path = require('path')
const port = 3002
const app = express()
// this assumes that all your app files
// `public` directory relative to where your server.js is
app.use(express.static(__dirname + '/build'))

app.get('*', function (request, response){
  response.sendFile(path.resolve(__dirname, 'build', 'index.html'))
})

app.listen(port)

Package.json not found

PS E:\React_JS\DashBoardzif\crystal-dashboard-master> npm start

npm ERR! path E:\React_JS\DashBoardzif\crystal-dashboard-master

\package.json

npm ERR! code ENOENT
npm ERR! errno -4058
npm ERR! syscall open
npm ERR! enoent ENOENT: no such file or directory, open 'E:\React_JS\DashBoardzif\crystal-dashboard-master\package.json'
npm ERR! enoent This is related to npm not being able to find a file.
npm ERR! enoent

npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\baps\AppData\Roaming\

npm-cache_logs\2019-01-22T13_09_12_243Z-debug.log

Bug: Compile error

Receiving a compile error on Node v8.9.1:

Failed to compile.

./src/index.js
Module not found: Can't resolve 'sweetalert/dist/sweetalert.css' in '/Users/${user}/dashboards/v1/crystal-dashboard/src'

I am not seeing where 'sweetalert/dist/' is coming from. It compiles if I comment out the code, but the Sweetalert features are not styled. Any idea what could be going on?

Cannot read property 'entryOption' of undefined crystal dashboard

This error keeps popping up everytime I try to npm start.

The complete error log:

Plugin could not be registered at 'html-webpack-plugin-before-html-processing'. Hook was not found.
BREAKING CHANGE: There need to exist a hook at 'this.hooks'. To create a compatibility layer for this hook, hook into 'this._pluginCompat'.
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] start: `cross-env NODE_PATH=./src node scripts/start.js`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the [email protected] start script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/VIKRANT/.npm/_logs/2020-03-01T08_42_59_161Z-debug.log

Select box or drop down box

I am not able to find any component for single select box or multiple select box. There is no example in forms as well. Is there any reason for that. Can you add that?

Is this a copy of the original Light Bootstrap Dashboard PRO?

Hi, I've just seen this product licensed under MIT and it is looking almost identical with our products:

Light Bootstrap Dashboard PRO React: https://www.creative-tim.com/product/light-bootstrap-dashboard-pro-react
Light Bootstrap Dashboard PRO: https://www.creative-tim.com/product/light-bootstrap-dashboard-pro

We've seen a lot of elements and designs were replicated from our product. We would appreciate some credits pointing to the original product.

Best,
Alex

No loading icon

When template is being loaded first time then no loading icon or message is shown which is not good user experience, need to fix.

Possible bug in side bar

I'm using this dashboard in my project, so I programming my pages and components. But I think that occurred this bug in side bar component. I think so this problem is scss code, because I removed the 'div' class and the problem has slightly improved. But that did not solve. Can you help me?

screen shot 2018-02-12 at 00 11 56

Missing menu

When I resize browser width, if it's large enough, the sidebar is shown. If it's mobile, the sidebar is hidden, but there is burger menu.

But, in between 762px and 992px, there is no burger menu nor the sidebar is shown. Is it intended?

components/Switch module is missing

Failed to compile.

./src/pages/Forms/ExtendedForms/Switches.js
Module not found: Can't resolve 'components/Switch' in '\crystal-dashboard-master\src\pages\Forms\ExtendedForms'

Help

Hello,
I am new at react, please I need help.
I tried you project but i got the following errors below:

C:\Users\Godstime\Desktop\ReactAdminTemp\crystal-dashboard-master>npm start

[email protected] start C:\Users\Godstime\Desktop\ReactAdminTemp\crystal-dashboard-master
NODE_PATH=./src node scripts/start.js

'NODE_PATH' is not recognized as an internal or external command,
operable program or batch file.
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] start: NODE_PATH=./src node scripts/start.js
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] start script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\Godstime\AppData\Roaming\npm-cache_logs\2018-02-02T07_08_08_959Z-debug.log

Issue while running on prod mode

Hi,

I am getting below issues while running on production mode. Basically, I am running client from node js server. I ma using Node JS version 10.15.
Uncaught SyntaxError: Unexpected token <
manifest.json:1 Manifest: Line: 1, column: 1, Unexpected token.

Can you please help.

Thank you,
Shripad

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.