React Next D3 screenshot

React Next D3

Author Avatar Theme by Edwardcdev
Updated: 25 Oct 2021
32 Stars

A simple dashboard template using Material UI, D3.js, React, Next.js, GraphQL and MongoDB

Categories

Overview

The Simple Dashboard is a React/Redux/Relay/Next.js dashboard template that utilizes Material UI. It offers a dark and light theme option and incorporates various technologies such as GraphQL, Formik, Mapbox GL, and more. The project follows a modular “ducks” project structure with a Dependency Injection Container and is comprised of MongoDB, Redis, API Servers, and Front Servers.

Features

  • React/Redux with Hooks, Immutable, Thunk, Reselect, etc.
  • GraphQL with subscriptions using React Relay Modern (not Apollo)
  • Next.js with Webpack and Babel doing cached Server Side Rendering (SSR) on an Express.js backend with Redis and MongoDB via Mongoose
  • Material UI with custom dark and light themes
  • Internationalization using React Intl (Format.js) which supports ICU message syntax
  • Formik, Mapbox GL, DeckGL, D3, Victory Chart, React Intl, React Virtualized, etc.
  • Email/password or Twitter/Google/Facebook authorization using Passport.js
  • Caching service worker from Google Workbox
  • Modular “ducks” project structure with Dependency Injection Container

Installation

To install the Simple Dashboard, follow these steps:

  1. Make sure MongoDB and Redis are password protected or not accessible from the public network.
  2. Set up and configure MongoDB and Redis.
  3. Clone the repository.
  4. Navigate to the cloned directory.
  5. Install dependencies by running the following command:
    npm install
    
  6. Start the servers by running the following command:
    npm run dev
    

Summary

The Simple Dashboard is a powerful dashboard template built using React/Redux/Relay/Next.js and Material UI. It offers a range of features, including support for GraphQL, internationalization, and various libraries for data visualization. The project follows a modular project structure and utilizes MongoDB and Redis for data storage and caching. By following the installation guide, users can easily set up and start using the Simple Dashboard for their own applications.