• Stars
    star
    134
  • Rank 270,967 (Top 6 %)
  • Language
    Python
  • License
    Other
  • Created about 3 years ago
  • Updated 11 months ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

Django React - Soft UI Dashboard (Free Product) | AppSeed

Start your Development with an Innovative Admin Template for Material-UI and 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. The product comes with a simple JWT authentication flow: login/register/logout.


Features

  • βœ… Innovative Material-UI Design - Creafted by Creative-Tim
  • βœ… React, Redux, Redux-persist
  • βœ… Authentication: JWT Login/Register/Logout
  • βœ… Full-stack Ready using a Django API Server (open-source project) - Server Features
    • Django / DRF / SQLite3 - a simple, easy to use backend
    • Authentication with JWT (login, logout, register)
    • Docker, Unitary tests

React Soft Dashboard - Open-source full-stack product


React UI Tests:

NodeJS NPM YARN Status
v16.13.0 v8.1.0 v1.22.5 βœ”οΈ
v14.15.0 v6.14.8 v1.22.5 βœ”οΈ
v12.22.0 v6.14.11 v1.22.5 βœ”οΈ

✨ Quick-start

πŸ‘‰ Start the Django API using Docker

$ cd django-api
$ docker-compose up --build  

At this point, the API should be up & running at http://localhost:5000, and we can test the interface using POSTMAN or curl.


πŸ‘‰ Start the React UI (using another terminal)

$ cd react-ui
$ yarn         # install dependencies
$ yarn start   # start the app 

Once all the above commands are executed, the React UI should be visible in the browser. By default, the app redirects the guest users to authenticate. After we register a new user and Sign IN, all the private pages become accessible.


React Soft Dashboard - Open-source full-stack product with Django API Backend.


✨ General Information

The product is built using a two-tier pattern where the React frontend is decoupled logically and physically from the API backend. How to use the product:

  • Compile and start the Django API Backend
    • by default the server starts on port 5000
  • Compile and start the React UI
    • UI will start on port 3000 and expects a running backend on port 5000
  • Configuration (Optional)
    • Change the API port
    • Configure the API port used by the React UI to communicate with the backend

✨ Manual build

Start the Django API

Simple starter built with Python / DRF Library / Sqlite3 and JWT Auth. The authentication flow is based on json web tokens.


πŸ‘‰ Step #1 - Change the directory to django-api

$ cd django-api

πŸ‘‰ Step #2 - Create a virtual environment

$ # Virtualenv modules installation (Unix based systems)
$ virtualenv env
$ source env/bin/activate
$
$ # Virtualenv modules installation (Windows based systems)
$ # virtualenv env
$ # .\env\Scripts\activate

πŸ‘‰ Step #3 - Install dependencies using PIP

$ pip install -r requirements.txt

πŸ‘‰ Step #4 - Create a new .env file using sample env.sample

The meaning of each variable can be found below:

  • DEBUG: if True the app runs in develoment mode
    • For production value False should be used
  • SECRET_KEY: used in assets management

πŸ‘‰ Step #5 - Start the API server

$ python manage.py migrate
$ python manage.py runserver 5000

The API server will start using the explicit port 5000.


Compile & start the React UI

$ cd react-ui
$
$ # Install Modules
$ yarn
$
$ # Start for development (LIVE Reload)
$ yarn start 

Configuration (Optional)

Change the port exposed by the Djago API

$ python manage.py runserver 5000

Now, the API will start on port 5000.


Update the API port used by the React Frontend

API Server URL - src/config/constant.js

    API_SERVER: 'http://localhost:5001/api/'  // <-- The magic line

The value can be updated during the build using the environment

$ export REACT_APP_BACKEND_SERVER='http://localhost:5001/api/' # Unix/MacOS
$ set REACT_APP_BACKEND_SERVER='http://localhost:5001/api/'    # Windows CMD
$ $env:REACT_APP_BACKEND_SERVER='http://localhost:5001/api/'   # Windows PowerShell

✨ API

For a fast set up, use this POSTMAN file: api_sample

πŸ‘‰ Register - api/users/register (POST request)

POST api/users/register
Content-Type: application/json

{
    "username":"test",
    "password":"pass", 
    "email":"[email protected]"
}

πŸ‘‰ Login - api/users/login (POST request)

POST /api/users/login
Content-Type: application/json

{
    "password":"pass", 
    "email":"[email protected]"
}

πŸ‘‰ Logout - api/users/logout (POST request)

POST api/users/logout
Content-Type: application/json
authorization: JWT_TOKEN (returned by Login request)

{
    "token":"JWT_TOKEN"
}

✨ Product UI

Django React Soft UI Dashboard - Login

Django React Soft UI Dashboard - Login.


Django React Soft UI Dashboard - User Profile

Django React Soft UI Dashboard - User Profile


Django React Soft UI Dashboard - Billing Page

Django React Soft UI Dashboard - Billing Page.


Links & Resources



Django React Soft Dashboard - Provided by App Generator.

More Repositories

1

django-datta-able

Datta Able - Open-Source Django Dashboard | AppSeed
CSS
539
star
2

admin-dashboards

Admin Dashboards - Open-Source and Free | AppSeed
358
star
3

flask-black-dashboard

Flask Black Dashboard - Open-source seed project | AppSeed
CSS
313
star
4

free-site-builder

Free Site Builder - Open-Source Tool | Simpllo
HTML
300
star
5

django-black-dashboard

Django Dashboard Black - Open-source Seed Project | AppSeed
CSS
266
star
6

django-admin-dashboards

Django Dashboards - Admin Panels coded in Django | AppSeed
257
star
7

flask-adminlte

AdminLTE Flask - Open-source Seed Project | AppSeed
JavaScript
241
star
8

api-server-nodejs

Nodejs API Server - Express / SQLite / TypeORM | AppSeed
TypeScript
227
star
9

django-volt-dashboard

Django Bootstrap 5 - Volt Dashboard | AppSeed
Python
216
star
10

react-soft-ui-dashboard

React Dashboard - Soft UI Dashboard | AppSeed
JavaScript
206
star
11

django-material-dashboard

Django Dashboard - Material Design | AppSeed
CSS
198
star
12

flask-volt-dashboard

Flask Bootstrap 5 - Volt Dashboard | AppSeed
CSS
183
star
13

flask-material-dashboard

Flask Dashboard - Material Design | AppSeed
SCSS
178
star
14

flask-datta-able

Datta Able - Open-Source Flask Dashboard | AppSeed
CSS
178
star
15

flask-soft-ui-dashboard

Soft UI Dashboard - Open-source Flask Dashboard | AppSeed
SCSS
175
star
16

django-adminlte

AdminLTE Django - Open-source seed project | AppSeed
Python
171
star
17

django-soft-ui-dashboard

Soft UI Dashboard - Open-source Django Dashboard | AppSeed
SCSS
171
star
18

django-admin-volt

Django Admin Volt - Free template for Django Admin Interface | AppSeed
CSS
144
star
19

flask-argon-dashboard

Flask Dashboard - Argon Design | AppSeed
SCSS
133
star
20

rocket-django

Rocket Django - Free Starter styled with Tailwind/Flowbite | AppSeed
HTML
132
star
21

flask-atlantis-dark

Atlantis Lite - Flask (Dark Version) | AppSeed
HTML
128
star
22

django-argon-dashboard

Argon Dashboard - Open-Source Django Seed Project | AppSeed
Python
122
star
23

flask-apps

Flask Apps - Open-Source And Paid | AppSeed
120
star
24

django-atlantis-dark

Django Dashboard - Atlantis Lite (Dark Version) | AppSeed
Python
117
star
25

api-server-flask

Flask API Server - Open-Source API Server | AppSeed
Python
102
star
26

flask-pixel

Flask Pixel UI Kit - Open-Source web app coded in Flask | AppSeed
CSS
100
star
27

jinja-template

Jinja Template - Free & commercial projects | AppSeed
97
star
28

ecommerce-fastapi-stripe

FastAPI Stripe Sample - Soft UI Design (Free Sample) | AppSeed
HTML
87
star
29

sample-django-extended-user-profile

Django User Profile - Open-source Django Sample | AppSeed
CSS
87
star
30

flask-paper-kit

Flask Boilerplate - Paper Kit Design | AppSeed
SCSS
86
star
31

django-coreui

CoreUI - Django Dashboard (Free Product) | AppSeed
HTML
84
star
32

sample-django-datatables

Django - Datatables Sample | AppSeed
CSS
83
star
33

django-pixel

Django Pixel UI Kit - Open-Source Django Starter | AppSeed
HTML
78
star
34

bulmaplay

Flask/Jinja Starter - BulmaPlay (Styled with Bulma CSS) | AppSeed
JavaScript
74
star
35

gatsbyjs-starter-tailwindplay

GatsbyJS Tailwind Starter - TailwindPlay
JavaScript
70
star
36

django-soft-ui-design

Soft UI Design System - Django Starter | AppSeed
HTML
69
star
37

django-admin-black

Django Admin Black - Free template for Django Admin Interface | AppSeed
CSS
66
star
38

react-purity-dashboard

React Dashboard - Purity UI Dashboard | AppSeed
JavaScript
65
star
39

tailwind-css-components

Tailwind CSS Components - Free and Open-Source Tailwind Components | AppSeed
Pug
61
star
40

flask-gradient-able

Gradient Able - Open-Source Flask Dashboard | AppSeed
CSS
60
star
41

react-datta-able

React Node JS - Datta Able (Free Product) | AppSeed
SCSS
58
star
42

flask-light-bootstrap

Flask Dashboard - Light Bootstrap | AppSeed
HTML
58
star
43

ecommerce-django-stripe

Django Stripe Sample - Soft UI Design (Free Sample) | AppSeed
HTML
58
star
44

flask-dashboard-modular-admin

Flask Dashboard - Modular Admin Design | AppSeed
CSS
57
star
45

react-horizon-ui-chakra

React Horizon UI - Full-Stack Open-Source Starter | AppSeed.us
JavaScript
57
star
46

django-material-kit

Django Boilerplate - Material Kit Design | AppSeed
HTML
56
star
47

tutorial-flask

Flask Tutorial - Learn to code in Flask | AppSeed
55
star
48

flask-dashboard-gradientable

Gradient Able - Open-Source Flask Dashboard | AppSeed
CSS
55
star
49

django-star-admin

Star Admin - Open-Source Django Dashboard | AppSeed
Python
52
star
50

ecommerce-flask-stripe

Flask Stripe Sample - Soft UI Design (Free Sample) | AppSeed
HTML
52
star
51

flask-bulma-css

Flask App - Styled with Bulma | AppSeed
CSS
50
star
52

react-flask-authentication

React Flask Authentication - Open-Source Full-stack Project | AppSeed
Python
50
star
53

flask-material-kit

Flask Boilerplate - Material Kit Design | AppSeed
SCSS
50
star
54

flask-corona-dark

Flask Dashboard - Corona Dark Design | AppSeed
CSS
48
star
55

jamstack

JAMstack - Paid and Open-Source Boilerplate code | AppSeed
45
star
56

flask-now-ui-dashboard

Flask Dashboard - Now UI Design | AppSeed
SCSS
45
star
57

django-dynamic-datatb

Django Dynamic Datatables - Open-Source Library | AppSeed
JavaScript
43
star
58

django-soft-dashboard-tailwind-old

Django Soft UI Dashboard - Tailwind CSS (Open-Source) | AppSeed
HTML
43
star
59

app-generator

App Generator - Deliver your projects faster | AppSeed
42
star
60

django-admin-argon-dashboard

Django Admin Argon Dashboard - Open-Source PyPi Library | AppSeed
CSS
42
star
61

html-parser

Html Parser - Html to Pug, Jinja2, Blade Converter | AppSeed
CSS
42
star
62

api-server-django

Django API Server - Open-Source API Server | AppSeed
Python
41
star
63

django-tabler

Django Dashboard - Tabler Design | AppSeed
Python
41
star
64

flask-soft-ui-design

Soft UI Design System - Flask Starter | AppSeed
HTML
39
star
65

fastapi-soft-ui-dashboard

FastAPI Soft Dashboard - Open-Source Starter | AppSeed
SCSS
39
star
66

django-admin-soft-dashboard

Django Admin Soft - Free template for Django Admin UI | AppSeed
SCSS
37
star
67

django-api-generator

API Generator for Django - Open-Source Library | AppSeed
Python
37
star
68

vuejs-argon-design-system

Vuejs Argon Design - Built with Automation Tools | AppSeed App Generator
Vue
37
star
69

flask-admin-dashboards

Flask Dashboards - Admin Panels coded in Flask | AppSeed
36
star
70

flask-adminator

Flask Dashboard - Adminator Design | AppSeed
JavaScript
36
star
71

laravel-react-purity-dashboard

React Laravel - Purity Dashboard (Open-Source) | AppSeed
PHP
36
star
72

django-adminator

Django Dashboard - Adminator Design | AppSeed
JavaScript
34
star
73

flask-coreui

CoreUI - Flask Dashboard (Free Product) | AppSeed
HTML
33
star
74

flask-star-admin

Star Admin - Open-Source Flask Dashboard | AppSeed
CSS
33
star
75

bulma-css

Bulma CSS - Open-source components | AppSeed
TypeScript
32
star
76

django-gradient-able

Gradient Able - Open-Source Django Dashboard | AppSeed
HTML
31
star
77

jinja-soft-ui-dashboard-old

Jinja Template - Soft UI Dashboard | AppSeed
SCSS
30
star
78

django-dashboard-shards

Django Dashboard - Shards Design | AppSeed
CSS
30
star
79

gatsbyjs

GatsbyJS - Paid and Open-Source Starters | AppSeed
30
star
80

django-admin-material-dashboard

Django Admin Material Dashboard - Open-Source PyPi Library | AppSeed
CSS
29
star
81

eleventy-soft-ui-design

Eleventy (11ty) - Soft UI Design | AppSeed
Nunjucks
27
star
82

django-react-purity-dashboard

Django React - Purity Dashboard (Open-Source) | AppSeed
Python
27
star
83

flask-sb-admin

Flask Dashboard - SB Admin | AppSeed
SCSS
26
star
84

jinja-paper-dashboard

Jinja Template - Paper Dashboard | AppSeed
CSS
26
star
85

fullstack-flask-react-material-design

Flask React - Built with Automation Tools | AppSeed App Generator
26
star
86

flask-illustrations-iradesign

Flask App - Illustrations by IraDesign | AppSeed
JavaScript
25
star
87

flask-dashboard-sleek

Flask Dashboard - Sleek Design | AppSeed
JavaScript
25
star
88

django-sb-admin

Django Dashboard - SB Admin | AppSeed
SCSS
24
star
89

sample-django-charts-argon

Django Argon Charts - Open-source Django Sample | AppSeed
CSS
24
star
90

jinja-adminlte

Jinja Template - AdminLTE Design | AppSeed
JavaScript
24
star
91

flask-react-soft-dashboard

Flask React - Soft Dashboard (Open-source) | AppSeed.us
Python
24
star
92

sample-flask-best-practices

Flask Best Practices for Deployment | AppSeed
Python
24
star
93

django-corona-dark

Django Dashboard - Corona Dark | AppSeed
CSS
23
star
94

flask-tabler

Flask Dashboard - Tabler Design | AppSeed
CSS
23
star
95

sample-django-celery

Django & Celery Integration - Open-Source Sample | AppSeed.us
SCSS
23
star
96

flask-soft-dashboard-tailwind

Flask Soft UI Dashboard - Tailwind CSS (Open-Source) | AppSeed
HTML
23
star
97

sample-django-file-manager

Django File Manager - UI Over the MEDIA Directory | AppSeed
SCSS
22
star
98

flask-neumorphism-uikit

Flask Web App - Neumorphism UI Kit | AppSeed
CSS
22
star
99

fullstack-express-vuejs-argon-design

Express Vuejs - Built with Automation Tools | AppSeed App Generator
22
star
100

jinja-swipe-bootstrap-5

Jinja Template - Swipe One Page Bootstrap 5 | AppSeed
CSS
21
star