Start fast with Django, React and Docker - Open-Source project
Tags: webdev, django, react, opensource
Published: 2022-01-29 06:38:15

---
title: Start fast with Django, React and Docker - Open-Source project
published: true
description: Open-source seed project that uses a beautiful React design powered by a simple Django API server. Sources are available on Github (MIT License).
tags: webdev, django, react, opensource
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/28kcer8n3dcmw7dht6em.jpg
canonical_url: https://blog.appseed.us/django-v4-react-docker-open-source-project/
---
Hello coders!

This article presents an open-source seed project that uses a **React** frontend powered by a simple **Django API**. [Django React Soft Dashboard](https://appseed.us/product/soft-ui-dashboard/api-server-django/react/) can be downloaded from GitHub without a registration lock and used for commercial products or eLearning activities. 

For newcomers, **Django** is a leading web framework actively supported by programming experts and **React** is a popular JS library for coding user interfaces baked by Facebook.

- 👉 [Django React Soft](https://django-react-soft-dashboard.appseed-srv1.com/authentication/sign-in) - LIVE Demo
- 👉 [Django React Soft](https://github.com/app-generator/django-react-soft-dashboard) - source code

---

The product is built using a two-tier pattern where the React front end is decoupled logically and physically from the API backend.

---

✨ Starter Features

- Innovative **Material UI** Design - Crafted by Creative-Tim
- `React`, Redux, Redux-persist
- `Authentication`: JWT Login/Register/Logout
- `Full-Stack ready` via a simple Django API
- `Docker` support for API part
- `SQLite` persistence, Django DRF
- `Up-to-date dependencies` - Django v4

The product can be used in a local with just a few commands typed in the terminal. The API can be started with less effort via the Docker set up shipped with the product.

---

## ✨ Start the API Server

> Clone/Download sources from Github

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

---

> Start Django API - via Docker

```bash
$ cd django-api
$ docker-compose up --build
$
$ # API is up on port 5000
```

---

Once the commands are executed, we should be able to access the API and create users. `POSTMAN` is a popular tool for this operation but we can use a command-line tool like `cURL` as well.

---

![Django React Soft Dashboard - API Call via POSTMAN](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yq956nmzdk6pgv719d2g.png)
 
---

## ✨ Start the React UI

`Soft UI Dashboard` is compatible with multiple NodeJS versions (14.x, 16.x) and we can compile and start the product with a single command:

```bash
$ cd react-ui
$ yarn         # install modules
$ yarn start   # start the app
$
$ # React UI is up on port 3000
```

Once all the commands are executed we should be able to access the app in the browser, register new users and authenticate.

---

![Django React Soft - Sign IN Page](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2elz4wfy9i3egr3q4baq.png)

---

> Django React Soft - User Profile

![Django React Soft - User Profile](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/w8e6ybgxii7kv9iqm1wf.png)

---

> Django React Soft - Charts Page

![Django React Soft - Charts Page](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yk9ky13f1fmgwr7fmodm.png)

---

In case Django is not your preferred backend server, the react frontend can be also used with [NodeJS](https://github.com/app-generator/api-server-nodejs), [Laravel](https://github.com/app-generator/api-server-laravel) or [Flask](https://github.com/app-generator/api-server-flask) (all free).

---

> **Thanks for reading!** For more resources, feel free to access:

---

- 🎁 [Flask React Soft](https://appseed.us/product/flask-react-soft-dashboard) - free product
- 🎁 More [Free Dashboards](https://appseed.us/admin-dashboards/open-source) crafted in Flask, `Django` and `React`