Giter VIP home page Giter VIP logo

epic-admin-dashboard's Introduction

epic-admin-dashboard

5-minutes-setup React, Next.js, GraphQl and CSS-In-JS framework for any types of web apps.

SignUp or SignIn with your Auth0, or use test user: [email protected] / Dem0Dem0

Features

  • Ready for production after 5 minutes setup
  • Large library of ready components cataloged by StoryBook
  • Server-rendering by Next.js
  • Beautiful design by EpicPxls
  • Stable and predicable data flow with redux, redux-thunk, immer and few more
  • Built-in authentication by Auth0
  • Built-in BaaS integration with GraphCMS
  • Easy change data source to another
  • CSS-in-JS by Emotion
  • Super-fast UI thanks to optimistic rendering (renders before the server returns)
  • All code write by eslint airbnb style guide
  • And awesome notifications by react-toastify

Getting Started

Installation

epic-admin-dashboard is fast to install:

git clone https://github.com/startups-services/epic-admin-dashboard.git
cd epic-admin-dashboard/
npm i 
npm run fetcherinstall

Auth0 Configuration

Create a Regular Web Application in the Auth0 Dashboard.

OR

If you're using an existing application you'll want to verify that the following settings are configured as follows:

  • Json Web Token Signature Algorithm: RS256
  • OIDC Conformant: True

THEN

Go ahead and configure the URLs for your application:

Take yours Client ID, Client Secret and Domain and add them to ./auth0config

GraphCMS Configuration

Create a new project from scratch in GraphCMS

Go to settings page and create one Permanent Access Token(PAT) for Scope "OPEN"

Copy yours ENDPOINT and PAT from this page to /packages/graphcmsfetcher/.env.example Then rename this file to .env

if you want run script to add to default data to the base

npm run resetbasetodefaults

Run locally

we run little node.js app to hide your base credentials from client:

  npm run fetcher

then run app:

  npm run dev

and if you want to see catalog of all components:

  npm run storybook

That's all!

Does It Work With My API?

Yes. If you use GraphQl you may add your own endpoint and send queries to it. If you use REST API, all queries making separate in redux actions and you may easily change graphQL queries execution to REST API calls

Batteries Included But Removable

React-admin is designed as a library of loosely coupled React components built on top of material-ui, in addition to controller functions implemented the Redux way. It is very easy to replace one part of react-admin with your own, e.g. to use a custom datagrid, GraphQL instead of REST, or bootstrap instead of Material Design.

License

Donate

epic-admin-dashboard's People

Contributors

paulcodiny avatar pks1989 avatar

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.