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
Medium Footer Template
Follow us on Blogger:
Instagram:
https://www.instagram.com/praveenkumar_abipravi/
Twitter:
Facebook:
Linked In:
