Fullstack React — Django App

• In this blog, we will learn, how to build a full-stack app in react and Django.

The front-end

For building the front-end, we will use react.js.

1. Firstly create a react app and name it frontendapp. Click here to learn more.
2. Hoping that you have created a brand new react application.
3. Install material ui , react-redux, reduxjs/toolkit and react-router-dom.

mui -> npm install @mui/material @emotion/react @emotion/styled

mui-icons -> npm install @mui/icons-material

react-redux -> npm i react-redux

reduxjs/toolkit -> npm i @reduxjs/toolkit

react-router-dom -> npm i react-router-dom@5

4. First of all we will define our routes. Inside App.js paste this code.

<main>
        <Router initialEntries={["/home", "/finalpage"]}>
        <Switch>
          <Route path={"/"} exact>
            <Redirect to={"/home"} />
          </Route>
          <Route path={"/home"} >
            <CustomForm />
          </Route>
          <Route path={"/finalpage"} >
            <FinalPage/>
          </Route>
        </Switch>
        </Router>
 </main>

We get Router, Switch and Route from react-router-dom.

<Route path={"/home"} > -> Path defines the url 
            <CustomForm /> -> The component to be rendered with respect to path paramter given
          </Route>

Overall App.js

import CustomForm from "./Components/CustomForm";
import {MemoryRouter as Router, Switch, Route, Redirect } from "react-router-dom";
import FinalPage from './Components/FinalPage'
function App() {
  return (
    <>
      <main>
        <Router initialEntries={["/home", "/finalpage"]}>
        <Switch>
          <Route path={"/"} exact>
            <Redirect to={"/home"} />
          </Route>
          <Route path={"/home"} >
            <CustomForm />
          </Route>
          <Route path={"/finalpage"} >
            <FinalPage/>
          </Route>
        </Switch>
        </Router>
      </main>
    </>
  );
}

export default App;

Now we need to wrap everything inside BrowserRouter for the.

Inside index.js ->


root.render(
  <BrowserRouter>
  <React.StrictMode>
    <App />
  </React.StrictMode>
  </BrowserRouter>
  
);

5. Setting up the components.

Inside src create one folder “Components” and create CustomForm.js file

CustomForm.js

import React from "react";
import { Button, TextField } from "@mui/material";
import classes from "./CustomForm.module.css";
import { useState } from "react";
import AddIcon from "@mui/icons-material/Add";
import { getTenDigitRandomNumber } from "../Helper/utils";
import { useDispatch } from "react-redux";
import { userAction } from "../Redux/Store";
import { useHistory } from "react-router-dom";

function CustomForm() {
  const dispatch = useDispatch();
  const history = useHistory();
  const [inputfields, setInputFields] = useState([
    { username: "", email: "", phonenumber: "", address: "" },
  ]);
  const handleFormChange = (index, event) => {
    let data = [...inputfields];
    data[index][event.target.name] = event.target.value;
    setInputFields(data);
  };
  const addUsers = () => {
    let newUser = { username: "", email: "", phonenumber: "", address: "" };
    setInputFields([...inputfields, newUser]);
  };


  const postToServer = async (data_to_be_sent) => {
    const response = await fetch("http://127.0.0.1:8000/apis/v1/test/", {
      method: "POST",
      mode: "cors", // no-cors, *cors, same-origin
      cache: "no-cache", // *default, no-cache, reload, force-cache, only-if-cached
      headers: {
        "Content-Type": "application/json",
      },
      body: JSON.stringify(data_to_be_sent),
    });

    const jsonData = await response.json();
    dispatch(
      userAction.updateUserDetails({
        totaluser: jsonData.data.totalnumberofusers,
        users: jsonData.data.users,
      })
    );
    if (response.status === 200) {
      history.replace("/finalpage");
    }
  };

  const handleSubmit = (event) => {
    event.preventDefault();
    const data_to_be_sent = {
      record_name: getTenDigitRandomNumber(),
      users: inputfields,
    };
    postToServer(data_to_be_sent);
  };

  return (
    <div>
      <h2 className={classes.heading}>Form Demo</h2>
      <form className={classes.customform} onSubmit={handleSubmit}>
        {inputfields.map((input, index) => {
          return (
            <div
              key={index}
              style={{ display: "flex", flexDirection: "column" }}
            >
              <h3 style={{ paddingTop: "1%" }}>Data for user {index + 1}</h3>
              <TextField
                name="username"
                value={input.username}
                onChange={(e) => handleFormChange(index, e)}
                className={classes.inputFields}
                label={"Enter User Name"}
              />
              <TextField
                name="email"
                type="email"
                value={input.email}
                onChange={(e) => handleFormChange(index, e)}
                className={classes.inputFields}
                label={"Enter Email"}
              />
              <TextField
                name="phonenumber"
                type="number"
                value={input.phone}
                onChange={(e) => handleFormChange(index, e)}
                className={classes.inputFields}
                label={"Enter Phone Number "}
              />
              <TextField
                name="address"
                value={input.address}
                onChange={(e) => handleFormChange(index, e)}
                className={classes.inputFields}
                label={"Enter Address "}
              />
            </div>
          );
        })}
        <Button onClick={addUsers}>
          <AddIcon /> Add More Users
        </Button>

        <Button type="submit" className={classes.inputFields}>
          Submit
        </Button>
      </form>
    </div>
  );
}

export default CustomForm;

Create CustomForm.module.css in the same folder

.customform{
    display: flex;
    flex-direction: column;
    margin:1%
}
.inputFields{
    margin-top: 1% !important;
   
}
.heading{
    text-align: center;
}

• *we will create our api in the later part.

6. Create a Helper folder inside src. Inside Helper create a file named utils.js.

// utility function
export function getTenDigitRandomNumber(){
    return Math.random().toString().substring(2, 12);
} 

7. Setting up redux

Create a folder called Redux and create a file , name it Store.js

Store.js

import {configureStore, createSlice} from '@reduxjs/toolkit'
const INITIAL_STATE = { <- This object define the data structure for this application. Also it is the initial state of our app
    totaluser:0,
    users:[]
}
const userSlice = createSlice({     <- Creates a slice in redux-store
    name:'userSlice',
    initialState:INITIAL_STATE,
    reducers:{
        updateUserDetails(state,action){.  <- reducers holds all the methods for a slice
            if(action.payload!=null){
                state.totaluser = action.payload.totaluser
                state.users = action.payload.users
            }
        }
    }
})

const store = configureStore({. < - Configuring the redux store
    reducer:userSlice.reducer
})

export const userAction = userSlice.actions;  <- Actions with which we will refer the methods
export default store

8. Create a new component under Components folder. Name it FinalPage.js

import React from 'react'
import DenseTable from './DenseTable'
import classes from './FinalPage.module.css'
function FinalPage() {
  return (
    <div className={classes.container}>
      <h3>All Users</h3>
        <DenseTable/>
    </div>
  )
}

export default FinalPage

Add css file for FinalPage and name it FinalPage.module.css

.container{
    display: flex;
    align-items: center;
    flex-direction: column;
    padding: 3%;
}

Create another file inside same folder and name it DenseTable.js

import { Paper, TableContainer,Table,TableHead,TableCell,TableRow,TableBody } from '@mui/material'
import React from 'react'
import {useSelector} from 'react-redux'

function DenseTable() {
    const users = useSelector(state=>state.users)

  return (
    <TableContainer component={Paper}>
    <Table sx={{ minWidth: 650 }} size="small" aria-label="a dense table">
      <TableHead>
        <TableRow>
          <TableCell >Username</TableCell>
          <TableCell align="right">Email</TableCell>
          <TableCell align="right">address</TableCell>
          <TableCell align="right">phone</TableCell>
        </TableRow>
      </TableHead>
      <TableBody>
        {users.map((row) => (
          <TableRow
            key={row.username}
            sx={{ '&:last-child td, &:last-child th': { border: 0 } }}
          >
            <TableCell component="th" scope="row">
              {row.username}
            </TableCell>
            <TableCell align="right">{row.email}</TableCell>
            <TableCell align="right">{row.address}</TableCell>
            <TableCell align="right">{row.phonenumber}</TableCell>
          </TableRow>
        ))}
      </TableBody>
    </Table>
  </TableContainer>
  )
}

export default DenseTable

9. Wrap everything with the provider.

index.js

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import {Provider} from 'react-redux'
import store from './Redux/Store';
import { BrowserRouter } from 'react-router-dom';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <Provider store={store}>
    <BrowserRouter>
  <React.StrictMode>
    <App />
  </React.StrictMode>
  </BrowserRouter>
  </Provider>
  
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

Yes you can dynamically add as many forms as you want 🤠 our backend will handle everything

The Backend

For the backend, we will use Django and rest-framework.

1. Create a brand new django app. Run “django-admin startproject backend” command in the terminal.
2. Enter into the backend app and run “ python manage.py startapp myapis”
3. Install corsheaders and rest_framework packages.

pip install django-cors-headers

pip install djangorestframework

4. Now inside the settings.py file add the “myapis”, ’corsheaders’ , ‘rest_framework’ app.

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'myapis',
    'corsheaders',
    'rest_framework',

]

# MiddleWare and cors settings inside settings.py

MIDDLEWARE = [
    'django.middleware.security.SecurityMiddleware',
    'django.contrib.sessions.middleware.SessionMiddleware',
    'django.middleware.common.CommonMiddleware',
    'django.middleware.csrf.CsrfViewMiddleware',
    'django.contrib.auth.middleware.AuthenticationMiddleware',
    'django.contrib.messages.middleware.MessageMiddleware',
    'django.middleware.clickjacking.XFrameOptionsMiddleware',
    'corsheaders.middleware.CorsMiddleware',

]

CORS_ALLOWED_ORIGINS = [
        'http://localhost:3000',
]
CSRF_TRUSTED_ORIGINS = [
    'http://localhost:3000',
]

Entire settings.py

"""
Django settings for backend project.

Generated by 'django-admin startproject' using Django 4.0.3.

For more information on this file, see
https://docs.djangoproject.com/en/4.0/topics/settings/

For the full list of settings and their values, see
https://docs.djangoproject.com/en/4.0/ref/settings/
"""

from pathlib import Path

# Build paths inside the project like this: BASE_DIR / 'subdir'.
BASE_DIR = Path(__file__).resolve().parent.parent


# Quick-start development settings - unsuitable for production
# See https://docs.djangoproject.com/en/4.0/howto/deployment/checklist/

# SECURITY WARNING: keep the secret key used in production secret!
SECRET_KEY = 'django-insecure-hjt6w+@*1hsofny5uz@^-=4qv!i1+6r%=z3&7c$^vqta!+wx_n'

# SECURITY WARNING: don't run with debug turned on in production!
DEBUG = True

ALLOWED_HOSTS = []


# Application definition

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'myapis',
    'corsheaders',
    'rest_framework',

]

MIDDLEWARE = [
    'django.middleware.security.SecurityMiddleware',
    'django.contrib.sessions.middleware.SessionMiddleware',
    'django.middleware.common.CommonMiddleware',
    'django.middleware.csrf.CsrfViewMiddleware',
    'django.contrib.auth.middleware.AuthenticationMiddleware',
    'django.contrib.messages.middleware.MessageMiddleware',
    'django.middleware.clickjacking.XFrameOptionsMiddleware',
    'corsheaders.middleware.CorsMiddleware',

]

CORS_ALLOWED_ORIGINS = [
        'http://localhost:3000',
]
CSRF_TRUSTED_ORIGINS = [
    'http://localhost:3000',
]

ROOT_URLCONF = 'backend.urls'

TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': [],
        'APP_DIRS': True,
        'OPTIONS': {
            'context_processors': [
                'django.template.context_processors.debug',
                'django.template.context_processors.request',
                'django.contrib.auth.context_processors.auth',
                'django.contrib.messages.context_processors.messages',
            ],
        },
    },
]

WSGI_APPLICATION = 'backend.wsgi.application'


# Database
# https://docs.djangoproject.com/en/4.0/ref/settings/#databases

DATABASES = {
    'default': {
        'ENGINE': 'django.db.backends.sqlite3',
        'NAME': BASE_DIR / 'db.sqlite3',
    }
}


# Password validation
# https://docs.djangoproject.com/en/4.0/ref/settings/#auth-password-validators

AUTH_PASSWORD_VALIDATORS = [
    {
        'NAME': 'django.contrib.auth.password_validation.UserAttributeSimilarityValidator',
    },
    {
        'NAME': 'django.contrib.auth.password_validation.MinimumLengthValidator',
    },
    {
        'NAME': 'django.contrib.auth.password_validation.CommonPasswordValidator',
    },
    {
        'NAME': 'django.contrib.auth.password_validation.NumericPasswordValidator',
    },
]


# Internationalization
# https://docs.djangoproject.com/en/4.0/topics/i18n/

LANGUAGE_CODE = 'en-us'

TIME_ZONE = 'UTC'

USE_I18N = True

USE_TZ = True


# Static files (CSS, JavaScript, Images)
# https://docs.djangoproject.com/en/4.0/howto/static-files/

STATIC_URL = 'static/'

# Default primary key field type
# https://docs.djangoproject.com/en/4.0/ref/settings/#default-auto-field

DEFAULT_AUTO_FIELD = 'django.db.models.BigAutoField'

5. Building the urls.

a. Inside the urls.py of “backend” add the following code

from django.contrib import admin
from django.urls import include, path

urlpatterns = [
    path('admin/', admin.site.urls),
    path('apis/v1/',include('myapis.urls'))
]

b. Add a urls.py file in myapis folder and add->

from django.urls import include, path
from .views import handleuserdata


urlpatterns = [
    path('test/',handleuserdata)
]

6. Creating the models

Inside the models.py file add the following

from django.db import models

# Create your models here.
class Record(models.Model):
    record_name = models.TextField(max_length=30)
    def __str__(self):
        return self.record_name

class UserModel(models.Model):
    username = models.TextField(max_length=100,blank=True)
    email = models.EmailField()
    address = models.TextField(max_length=300)
    phone = models.TextField(max_length=10)
    createdDate = models.DateTimeField(auto_now_add=True,blank=True)
    related_to = models.ForeignKey(Record,on_delete=models.CASCADE)

    def __str__(self):
        return self.username+' '+self.email

7. Adding models in admin panel

Inside the admin.py add

from django.contrib import admin

from myapis.models import UserModel,Record

# Register your models here.

admin.site.register(Record)

@admin.register(UserModel)
class UserModelAdmin(admin.ModelAdmin):
    list_display = ('username', 'phone','related_to')
    list_filter = ("related_to", )
    search_fields = ("username__startswith", )

8. Run the following commands for making migrations in database.

“python manage.py makemigrations”

“python manage.py migrate”

Create a superuser with “python manage.py createsuperuser” command.

You will get this kind of prompt

9. Inside views.py file of myapis add the following

from rest_framework.response import Response
from rest_framework import viewsets
from .serializers import UserModelSerializer,RecordModelSerializer
from .models import UserModel,Record
from rest_framework.decorators import api_view
import json
from django.http import JsonResponse
from rest_framework import status


@api_view(['POST'])
def handleuserdata(request):
    data=''
    count = 0
    if(request.method=='POST'):
        data = json.loads(request.body)
        count = len(data['users'])
        record = Record()
        record.record_name = data['record_name']
        record.save()
        for user in data['users']:
            username = user['username']
            email = user['email']
            phone = user['phonenumber']
            address = user['address']
            u = UserModel()
            u.username = username
            u.email=email
            u.phone=phone
            u.address=address
            u.related_to = record
            u.save()

    data['totalnumberofusers'] = count
    return JsonResponse({"data":data},safe=False,status=status.HTTP_200_OK)

10. Run the server with “python manage.py runserver”.

Go to this url -> “http://127.0.0.1:8000/apis/v1/test/”

Admin Panel

Visit the project in github

Leave a clap if you like the article. 😸