React Django - Open-Source Full-Stack Seed Project
Tags: webdev, react, django, opensource
Published: 2021-11-17 18:17:16

---
title: React Django - Open-Source Full-Stack Seed Project
published: true
description: Full-stack project that uses a modern React UI powered by a simple Django API Server. 
tags: webdev, react, django, opensource
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gm009ipxzgyez2orozyn.png
canonical_url: https://appseed.us/product/django-react-purity-dashboard
---
Hello Coders! 

This article presents an open-source full-stack project that uses a modern **React UI** (styled with Chakra) powered by a simple **Django API** Server (also free): [Django React Purity](https://appseed.us/product/django-react-purity-dashboard) can be used as a starter codebase for a future end-product or simply by beginners for eLearning activities. For newcomers, **React** is a popular JavaScript library for coding user interfaces baked by Facebook and **Django** is a leading web framework used to manage the backend logic. 

> *Thanks for reading!* - Content provided by **[App Generator](https://appseed.us/)**.

--- 

- ✨ [Django React Purity](https://appseed.us/product/django-react-purity-dashboard) - product page
- ✨ [Django React Purity](https://github.com/app-generator/django-react-purity-dashboard) - Source code

---

![React Django - Open-Source Full-Stack Seed Project, GIF animated presentation](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/p9tejjb9kmajnmrpajnc.gif)

---

## Product Features

This free product comes with a `production-ready` JWT Authentication flow, Docker scripts for UI & the backend and a permissive license that permits unlimited copies for hobby & commercial end-products.

- Innovative **Chakra UI** Design 
- React, Redux, Redux-persist
- Authentication: JWT Login/Register/Logout
- **Full-stack Ready** using a **Django API Server** (open-source project):
  - Django / DRF / SQLite3 - a simple, easy to use backend
  - Authentication with JWT (login, logout, register)
  - Docker, Unitary tests
 
The product is built using a `two-tier` pattern where the React frontend is decoupled logically and physically from the API backend. To use the product, a short action list must be completed successfully: 

- `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 

---

## Start in Docker

Probably the fastest way to use the product in a local environment is via Docker. Both parts of the product can be used in Docker.

---

> **Step #1** - Clone/Download the source code

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

---

> **Step #2** - Start the Django API

```bash
$ 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`.

---

> **Step #3** - Start the React UI (using another terminal)

```bash
$ 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.

--- 

![React Django Purity - Login Page.](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hkidmsywh8h6lk8ahl4x.png)

--- 

> React Django Purity - User profile page

![React Django Purity - User profile Page.](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kjn6t0yko85676wr4hls.png)
 
--- 

> React Django Purity - Main Dashboard Page

![React Django Purity - Main Dashboard Page](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/c0wajo35lhfojtxvdj58.png)

---

> **Thanks for reading!** For more resources, please access: 

---

- ✨ AppSeed for [support](https://appseed.us/support) via email and [Discord](https://appseed.us/support)
- ✨ [React Apps](https://appseed.us/apps/react) - a curated index with Full-Stack Starters