DEV Community

Cover image for React Django - Soft Dashboard (Free Product)
Sm0ke
Sm0ke

Posted on • Originally published at appseed.us

React Django - Soft Dashboard (Free Product)

Hello Coders!

This article presents an open-source full-stack project crafted on top of Soft UI Dashboard using React and Django as backend framework. The product, released under the MIT license on Github, can be used as a codebase for a commercial dashboard or simply for eLearning, especially by beginners. Product uses a two-tier architecture where the React UI is decoupled and communicates with the backend using JSON Web Tokens (JWT). For newcomers, React is a popular JavaScript library for coding user interfaces backed by Facebook.

Thanks for reading! - Content provided by App Generator.



React Django Soft Dashboard - Open-source full-stack product.


✨ Soft Dashboard React

This free template is designed by Creative-Tim on top of Material-UI, the most popular components library for React. Soft UI Dashboard React is built with over 70 frontend individual elements, like buttons, inputs, navbars, nav tabs, cards, or alerts, giving you the freedom of choosing and combining.

If you want to get inspiration or just show something directly to your clients, you can jump-start your development with our pre-built example pages. Every page is spaced well, with attractive layouts and pleasing shapes. Soft UI Dashboard React has everything you need to quickly set up an amazing project.


Soft Dashboard React - Open-source React Design, the Billing page.


✨ How to use the product

This open-source product is a complete full-stack seed product that covers all layers from the UI to the database using a two-tier architecture:

  • React Frontend (Soft UI Template)
  • JWT Authentication: users can register, Sign IN and logout
  • Django API Backend: responsible with persistence

In order to use the product we need to build both parts: the API backend and the React Frontend. Both parts are already configured to work and communicate using compatible settings. Let's start compile the product and use it in the browser.


✨ Start the Django API Backend

To successfully compile the backend server, Python3 and GIT should be properly installed and accessible in the terminal window.


Django API Server - Open-source product crafted by AppSeed.


👉 Step #1 - Clone sources using GIT

$ git clone https://github.com/app-generator/api-server-django.git
$ cd api-server-django 
Enter fullscreen mode Exit fullscreen mode

👉 Step #2 - Create a virtual environment

$ # Virtualenv modules installation (Unix based systems)
$ virtualenv env
$ source env/bin/activate
Enter fullscreen mode Exit fullscreen mode

👉 Step #3 - Install dependencies using PIP

$ pip install -r requirements.txt 
Enter fullscreen mode Exit fullscreen mode

👉 Step #4 - Start the API server

$ python manage.py migrate
$ python manage.py runserver 5000 
Enter fullscreen mode Exit fullscreen mode

At this point, the server should run on port 5000 and we can test the interface using POSTMAN or curl to create and authenticate users.


✨ Start the React UI

The dependency for this part is NodeJS, a decent version closer to 12.x or above. Once the NodeJS is accessible via the terminal, we can clone the React UI from the public repository and start compiling the product.


👉 Step #1 - Clone sources using GIT

$ git clone https://github.com/app-generator/react-soft-ui-dashboard.git
$ cd react-soft-ui-dashboard 
Enter fullscreen mode Exit fullscreen mode

👉 Step #2 - Install dependencies via NPM or Yarn

$ npm i
// OR
$ yarn
Enter fullscreen mode Exit fullscreen mode

👉 Step #3 - Start in development mode

$ npm run start 
// OR
$ yarn start
Enter fullscreen mode Exit fullscreen mode

At this point, we should see the login page rendered by the browser on port 3000. By default guest users are redirected to Sign IN page because all other pages like dashboard, user profile .. etc, are protected. Once the authentication is successful, we can access all private pages.


User Profile Page - React Soft Dashboard

React Django Soft Dashboard - Profile page.


RTL Page - React Soft Dashboard

React Django Soft Dashboard - RTL Sample Page.


Thanks for reading! For more resources, please access:

Discussion (6)

Collapse
uithemes profile image
ui-themes

Great design! Can I use the React UI with a Flask backend?

Collapse
sm0ke profile image
Sm0ke Author

For sure! Here is a list with compatible servers:

github.com/app-generator/api-serve...
github.com/app-generator/api-serve...

Let me know if you have issues.

Collapse
uithemes profile image
ui-themes

Great, ty!

Thread Thread
sm0ke profile image
Sm0ke Author

🚀🚀

Collapse
crearesite profile image
WebsiteMarket

The VR page looks super futuristic.
Thanks for sharing!

Collapse
sm0ke profile image
Sm0ke Author

Design credit @creativetim_official
🚀🚀