Todo app in react js and Django rest API(part -1)

3 min readMay 29, 2021


Todo app in react js


Video Demo:

Back End Code:

Create A new django project named todobackend

and Create a new app in named api in todoback end

go to file in todobackend folder in installed apps add the following

Go to api folder and in file add the following code


Make Migrations and Migrate in terminal:

python makemigrations

python migrate

Now create new file named inside api folder and add the following code:

In the above code the userserializer class is for User auth and tododataserializer is for the adding task data

Now go to the file in api folder and then add the csrf functions for create, read, update, and delete in the user table and task table.

from django.shortcuts import render
from django.http import JsonResponse
from rest_framework.decorators import api_view
from rest_framework.response import Response
from .serializers import Userserializer, Tododataserializer
from .models import User, TodoData

def apiOverview(request):
api_urls = {
‘List-todoData’: ‘/list/’,
‘Detail View — todoData’: ‘/list/<str:pk>/’,
‘Create — todoData’: ‘/create/’,
‘Update — todoData’: ‘/update/<str:pk>/’,
‘Delete — todoData’: ‘/delete/<str:pk>/’,
‘List-UsersData’: ‘/user/’,
‘Create — User’: ‘/createuser/’,
return Response(api_urls)

def todolist(request):
todos = TodoData.objects.all()
serializer = Tododataserializer(todos, many=True)
return Response(

def userlist(request):
users = User.objects.all()
serializer = Userserializer(users, many=True)
return Response(

def todoDetail(request, pk):
todos = TodoData.objects.get(id=pk)
serializer = Tododataserializer(todos, many=False)
return Response(

def todosCreate(request):
serializer = Tododataserializer(

if serializer.is_valid():
return Response(

def userCreate(request):
serializer = Userserializer(
if serializer.is_valid():
return Response(

def todosUpdate(request, pk):
todo = TodoData.objects.get(id=pk)
serializer = Tododataserializer(instance=todo,

if serializer.is_valid():
return Response(

def todosDelete(request, pk):
todo = TodoData.objects.get(id=pk)
return Response(“Taks deleted successfully.”)

After saving the create another file named inside the api folder for url navigations

Go to the on the todobackend folder and add the following code:

Now run the following command:

python runserver

go to chrome and visit the url “localhost:8000”

Now you can able to add the user and add tasks by visiting the urls listed in the about image.

connecting django api with react front end:

Full front end scouce code in github:

Thanks for reading




Founder and CEO of Abipravi. Reactjs expert and Django developer. Intrested in artifical intellegence and Web development. Blogging and Teaching in youtube🔥🔥