Boilerplate Code
PRODUCTS
Features
Free Samples
Full-Stack React Berry
Premium Material-UI Dashboard designed by CodedThemes, coded as a full-stack product
Full-stack version of Berry Dashboard PRO, a premium design crafted by CodedThemes now usable with multiple API Backend Servers: Node JS, Flask, Django. The UI comes with pre-configured JWT authentication powered by a Unified API Interface that makes this product compatible with more than one backend: Node JS, Flask, Django (FASTapi coming soon).
Berry React Dashboard - Full-Stack Product
Product Dependencies
To successfully compile and use the product, please make sure your workstation has the right tools installed and accessible in the terminal window:
- Ability to work in the terminal window
Product Features
The product aims to help developers skip over the basics and start faster a new full-stack product already enhanced with authentication, a pixel-perfect UI powered by production-ready backends. The fact that makes this full-stack product unique is the JSON-API compliance over multiple servers:
- Coming soon APIs: FASTapi, Laravel API
By default, the UI redirects the guest users to the login page. Once the user is authenticated, all private pages are unlocked.
Implemented JWT Authentication Flow: Login, Logout, Register.
Berry React Dashboard - Login Page.
How to use the product
Full-stack React Material Dashboard is built using a two-tier architecture where the UI is decoupled from the backend API server and communicates using requests secured by JWT tokens. The recommended way to start using this full-stack product is to follow a simple setup:
- Step #1 - Build and start the backend server
- Step #2 - Build and start the UI
- Create a new user via the registration page
- Authenticate and access the private pages
- Add your magic on top of the existing codebase.
Start the backend server
As mentioned before, the UI is configured to work with many backend servers that share a common API interface: Django, Node JS, Flask. Based on your license (free or commercial) the access is granted to the request API Server. On this page, we will compile and start the free version of Node JS API (open-source product).
Step #1 - Clone the sources
1
$ git clone https://github.com/app-generator/api-server-nodejs.git
2
$ cd api-server-nodejs
Copied!
Step #2 - Install dependencies via NPM or Yarn
1
$ npm i
2
// OR
3
$ yarn
Copied!
Step #3 - Run the SQLite migration and create the required tables
1
$ yarn typeorm migration:run
Copied!
Step #4 - Start the API server - development mode
1
$ npm dev
2
// OR
3
$ yarn dev
Copied!
The API interface used by the API is a simple JWT authentication layer that exposes the following methods:
- USERS API:
/api/users/register: create a new user/api/users/login: authenticate an existing user/api/users/logout: delete the associated JWT token/api/users/checkSession: check an existing JWT Token for validity/api/users/edit- edit the information associated with a registered user
At this point, the backend API should be & and running on address:
http://localhost:5000 and we can move on with the setup and build the React UI.
Start the React UI
The React Material Dashboard being a commercial product, a license is required before getting access to the source code. In case you don't have a license, please access the product page and purchase one.
Step #1 - Clone the project (private repository)
1
$ git clone https://github.com/app-generator/priv-react-berry-pro.git
2
$ cd priv-react-berry-pro
Copied!
Step #2 - Install dependencies via NPM or yarn
1
$ npm i
2
// OR
3
$ yarn
Copied!
Step #3 - Start in development mode
1
$ npm run start
2
// OR
3
$ yarn start
Copied!
Backend Integration
The backend API server address is saved insrc/config.js.
1
const config = {
2
...
3
API_SERVER: 'http://localhost:5000/api/' // <-- The magic line
4
};
Copied!
Berry Dashboard - UI Information
Berry is
developer-friendly & highly customizable React Admin Template based on Material-UI. This modern design comes with plenty of ready-to-use Material-UI components that will help you to build your site faster and saves your development time.
Berry React - Dashboard Page.
Last modified 10mo ago