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

Abipravi
3 min readMay 29, 2021

Todo app in react js

Preview:

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 settings.py file in todobackend folder in installed apps add the following

Go to api folder and in models.py file add the following code

Models:

Make Migrations and Migrate in terminal:

python manage.py makemigrations

python manage.py migrate

Now create new file named serilaizers.py 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 views.py 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

@api_view([‘GET’])
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)

@api_view([‘GET’])
def todolist(request):
todos = TodoData.objects.all()
serializer = Tododataserializer(todos, many=True)
return Response(serializer.data)

@api_view([‘GET’])
def userlist(request):
users = User.objects.all()
serializer = Userserializer(users, many=True)
return Response(serializer.data)

@api_view([‘GET’])
def todoDetail(request, pk):
todos = TodoData.objects.get(id=pk)
serializer = Tododataserializer(todos, many=False)
return Response(serializer.data)

@api_view([‘POST’])
def todosCreate(request):
serializer = Tododataserializer(data=request.data)

if serializer.is_valid():
serializer.save()
return Response(serializer.data)

@api_view([‘POST’])
def userCreate(request):
serializer = Userserializer(data=request.data)
if serializer.is_valid():
serializer.save()
return Response(serializer.data)

@api_view([‘POST’])
def todosUpdate(request, pk):
todo = TodoData.objects.get(id=pk)
serializer = Tododataserializer(instance=todo, data=request.data)

if serializer.is_valid():
serializer.save()
return Response(serializer.data)

@api_view([‘DELETE’])
def todosDelete(request, pk):
todo = TodoData.objects.get(id=pk)
todo.delete()
return Response(“Taks deleted successfully.”)

After saving the views.py create another file named urls.py inside the api folder for url navigations

Go to the urls.py on the todobackend folder and add the following code:

Now run the following command:

python manage.py 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

--

--

Abipravi
0 Followers

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