Giter VIP home page Giter VIP logo

flatlogic / react-dashboard Goto Github PK

View Code? Open in Web Editor NEW
1.6K 57.0 363.0 22.88 MB

πŸ”₯React Dashboard - isomorphic admin dashboard template (React.js, Bootstrap, Node.js, GraphQL, React Router, Babel, Webpack, Browsersync) πŸ”₯

Home Page: https://flatlogic.com/admin-dashboards/react-dashboard/demo

JavaScript 94.01% HTML 0.45% SCSS 5.54%
react dashboard bootstrap graphql hmr browsersync webpack react-router react-router-v4 redux

react-dashboard's Introduction

React Dashboard β€” "isomorphic" admin dashboard template

built with React, Bootstrap, React Router, Redux and GraphQL based on Create React App and latest industry best practices.

View Demo | Download | More templates | Support forum

react-dashboard

This seed project is like a free version of a template you can find on Themeforest or Wrapbootstrap, with working backend integration, to get you started on your next business software development.

Features

  • React
  • Mobile friendly layout (responsive)
  • React Router
  • Bootstrap3
  • GraphQL
  • Nodejs backend inegration
  • Sass styles
  • Stylish, clean, responsive layout
  • Lots of utility css classes for rapid development (flatlogic css set)
  • Authentication
  • CRUD operations examples

Quick Start

1. Get the latest version

You can start by cloning the latest version of React Dashboard on your local machine by running:

$ git clone -o react-dashboard -b master --single-branch \
      https://github.com/flatlogic/react-dashboard.git MyApp
$ cd MyApp

2. Run yarn install

This will install both run-time project dependencies and developer tools listed in package.json file.

3. Run yarn dev

This command will start the app with simultaneously with express server, set up your database, start local server XAMPP, opensever, or other tool to start database, connect to it in file

src > data > sequelize.js.

Also go to

src > data > schema.js 

and enable mutation. This preparation will enable to realize CRUD operations locally

4. How to create db

Create db. For instance name it "sequelize" and add posts table to it, your table should have same structure as you can see on the screenshot
table structure

http://localhost:3000/ β€” Node.js server
http://localhost:3000/graphql β€” GraphQL server and IDE

Now you can open your web app in a browser, on mobile devices and start hacking. Whenever you modify any of the source files inside the /src folder, the module bundler (Webpack) will recompile the app on the fly and refresh all the connected browsers.

For more info please refer to getting started guide to download and run the project (Node.js >= 6.5)

Support

For any additional information please go to our support forum and raise your questions or feedback provide there. We highly appreciate your participation!

How can I support developers?

Premium themes

Looking for premium themes and templates? Check out more admin dashboard templates at flatlogic.com.

License

MIT and another MIT from RSK.

react-dashboard's People

Contributors

bawjensen avatar chentaixu avatar cmrnh avatar dependabot[bot] avatar dimasavchenko avatar edikocruz avatar frenzzy avatar goatslacker avatar granda avatar greenkeeperio-bot avatar guardofparadise avatar haikov avatar koistya avatar kulgavy avatar langpavel avatar m-numonov avatar matrus2 avatar michaeldaineka avatar nodkz avatar okendoken avatar richb-hanover avatar rsanchezpp avatar rusjoan avatar salttis avatar sdiaz avatar shoudaos avatar stupidism avatar tobiasmuehl avatar zhiyelee avatar zwhitchcox 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  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

react-dashboard's Issues

unable to install 'yarn install'

so first off i get:

yarn install v1.15.2
[1/5] πŸ” Validating package.json...
error [email protected]: The engine "node" is incompatible with this module. Expected version "8.10.0". Got "11.15.0"
error Found incompatible module
info Visit https://yarnpkg.com/en/docs/cli/install for documentation about this command.

kinda odd, but no major worries, i just change package.json and continue. and then i start getting the mother of all errors:

warning Error running install script for optional dependency: "/dashboard/node_modules/fsevents: Command failed.
Exit code: 1
Command: node install
Arguments:
Directory: /dashboard/node_modules/fsevents
Output:
node-pre-gyp info it worked if it ends with ok
node-pre-gyp info using [email protected]
node-pre-gyp info using [email protected] | darwin | x64
node-pre-gyp info check checked for "/dashboard/node_modules/fsevents/lib/binding/Release/node-v67-darwin-x64/fse.node" (not found)
node-pre-gyp http GET https://fsevents-binaries.s3-us-west-2.amazonaws.com/v1.1.2/fse-v1.1.2-node-v67-darwin-x64.tar.gz
node-pre-gyp http 404 https://fsevents-binaries.s3-us-west-2.amazonaws.com/v1.1.2/fse-v1.1.2-node-v67-darwin-x64.tar.gz
node-pre-gyp ERR! Tried to download(404): https://fsevents-binaries.s3-us-west-2.amazonaws.com/v1.1.2/fse-v1.1.2-node-v67-darwin-x64.tar.gz

another output: 'Failed to execute '/Users/david/.nvm/versions/node/v11.15.0/bin/node /Users/david/ballpark/dashboard/node_modules/node-gyp/bin/node-gyp'

the final output is: 'gyp ERR! cwd /Users/david/ballpark/dashboard/node_modules/sqlite3'

then i get a ton of 'gyp info spawn args' output in the terminal. i've tried with npm and different versions of node, but no luck. really not sure how to get around with this one - obviously not convinced it's an error with this project but wondering if anyone might know a solution?

yarn install returns: Expected version "8.10.0". Got "11.9.0"

yarn install v1.13.0
[1/5] Validating package.json...
error [email protected]: The engine "node" is incompatible with this module. Expected version "8.10.0". Got "11.9.0"
error Found incompatible module
info Visit https://yarnpkg.com/en/docs/cli/install for documentation about this command.

I am running 16.04.5 LTS (Xenial Xerus) unpatched at AWS kernel version 4.4.0-1075-aws. node -v reports v11.9.0. Is there any additional information you need from me?

Cannot find module 'bundle-loader?lazy!../pages/register/Register' from 'App.js'

I've just cloned the repo and successfully performed yarn install + yarn start and have the example dashboard up and running which is great.

However when I run the tests I get the following error:

$ yarn test
yarn run v1.1.0
$ jest

 FAIL  src\components\Layout\Layout.test.js
  ● Test suite failed to run

    Cannot find module 'bundle-loader?lazy!../pages/register/Register' from 'App.js'

      at Resolver.resolveModule (node_modules/jest-resolve/build/index.js:179:17)
      at Object.<anonymous> (src/components/App.js:20:374)

Test Suites: 1 failed, 1 total
Tests:       0 total
Snapshots:   0 total
Time:        1.06s
Ran all test suites.
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

I'm not familiar with bundle-loader so thought I would ask on here in case it was an easy fix.

Many Thanks for making the skeleton public as RSK + React Router v4 is exactly what I'm looking for and being a complete Node.js novice hopefully this will give me a really big boost.

Cheers

Alex

System Info:

Windows 10 Pro
node v6.10.3
npm 3.10.10
yarn 1.1.0

Any way to make this static?

Hi guys, love the work you have done with the dashboard and how everything is organized and well explained.
I was actually wondering how to modify this project so that it uses the good-old index.html/js approach to be able to easily deploy it as a static page. I know this might involve heavy modification of webpack config file (in which I'm still no expert). I tried some changes but I can't make it like that yet.
I won't ask you guys if you can do it, but rather if you have any advice that can point me in the right direction on how to achive this (or maybe something like "don't even bother, the way this is structured, it can't be done).
Anyway, any advice would be much appretiated!
Thanks in advance for your time

Babel error at `yarn start`

Issue

$ babel-node tools/run start
/HOME/react-dashboard-try/node_modules/@babel/core/lib/config/full.js:135
    throw e;
    ^

Error: [BABEL] /HOME/react-dashboard-try/tools/run.js:   
Error: [BABEL] /HOME/react-dashboard-try/tools/run.js: 
As of v7.0.0-beta.55, we've removed Babel's Stage presets.
Please consider reading our blog post on this decision at
https://babeljs.io/blog/2018/07/27/removing-babels-stage-presets
for more details. TL;DR is that it's more beneficial in the
  long run to explicitly add which proposals to use. 

For a more automatic migration, we have updated babel-upgrade,
https://github.com/babel/babel-upgrade to do this for you with
"npx babel-upgrade".If you want the same configuration as before:

{
  "plugins": [
    // Stage 2
    ["@babel/plugin-proposal-decorators", { "legacy": true }],
    "@babel/plugin-proposal-function-sent",
    "@babel/plugin-proposal-export-namespace-from",
    "@babel/plugin-proposal-numeric-separator",
    "@babel/plugin-proposal-throw-expressions",
    // Stage 3
    "@babel/plugin-syntax-dynamic-import",
    "@babel/plugin-syntax-import-meta",
    ["@babel/plugin-proposal-class-properties", { "loose": false }],
    "@babel/plugin-proposal-json-strings"
  ]
}
 If you're using the same configuration across many separate projects,
keep in mind that you can also create your own custom presets with
whichever plugins and presets you're looking to use.

module.exports = function() {
  return {
    plugins: [
      require("@babel/plugin-syntax-dynamic-import"),
      [require("@babel/plugin-proposal-decorators"), { "legacy": true }],
      [require("@babel/plugin-proposal-class-properties"), { "loose": false }],
    ],
    presets: [
      // ...
    ],
  };
};

(While processing: "/HOME/react-dashboard-try/node_modules/@babel/preset-stage-2/lib/index.js")
   at _default (/HOME/react-dashboard-try/node_modules/@babel/preset-stage-2/lib/index.js:9:9)
   at loadDescriptor (/HOME/react-dashboard-try/node_modules/@babel/core/lib/config/full.js:165:14)
   at cachedFunction (/HOME/react-dashboard-try/node_modules/@babel/core/lib/config/caching.js:33:19)
   at loadPresetDescriptor (/HOME/react-dashboard-try/node_modules/@babel/core/lib/config/full.js:235:63)
   at config.presets.reduce (/HOME/react-dashboard-try/node_modules/@babel/core/lib/config/full.js:77:21)
   at Array.reduce (<anonymous>)
   at recurseDescriptors (/HOME/react-dashboard-try/node_modules/@babel/core/lib/config/full.js:74:38)
   at loadFullConfig (/HOME/react-dashboard-try/node_modules/@babel/core/lib/config/full.js:108:6)
   at loadOptions (/HOME/react-dashboard-try/node_modules/@babel/core/lib/config/index.js:27:36)
   at OptionManager.init (/HOME/react-dashboard-try/node_modules/@babel/core/lib/index.js:231:36)
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

Reproduce

  • Clone repo as instructed in README
  • yarn install
  • yarn start

node v10.16.3
yarn v1.17.3

error python

on windows with node 8, with a 'npm install' node gyp is looking for python as an env variable, even after installing python, still cant install

Error when Yarn Dev

In first time Load, screen need loading Login
But no token or invalid token in localStorage
So When run
src/pages/login/Login.js has error at line 43

return date < data.exp;
change to
return data && date < data.exp;
has fix it

And when load dashboard, has some error by posts null
check /src/actions/posts and fix
Please

Missing Tests

I see that the tests folder is pretty much empty. Are we planning on writing any Unit/Integration/Snapshot tests?

yarn start error

Error

I got this error after I did yarn install.
How can I fix this?

License

Hey,

Can this theme be used for any commercial usage?

Many thanks

not working remote server

Hi;
maybe there is a simple solution but I might not have done it because I'm a beginner.

I build with 'yarn run build -- --release'

then I upload the build folder to my nginx node server.
screen shot 2017-10-08 at 21 33 07

then i run 'yarn install'
and then start the app with 'sudo pm2 start server.js'
screenshot at oct 08 21-31-52

and finally when I open the website, app can not find client and vendor file

screen shot 2017-10-08 at 21 36 25

Where am I doing wrong?

Command: node-pre-gyp install --fallback-to-build

Arguments:
Directory: /home/sush/Instafashion_Admin/node_modules/sqlite3
Output:
node-pre-gyp info it worked if it ends with ok
node-pre-gyp info using [email protected]
node-pre-gyp info using [email protected] | linux | x64
node-pre-gyp info check checked for "/home/sush/Instafashion_Admin/node_modules/sqlite3/lib/binding/node-v64-linux-x64/node_sqlite3.node" (not found)
node-pre-gyp http GET https://mapbox-node-binary.s3.amazonaws.com/sqlite3/v3.1.13/node-v64-linux-x64.tar.gz
node-pre-gyp http 403 https://mapbox-node-binary.s3.amazonaws.com/sqlite3/v3.1.13/node-v64-linux-x64.tar.gz
node-pre-gyp ERR! Tried to download(403): https://mapbox-node-binary.s3.amazonaws.com/sqlite3/v3.1.13/node-v64-linux-x64.tar.gz
node-pre-gyp ERR! Pre-built binaries not found for [email protected] and [email protected] (node-v64 ABI, glibc) (falling back to source compile with node-gyp)
node-pre-gyp http 403 status code downloading tarball https://mapbox-node-binary.s3.amazonaws.com/sqlite3/v3.1.13/node-v64-linux-x64.tar.gz
node-pre-gyp ERR! Tried to download(undefined): https://mapbox-node-binary.s3.amazonaws.com/sqlite3/v3.1.13/node-v64-linux-x64.tar.gz
node-pre-gyp ERR! Pre-built binaries not found for [email protected] and [email protected] (node-v64 ABI, glibc) (falling back to source compile with node-gyp)
node-pre-gyp http Connection closed while downloading tarball file

JWT Should be Stored in an HttpOnly Cookie

Please check if there is a security issue.

  1. server/server.js, line 40.

Setting "httpOnly" to false may be due to specific design needs or use cases. In some cases, applications may need to access cookie data via JavaScript to implement specific functionality or to interact with other components. However, to be clear, setting "httpOnly" to false may increase potential security risks. Allowing client-side JavaScript to access cookies containing sensitive data can lead to security issues such as XSS attacks. An attacker could exploit the vulnerability to steal a user's credentials or perform malicious actions.

It is recommended to set "httpOnly" to true to enhance the platform's security and prevent cross-site scripting (XSS) attacks and other security vulnerabilities.

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.