APIS & PYTHON / API DESIGN DEMO

Django API Lab

An interactive guide to a Django REST-style API. Explore GET requests, query parameters, validation, and status codes using a clearly labelled browser simulation.

Try the demo Behind the build

API designDjango conceptsTypeScript

All projects

Explore list, detail, and missing-resource responses

Try filters and invalid query parameters

Connect a JSON response to a short Django REST example

SIMULATED API · RUNS IN YOUR BROWSER

A request. A response. A clearer idea.

Use local sample data to explore the shape of a REST API. No Python server runs here and no network request is sent.

Choose a GET endpoint

Query parameters (list endpoint)

Try search=learn, completed=false, or limit=2. An invalid value returns a simulated 400 response.

GET/api/tasks/

What to look for

200 means the request succeeded. 400 means a parameter needs attention. 404 means the requested task was not found. count shows all matching tasks before the limit is applied.

200 OK

Response for GET /api/tasks/

{
  "count": 4,
  "results": [
    {
      "id": 1,
      "title": "Learn how GET requests work",
      "completed": true
    },
    {
      "id": 2,
      "title": "Build a useful first endpoint",
      "completed": false
    },
    {
      "id": 3,
      "title": "Write a helpful error response",
      "completed": false
    },
    {
      "id": 4,
      "title": "Learn to filter a list",
      "completed": true
    }
  ]
}

See the Django REST idea behind itPython sketch

A serializer defines the response fields. A read-only viewset can expose list and detail endpoints. This small sketch assumes an existing Task model.

It is an illustration, not the code running above. A real Django project would also need routing, settings, and the query-validation logic demonstrated in the simulation.

from rest_framework import serializers, viewsets
from .models import Task

class TaskSerializer(serializers.ModelSerializer):
    class Meta:
        model = Task
        fields = ["id", "title", "completed"]

class TaskViewSet(viewsets.ReadOnlyModelViewSet):
    queryset = Task.objects.all()
    serializer_class = TaskSerializer

This is a frontend demonstration. There are no accounts, backend APIs, or shared databases.

BEHIND THE BUILD / DJANGO API LAB

Make an API response something you can explore.

See how a clearly labelled browser simulation makes API behaviour easier to understand.

Download demo source

THE IDEA

Start with a useful interaction.

Status codes and query parameters are easier to understand when you can change an input and inspect the result. This lab turns a small task API into a guided, repeatable learning example.

A TypeScript function simulates GET responses from four local sample tasks. The interface shows the requested path, status, and JSON together. A separate Django REST Framework sketch explains one way a real list and detail API could begin.

API concepts · input validation · a browser simulation

TRY IT FOR YOURSELF

Three small things to explore.

Try completed=false&limit=1
The response counts two matching tasks and returns one result.
Change the limit to zero
The lab returns a simulated 400 with an explanation of the accepted range.
Choose the missing task endpoint
The response becomes 404 and explains that the task could not be found.

Try these steps in the demo

THE CHOICES THAT MATTER

A little reasoning behind the interface.

Keep the example easy to inspect

Local sample data makes the responses repeatable and removes server setup from the lesson. The page explicitly identifies itself as a simulation: it sends no API request and runs no Python server. The short loading delay illustrates a request state rather than measuring network time.

Show errors as part of the API

The list endpoint accepts search, completed, and limit. Unknown parameters, invalid Boolean values, and limits outside 1–50 return a simulated 400 with a useful field message. A missing task returns 404 instead of an empty success response.

Make the response contract visible

The count describes all matching tasks before the limit is applied. The results array contains the returned subset. The Django sketch is kept separate because real routing, settings, models, and query validation would still need to be implemented.

The edges deserve attention, too.

A search with no matches returns count: 0 and an empty results array.
Unknown query keys and completed values other than true or false produce a 400 response.
A limit must contain whole-number digits and be between 1 and 50.
Query controls are disabled on detail endpoints, where this lesson does not use filters.

What this version covers.

This is a frontend learning demo, not a deployed Django backend or a production API.

The example covers GET requests to a small fixed dataset. It does not implement authentication, writes, pagination links, or a database.

A sensible next step

A production version would start with the actual data model and access rules, then implement and test the response contract in Django rather than simulating it in the browser.

Open the source. Follow the decisions.

The download contains the demo’s actual source files and a short guide. It is a source extract for reading and reuse within a React project, rather than a separate installed app.