More Premium Hugo Themes Premium Nextjs Themes

Next Dashboard

A complete React/Redux/Relay/Next.js dashboard example

Next Dashboard

A complete React/Redux/Relay/Next.js dashboard example

Author Avatar Theme by basarevych
Github Stars Github Stars: 66
Last Commit Last Commit: Aug 2, 2020 -
First Commit Created: Jun 19, 2023 -
Next Dashboard screenshot

Overview:

Next™ React™ Dashboard is a complete React/Redux/Relay/Next.js dashboard example that showcases the use of Material UI and other related technologies. With its perfect benchmarks, this dashboard provides a solid foundation for building robust and efficient web applications.

Features:

  • Dark Theme: Offers a sleek and visually appealing dark theme option.
  • Light Theme: Provides a clean and modern light theme option.
  • React with Hooks, Redux, Immutable, Thunk, Reselect, etc.: Uses the latest React features and libraries for state management, immutability, and efficient data fetching.
  • GraphQL with subscriptions using React Relay Modern: Implements GraphQL subscriptions, leveraging the power of React Relay Modern.
  • Next.js with Webpack and Babel doing cached Server-Side Rendering (SSR): Utilizes Next.js with Webpack and Babel to achieve server-side rendering with caching capabilities.
  • Material UI with custom dark and light themes: Uses Material UI library with customizable dark and light themes.
  • Formik for forms with Yup for validation: Implements Formik for form management and Yup for easy and comprehensive form validation.
  • Internationalization using React Intl (Format.js): Supports internationalization using React Intl, which follows the ICU message syntax.
  • Email/password or Twitter/Google/Facebook authorization using Passport.js: Provides multiple options for user authentication, including email/password and popular third-party platforms.
  • Additionally: MapboxGL and DeckGL, D3 and Victory charts, React Virtualized, etc.: Includes various additional libraries and components for advanced data visualization and UI enhancements.
  • Caching service worker from Google Workbox: Implements a caching service worker using Google Workbox for improved performance and offline capabilities.
  • Modular “ducks” project structure with Dependency Injection Container: Adopts a modular project structure using “ducks” pattern and incorporates a Dependency Injection Container for improved maintainability and extensibility.

Installation:

To install and set up the Next™ React™ Dashboard, follow the steps below:

  1. Make sure you have MongoDB and Redis installed and running locally or on a remote server.
  2. Clone the repository from GitHub: git clone [repo_url]
  3. Install the necessary dependencies using Yarn or npm: yarn install or npm install
  4. Configure the MongoDB and Redis connection details in the appropriate configuration files.
  5. Start the MongoDB and Redis servers.
  6. Start the API server by running: npm run start:api-server
  7. If SSR is required, start the SSR server by running: npm run start:ssr-server
  8. Access the Next™ React™ Dashboard in your browser at http://localhost:3000

Note: Ensure that both Mongo and Redis are password protected or not accessible from the public network to maintain security.

Summary:

Next™ React™ Dashboard is a comprehensive example of a React/Redux/Relay/Next.js dashboard. With its use of Material UI and other related technologies, it offers a robust and performant solution for building web applications. The dashboard boasts a range of features, including dark and light theme options, GraphQL with subscriptions, server-side rendering, customizable forms with validation, internationalization support, and various additional libraries for advanced functionality. The project structure is modular and easily maintainable, and it makes use of caching and service workers for optimized performance. Proper security measures should be taken to protect MongoDB and Redis instances.