DEV Community

Cover image for Start fast with Django, React and Docker - Open-Source project
Sm0ke
Sm0ke

Posted on • Originally published at blog.appseed.us

Start fast with Django, React and 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 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.


The product is built using a two-tier pattern where the React frontend 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

$ git clone https://github.com/app-generator/django-react-soft-dashboard.git
$ cd django-react-soft-dashboard
Enter fullscreen mode Exit fullscreen mode

Start Django API - via Docker

$ cd django-api
$ docker-compose up --build
$
$ # API is up on port 5000
Enter fullscreen mode Exit fullscreen mode

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


✨ 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:

$ cd react-ui
$ yarn         # install modules
$ yarn start   # start the app
$
$ # React UI is up on port 3000
Enter fullscreen mode Exit fullscreen mode

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


Django React Soft - User Profile

Django React Soft - User Profile


Django React Soft - Charts Page

Django React Soft - Charts Page


In case Django is not your preferred backend server, the react frontend can be also used with NodeJS, Laravel or Flask (all free).


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


Discussion (0)