Django REST API with React BoilerPlate

This is a setup of Authentication and Registration Integrated with React.js inside the Django Templates for web apps

Backend

  • Django REST framework for a powerful API✔
  • Django ORM for interacting with the database✔
  • PostgreSQL✔
  • Unit tests with Pytest (coming soon..)

Features ✨

  • Django Config with environment variables✔
  • Accounts with Update your profile & pick an avatar (coming soon..)
  • React app Integration in the templates✔
  • Fetching Api Data via Axios✔
  • Accounts Registration and Authentication Using Reducers and Redux✔

How to Run locally ?

- Install Dependencies after creating and activating virtual environement

    $ pip install -r requirements/local.txt

- Create .env file in config and put variables for Secret Key and Database (PostgreSQL) as created in sample.env file


    $ python manage.py makemigrations
    $ python manage.py migrate

- Install dependencies in frontend app using following commands in separate terminal
- First make sure you have installed Node.js, I used v15.10.0 while developing this setup. For More info https://nodejs.org/en/
- Then run following commands in dir where the package.json file is located

    $ npm install
    $ npm run dev

- After that you should keep running this terminal as this is automatically compiling the react.js code in single file main.js
- Then Run the following command in previous terminal to load frontend react app on django server

    $ python manage.py runserver
  • React app available at http://localhost:8000/
  • API root available at http://localhost:8000/api/
  • Admin available at http://localhost:8000/admin/

Screenshots ?

  • API Documentation
    screenshot
  • State Chart From Redux Dev Tool
    screenshot
  • Homepage/Login
    screenshot
  • Registeration Page
    screenshot
  • Logged In
    screenshot
  • API root
    screenshot

GitHub

https://github.com/faisalnazik/Django-REST-Framework-React-BoilerPlate