�Backend (Django + Django REST Framework):-


�1. Install & Create Django Project

django-admin startproject backend

cd backend

pip install django djangorestframework corsheaders

python manage.py startapp students



students/models.py file code:-

from django.db import models

class Student(models.Model):
    name = models.CharField(max_length=100)
    age = models.IntegerField()
    grade = models.CharField(max_length=10)

    def __str__(self):
        return self.name

stuents/serializers.py file code:-

from rest_framework import serializers
from .models import Student

class StudentSerializer(serializers.ModelSerializer):
    class Meta:
        model = Student
        fields = '__all__'


students/views.py file code:-

from rest_framework import viewsets
from .models import Student
from .serializers import StudentSerializer

class StudentViewSet(viewsets.ModelViewSet):
    queryset = Student.objects.all()
    serializer_class = StudentSerializer


students/urls.py file code:-

# urls.py

from django.urls import path, include
from rest_framework.routers import DefaultRouter
from .views import StudentViewSet

router = DefaultRouter()
router.register(r'students', StudentViewSet)

urlpatterns = [
    path('', include(router.urls)),
]


backend/urls.py file code(project folder):-

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

urlpatterns = [
    path('admin/', admin.site.urls),
    path('api/', include('students.urls')),
]


backend/settings.py file code(project folder):-

# Application definition

INSTALLED_APPS = [
    
    'rest_framework',
     'corsheaders',
     'students',
]

MIDDLEWARE = [
    
    'corsheaders.middleware.CorsMiddleware',
]

CORS_ALLOW_ALL_ORIGINS = True



now run your backend api:-

python manage.py runserver


open your output at :-

http://127.0.0.1:8000/api/students/
____________________________
_____________________________

_

�Frontend (React.js):-

�1. Create React App
npx create-react-app frontend
cd frontend
npm install axios


step 1:- create src/api.js under src folder:-

import axios from 'axios';
export default axios.create({
 baseURL: 'http://127.0.0.1:8000/api/'
});

step 2:-create  Studentapp.js file under  src/components/StudentApp.js file :-

import React, { useEffect, useState } from 'react';
import api from '../api';
const StudentApp = () => {
 const [students, setStudents] = useState([]);
 const [form, setForm] = useState({ name: '', age: '', grade: '' });
 const [editId, setEditId] = useState(null);
 useEffect(() => {
 fetchStudents();
 }, []);
 const fetchStudents = async () => {
 const res = await api.get('students/');
 setStudents(res.data);
 };
 const handleChange = (e) => {
 setForm({ ...form, [e.target.name]: e.target.value });
 };
 const handleSubmit = async () => {
 if (editId) {
 await api.put(`students/${editId}/`, form);
 setEditId(null);
 } else {
 await api.post('students/', form);
 }
 setForm({ name: '', age: '', grade: '' });
 fetchStudents();
 };
 const handleEdit = (student) => {
 setForm({ name: student.name, age: student.age, grade: student.grade });
 setEditId(student.id);
 };
 const handleDelete = async (id) => {
 await api.delete(`students/${id}/`);
 fetchStudents();
 };
 return (
 <div style={{ padding: '20px' }}>
 <h2>Student Manager</h2>
 <input name="name" value={form.name} onChange={handleChange}
placeholder="Name" />
 <input name="age" type="number" value={form.age}
onChange={handleChange} placeholder="Age" />
 <input name="grade" value={form.grade} onChange={handleChange}
placeholder="Grade" />
 <button onClick={handleSubmit}>{editId ? 'Update' : 'Add'}</button>
 <ul>
 {students.map((s) => (
 <li key={s.id}>
 {s.name} (Age: {s.age}, Grade: {s.grade})
 <button onClick={() => handleEdit(s)}>Edit</button>
 <button onClick={() => handleDelete(s.id)}>Delete</button>
 </li>
 ))}
 </ul>
 </div>
 );
};
export default StudentApp;
 
 
Src/App.js file code :-
 
import React from 'react';
import StudentApp from './components/StudentApp';
function App() {
 return (
 <div className="App">
 <StudentApp />
 </div>
 );
}
export default App;


and run it 


npm start