Django React - Purity Dashboard (Open-Source) | AppSeed

Last update: Sep 19, 2022

Related tags

Overview

Django React Purity Dashboard

Start your Development with an Innovative Admin Template for Chakra UI and React. Purity UI Dashboard is built with over 70 frontend individual elements, like buttons, inputs, navbars, navtabs, 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 Chakra 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

Links

Django React Purity Dashboard - product page
Django React Purity Dashboard - LIVE Demo
Free Support via Github (issues tracker) and Discord.

Quick-start in Docker

Clone/Download the source code

$ git clone  https://github.com/app-generator/django-react-purity-dashboard.git

Start the Django API

$ cd django-api
$ docker-compose pull   # download dependencies 
$ docker-compose build  # local set up
$ docker-compose up     # start the app

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
$ docker-compose pull   # download dependencies 
$ docker-compose build  # local set up
$ docker-compose up     # 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.

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

$ cd django-api
$ 
$ # Create a virtual environment
$ virtualenv env
$ source env/bin/activate
$
$ # Install modules
$ pip install -r requirements.txt
$
$ # Set Up the Database
$ python manage.py migrate
$ 
$ # Start the API
$ python manage.py runserver 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 Django API

$ python manage.py runserver 5001

Now, the API starts on port 5001.

Update the API port used by the React Frontend

API Server URL - src/config/constant.js

const config = {
    ...
    API_SERVER: 'http://localhost:5000/api/'  // <-- The magic line
};

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 Purity - Login

Django React Purity - User Profile

Links & Resources

Ask for Support on Discord
See for React Starters - index provided by AppSeed

Django React Purity Dashboard - Open-source full-stack seed project provided by AppSeed App Generator

Django project starter on steroids: quickly create a Django app AND generate source code for data models + REST/GraphQL APIs (the generated code is auto-linted and has 100% test coverage).

Create Django App 💛 We're a Django project starter on steroids! One-line command to create a Django app with all the dependencies auto-installed AND

68 Oct 19, 2022

Meta package to combine turbo-django and stimulus-django

Hotwire + Django This repository aims to help you integrate Hotwire with Django 🚀 Inspiration might be taken from @hotwired/hotwire-rails. We are sti

31 Aug 9, 2022

django-reversion is an extension to the Django web framework that provides version control for model instances.

django-reversion django-reversion is an extension to the Django web framework that provides version control for model instances. Requirements Python 3

2.8k Jan 2, 2023

Django-environ allows you to utilize 12factor inspired environment variables to configure your Django application.

Django-environ django-environ allows you to use Twelve-factor methodology to configure your Django application with environment variables. import envi

2.7k Jan 7, 2023

Rosetta is a Django application that eases the translation process of your Django projects

Rosetta Rosetta is a Django application that facilitates the translation process of your Django projects. Because it doesn't export any models, Rosett

909 Dec 26, 2022

Cookiecutter Django is a framework for jumpstarting production-ready Django projects quickly.

Cookiecutter Django Powered by Cookiecutter, Cookiecutter Django is a framework for jumpstarting production-ready Django projects quickly. Documentati

10k Dec 31, 2022

django-quill-editor makes Quill.js easy to use on Django Forms and admin sites

django-quill-editor django-quill-editor makes Quill.js easy to use on Django Forms and admin sites No configuration required for static files! The ent

139 Dec 5, 2022

A Django chatbot that is capable of doing math and searching Chinese poet online. Developed with django, channels, celery and redis.

Django Channels Websocket Chatbot A Django chatbot that is capable of doing math and searching Chinese poet online. Developed with django, channels, c

8 Oct 28, 2022

A handy tool for generating Django-based backend projects without coding. On the other hand, it is a code generator of the Django framework.

Django Sage Painless The django-sage-painless is a valuable package based on Django Web Framework & Django Rest Framework for high-level and rapid web

51 Sep 15, 2022

Django React - Purity Dashboard (Open-Source) | AppSeed

Related tags

Overview

Django React Purity Dashboard

Quick-start in Docker

General Information

Manual build

Start the Django API

Compile & start the React UI

Configuration (Optional)

API

Product UI

Links & Resources

You might also like...

Django project starter on steroids: quickly create a Django app AND generate source code for data models + REST/GraphQL APIs (the generated code is auto-linted and has 100% test coverage).

Meta package to combine turbo-django and stimulus-django

django-reversion is an extension to the Django web framework that provides version control for model instances.

Django-environ allows you to utilize 12factor inspired environment variables to configure your Django application.

Rosetta is a Django application that eases the translation process of your Django projects

Cookiecutter Django is a framework for jumpstarting production-ready Django projects quickly.

django-quill-editor makes Quill.js easy to use on Django Forms and admin sites

A Django chatbot that is capable of doing math and searching Chinese poet online. Developed with django, channels, celery and redis.

A handy tool for generating Django-based backend projects without coding. On the other hand, it is a code generator of the Django framework.

Releases(v1.0.0)

v1.0.0(Nov 17, 2021)

Initial Release

Owner

App Generator

Wagtail - Vue - Django : The initial environment of full-stack local dev web app with wagtail and vue

Source files for a free pyRevit toolbar.

This is a sample Django Form.

Template de desarrollo Django

DRF_commands is a Django package that helps you to create django rest framework endpoints faster using manage.py.

Tweak the form field rendering in templates, not in python-level form definitions. CSS classes and HTML attributes can be altered.

A pickled object field for Django

A small Django app to easily broadcast an announcement across a website.

A simple djagno music website.

RestApi With Django 3.2 And Django Rest Framework

based official code from django channels, replace frontend with reactjs

This is a simple Todo web application built Django (back-end) and React JS (front-end)

A Blog Management System Built with django

Transparently use webpack with django

Django React - Purity Dashboard (Open-Source) | AppSeed

A Django app for managing robots.txt files following the robots exclusion protocol

scaffold django rest apis like a champion 🚀

Awesome Django Markdown Editor, supported for Bootstrap & Semantic-UI

Stream Framework is a Python library, which allows you to build news feed, activity streams and notification systems using Cassandra and/or Redis. The authors of Stream-Framework also provide a cloud service for feed technology:

Auth module for Django and GarpixCMS