Black Dashboard React x genezio

Black Dashboard React x genezio is a full-stack serverless admin dashboard template that pairs Creative Tim's Black Dashboard React frontend with a genezio-managed backend, letting you deploy a data-driven dashboard and its API with a single command. The frontend is a React single-page application built with create-react-app, styled with Bootstrap 4 and Reactstrap, and the backend is a set of genezio-deployed classes that generate JavaScript SDKs automatically.

What is Black Dashboard React x genezio?

This template combines the Black Dashboard React admin UI with genezio's serverless platform. The frontend is a React (create-react-app) app using Bootstrap 4, Reactstrap, and Chart.js, with over 16 components and pages like Dashboard, User Profile, Tables, Map, Notifications, Login, Register, and RTL. The backend consists of genezio classes (user, product, order, task, article) and dozens of data models, with generated SDK files in the frontend that let the React app call serverless functions remotely. It is maintained by Creative Tim and is available under the MIT license.

Key Features

• React + Bootstrap 4 stack — Built with create-react-app, Reactstrap, and Bootstrap 4, with SASS files for customizing colors and component styles.
• Dark and Light modes — Includes both dark mode and light mode themes, switchable through the included ThemeContext and BackgroundColorContext components.
• Over 16 dashboard components — Cards, tables, charts, alerts, badges, forms, and more, all designed to combine and accept color variations.
• Charts via Chart.js — Uses the React Chartjs wrapper and Chart.js for line, bar, and other charts; chart data is defined in src/variables/charts.js.
• genezio serverless backend — Backend classes for user, product, order, task, and article, with generated SDKs in frontend/backend-sdk that call serverless functions from the client.
• Dozens of data models — The backend/models folder includes more than 20 model files (users, products, orders, clients, employees, hotels, rooms, songs, and more), ready for varied business domains.
• Prebuilt pages and layouts — Admin, Auth, and RTL layouts; views include Dashboard, User Profile, Tables, Map, Notifications, Icons, Typography, Login, and Register.
• One-click deployment — The GitHub README includes a Deploy to Genezio button, or you can run genezio deploy --env backend/.env after installing the CLI.

Who is it for?

• Developers building admin panels — Who want a styled React dashboard with ready-to-use components and pages, plus a serverless API to persist data.
• Startups prototyping full-stack products — Who need user auth, product/order management, and other common data models without provisioning their own server.
• Creative Tim users — Who already use Black Dashboard in HTML, Vue, or React and want a version that deploys as a serverless app through genezio.

What can you do with Black Dashboard React x genezio?

• Launch a data-ops dashboard — Visualize business data with the prebuilt Chart.js bar and line chart components wired to backend data.
• Manage users and sessions — Use the included user and activeSession models with authentication middleware (backend/middleware/reqAuth.js) to handle logins and protected routes.
• Create custom admin CRUD tools — Use the generated SDK files in frontend/backend-sdk to call backend methods for products, orders, tasks, and articles from your own React components.

How does it work?

The template is deployed through genezio's serverless platform. You create a genezio account and install the genezio CLI globally, then clone the repository and run genezio deploy --env backend/.env. The CLI reads the backend genezio.yaml, deploys the classes, and generates SDK files that the React frontend imports. The README also provides a one-click deploy button and a live demo.

FAQ

Is Black Dashboard React x genezio free?

The template source code is licensed under MIT (Copyright 2022 Creative Tim), so it is free to use and modify. Deployment uses the genezio platform, which requires creating an account; genezio's pricing is not stated on this page.

What backend models are included?

The backend/models folder contains more than 20 model files, including users, products, orders, clients, employees, hotels, rooms, songs, playlists, tasks, reviews, and more. The backend classes (user.js, product.js, order.js, task.js, article.js) define the API endpoints for these models.

Which browsers are supported?

The project officially aims to support the last two versions of Chrome, Firefox, Edge, Safari, and Opera, as listed in the Browser Support section of the README.

How do I deploy the template?

Two ways: click the Deploy to Genezio button on the GitHub README, or follow the quick start steps — install the genezio CLI, login, clone the repository, and run genezio deploy --env backend/.env. After deployment, you can test the project in the genezio dashboard.

Does the frontend include authentication?

Yes. The Auth layout includes Login and Register pages, and the backend includes a user class with authentication middleware (backend/middleware/reqAuth.js) and an activeSession model for managing sessions.