/Django-REST-Framework-React-BoilerPlate

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

Primary LanguagePythonMIT LicenseMIT

Django REST API with React BoilerPlate

  • Integration of Django and React, Auth and Registraion

License: MIT PRs Welcome Code of Conduct

Backend

  • Django REST framework for a powerful API✔
  • Django ORM for interacting with the database✔
  • PostgreSQL ✔ (NOTE: Sqlite is configured as default , turn IS_POSTGRESQL = True in settings.py if you want to use 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) are optional as by default 
IS_POSTGRESQL = False and won't reuired the credentials. If your turn this into True then set the variables for that 
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

⭐️ Support

Give a ⭐️ if this project helped you!

License ©

The MIT License