React Django - Soft UI Dashboard

Open-source full-stack product crafted on top of a modern design using React and Django as the backend framework

React Django - Soft UI Dashboard
Django React Soft Dashboard - Open-source full-stack seed project.

Hello! This article presents an open-source seed project crafted on top of Soft UI dashboard design using React and Django for the backend logic. For newcomers, React is a popular JavaScript library for coding user interfaces backed by Facebook and Django is a leading web framework coded by experienced developers using a batteries-included concept. The product is released under the MIT license and is actively supported by AppSeed. Thanks for reading!

GIF animated presentation of Soft UI Dashboard, an open-source project crafted in React and Django.
Django React Soft Dashboard - Open-source 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 more than 70 frontend individual elements, pre-built pages, and customized plugins.

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.

A futuristic VR page provided by Soft UI Dashboard, an open-source project powered by React and Django.
Django React Soft Dashboard - VR 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 compiling 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 - Official Banner
Django API Server - Official Banner
πŸ‘‰ Step #1 - Clone sources using GIT
$ git clone https://github.com/app-generator/api-server-django.git
$ cd api-server-django 
Django API - Clone Sources
πŸ‘‰ Step #2 - Create a virtual environment
$ # Virtualenv modules installation (Unix based systems)
$ virtualenv env
$ source env/bin/activate
Django API - Install Modules
πŸ‘‰ Step #3 - Install dependencies using PIP
$ pip install -r requirements.txt 
Django API - Install Modules
πŸ‘‰ Step #4 - Start the API server

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 
React UI - Clone Sources
πŸ‘‰ Step #2 - Install dependencies via NPM or Yarn
$ npm i
// OR
$ yarn
React UI - Install Modules
πŸ‘‰ Step #3 - Start in development mode
$ npm run start 
// OR
$ yarn start
React UI - Start in Development

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 the dashboard, user profile .. etc, are protected. Once the authentication is successful, we can access all private pages.

User Profile Page - React Soft Dashboard
Django React Soft Dashboard - Profile Page.
Django React Soft Dashboard - Profile Page.
RTL Page - React Soft Dashboard
Django React Soft Dashboard - RTL Page.
Django React Soft Dashboard - RTL Page.

Thanks for reading! For more resources, please access: