API example

API Example

Creating a Django CRUD API with pagination and search functionality is a great way to practice both Django and React. Here are some topic ideas for example APIs you can create:

1. Blog API:

   • Endpoints:

     • GET /api/posts/ (list posts with pagination and search by title/content)
     • POST /api/posts/ (create a new post)
     • GET /api/posts/{id}/ (retrieve a specific post)
     • PUT /api/posts/{id}/ (update a specific post)
     • DELETE /api/posts/{id}/ (delete a specific post)

   • Fields: id, title, content, author, created_at, updated_at

2. Product Inventory API:

   • Endpoints:

     • GET /api/products/ (list products with pagination and search by name/description)
     • POST /api/products/ (create a new product)
     • GET /api/products/{id}/ (retrieve a specific product)
     • PUT /api/products/{id}/ (update a specific product)
     • DELETE /api/products/{id}/ (delete a specific product)

   • Fields: `id, name, description, price, stock, created_at, updated_at

3. Library Management API:

   • Endpoints:

     • GET /api/books/ (list books with pagination and search by title/author)
     • POST /api/books/ (create a new book)
     • GET /api/books/{id}/ (retrieve a specific book)
     • PUT /api/books/{id}/ (update a specific book)
     • DELETE /api/books/{id}/ (delete a specific book)

   • Fields: id, title, author, genre, published_date, isbn, created_at, updated_at

4. User Management API:

   • Endpoints:

     • GET /api/users/ (list users with pagination and search by username/email)
     • POST /api/users/ (create a new user)
     • GET /api/users/{id}/ (retrieve a specific user)
     • PUT /api/users/{id}/ (update a specific user)
     • DELETE /api/users/{id}/ (delete a specific user)

   • Fields: id, username, email, first_name, last_name, created_at, updated_at

5. Task Management API:

   • Endpoints:

     • GET /api/tasks/ (list tasks with pagination and search by title/description)
     • POST /api/tasks/ (create a new task)
     • GET /api/tasks/{id}/ (retrieve a specific task)
     • PUT /api/tasks/{id}/ (update a specific task)
     • DELETE /api/tasks/{id}/ (delete a specific task)

   • Fields: id, title, description, status, priority, due_date, created_at, updated_at

---

API

Steps to Implement:

1. Django Setup:

   • Install Django and Django REST Framework.
   • Create a new Django project and app.
   • Define your models.
   • Create serializers for your models.
   • Create viewsets and configure routers.
   • Add pagination and search filters.

2. Pagination and Search:

   • Use Django REST Framework's PageNumberPagination or LimitOffsetPagination.
   • Implement search functionality using Django REST Framework's SearchFilter.

3. React Setup:

   • Create a new React project using Create React App.
   • Set up routing with React Router.
   • Create components for listing, creating, updating, and deleting records.
   • Use Axios or Fetch API to interact with the Django API.
   • Implement pagination and search in the React frontend.

Example Code Snippet (Django):

# models.py
from django.db import models

class Post(models.Model):
    title = models.CharField(max_length=100)
    content = models.TextField()
    author = models.CharField(max_length=50)
    created_at = models.DateTimeField(auto_now_add=True)
    updated_at = models.DateTimeField(auto_now=True)

# serializers.py
from rest_framework import serializers
from .models import Post

class PostSerializer(serializers.ModelSerializer):
    class Meta:
        model = Post
        fields = '__all__'

# views.py
from rest_framework import viewsets
from rest_framework.pagination import PageNumberPagination
from rest_framework.filters import SearchFilter
from .models import Post
from .serializers import PostSerializer

class PostPagination(PageNumberPagination):
    page_size = 10

class PostViewSet(viewsets.ModelViewSet):
    queryset = Post.objects.all()
    serializer_class = PostSerializer
    pagination_class = PostPagination
    filter_backends = [SearchFilter]
    search_fields = ['title', 'content']

# urls.py
from django.urls import path, include
from rest_framework.routers import DefaultRouter
from .views import PostViewSet

router = DefaultRouter()
router.register(r'posts', PostViewSet)

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

Using in React

Example Code Snippet (React):

// App.js
import React from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import PostList from './components/PostList';
import PostDetail from './components/PostDetail';
import PostCreate from './components/PostCreate';
import PostEdit from './components/PostEdit';

function App() {
  return (
    <Router>
      <Switch>
        <Route exact path="/" component={PostList} />
        <Route path="/posts/:id" component={PostDetail} />
        <Route path="/create" component={PostCreate} />
        <Route path="/edit/:id" component={PostEdit} />
      </Switch>
    </Router>
  );
}

export default App;

You can extend and modify these examples to fit your specific use case.

---