This article presents full-stack versions of React Berry Dashboard, a modern and quite popular dashboard template styled with M-UI (legacy Material-UI) components library. The React template was enhanced with a simple JWT Token Authentication powered by different API servers (all free): Node JS, Flask, and Django. Thanks for Reading!
- ✨ React Berry Node JS - free product
- ✨ React Berry Django - free product
- ✨ React Berry Flask - free product
Another important part is the Unified API Interface shared by all API servers and implemented in all react/Vue UI kits provided by AppSeed. In other words, the transition from a Django backend API to a Node JS API is possible without code changes in the React Frontend. For more information about this concept feel free to read the documentation or contact the support team on Discord.
How to use the code
All full-stack versions of Berry can be compiled and started in a local environment using an identical workflow:
- Download the API backend: Node JS, Flask or Django
- Compile and start the API server
- Download and compile Berry React frontend
sign inand access the private pages.
Let's build in the following section the full-stack version of React Berry using, for instance, a Django API server. The build instructions are provided by the product documentation and the README file saved on Github.
Build the Backend API Server
The API server that manages the JWT Tokens comes with a simple intuitive codebase and a few nice features: DRF library, JWT Authentication, SQLite persistence, and Docker for deployment.
Step #1 - Clone the sources (published on Github)
Step #2 - Create a virtual environment
Step #3 - Install dependencies using PIP
Step #4 - Start the API server
At this point, the Django API should be up & running and we can use POSTMAN to test the service and create users or move forward and build React Berry Frontend.
Compile and start the React UI
React Berry Dashboard is also published on Github and we can compile and start the UI by typing a few commands in the terminal window as specified in product README.
Step #1 - Clone React Berry from Github
Step #2 - Install dependencies via NPM or yarn
Step #3 - Start in development mode
Once the product starts (this might take a while) we should be able to communicate with the API server to create users and authenticate. In case anyone needs to update the backend server address, this can be done in
In the same way, we can use Flask or Node JS (soon Laravel) as a backend API server for this amazing material-based design.
Thanks for Reading! For more resources, please access:
Berry Dashboard React, a premium design crafted by CodedThemes now configured with multiple API Backend Servers: Node JS, Flask, Django.