React Query Ads Management

A small full-stack project for learning and practicing TanStack React Query with a Django REST API.

This repository includes a backend API for managing advertisements and a frontend React app that demonstrates fetching, caching, pagination, infinite scrolling, create/update/delete flows, and optimistic updates using React Query.

Features

• Fetch and display ads from a Django API
• Server state caching with TanStack React Query
• Pagination and infinite scrolling
• Create, update, and delete ads
• Optimistic UI updates
• Basic search and ad-type filtering
• Real backend integration with SQLite database

Tech Stack

Frontend

• React
• TypeScript
• Vite
• TanStack React Query
• React Hook Form

Backend

• Django
• Django REST Framework
• SQLite
• django-cors-headers
• django-filter

Project Structure

react-query-course/
├── back/
│   ├── ads/
│   ├── queries/
│   ├── media/
│   ├── db.sqlite3
│   ├── manage.py
│   └── requirements.txt
├── front/
│   └── react query/
│       ├── src/
│       ├── package.json
│       ├── vite.config.ts
│       └── index.html
├── README.md
└── .gitignore

Prerequisites

Before running the project, make sure you have installed:

• Node.js 18+
• npm or yarn
• Python 3.10+
• pip

Backend Setup

Open a terminal in the back folder:

cd back
python -m venv .venv

Windows

.venv\Scripts\activate

macOS/Linux

source .venv/bin/activate

Then install the dependencies:

pip install -r requirements.txt

Apply database migrations:

python manage.py migrate

Create a superuser if you want to access Django admin:

python manage.py createsuperuser

Run the backend server:

python manage.py runserver

The API will be available at:

• http://127.0.0.1:8000
• http://127.0.0.1:8000/ads/advertises/
• http://127.0.0.1:8000/ads/advertises/paged/

Frontend Setup

Open a new terminal in the frontend folder:

cd "front/react query"

Install dependencies:

npm install

Start the app:

npm run dev

By default, Vite runs on:

• http://localhost:5173

Run on a Specific Port

To run the frontend on a specific port, for example 3000:

npm run dev -- --port 3000

API Behavior

The backend exposes a Django REST API for advertisements with actions such as:

• List ads
• Filter by ad type
• Search ads by title
• Paginated ads listing
• Create a new ad
• Update an ad
• Delete an ad

Notes

• The frontend expects the backend to be running before using the app.
• The repository includes a pre-seeded SQLite database (db.sqlite3) with sample real-world ads and their images (back/media/), so the app has real data to display right after setup — no manual seeding required.
• If you'd rather start with a clean database, just delete db.sqlite3 and re-run python manage.py migrate before starting the server.
• The project is designed as a learning/demo app, so the structure is intentionally simple and educational.

License

This project is intended for educational purposes.

Contribution

This repository is mainly for learning and practice, but improvements and cleanup are welcome.