Django Shopper

Full‑stack shopping cart application built with:

• Django 6 backend exposing JSON APIs
• PostgreSQL (via Docker) for persistence
• React + Vite + TypeScript + Tailwind CSS frontend
• Automated tests, linting and formatting on both ends
• Continuous integration via GitHub Actions

---

Project structure

django-shopper/
├─ cart/                  # Django app (models, API views, tests)
├─ shopper/               # Project settings and URLs
├─ frontend/              # React/Vite frontend UI
├─ Dockerfile
├─ docker-compose.yml
├─ requirements.txt
└─ .github/workflows/ci.yml

---

Getting started

1. Copy configuration

   cp .env.example .env
   # edit .env if needed (secrets, ports)

2. Start services (Docker must be running)

   docker-compose up --build -d

3. Migrate database

   docker-compose run web python manage.py migrate

4. (Optional) Load sample data

   docker-compose run web python manage.py loaddata products

5. Create admin user

   docker-compose run web python manage.py createsuperuser

6. Run frontend

   cd frontend
   npm install        # first time only
   npm run dev        # http://localhost:5173/

The React app proxies /api/* to the Django server on port 8000, so you can hit APIs without CORS.

---

API reference

All endpoints return/accept JSON. No authentication is required.

Method	Path	Description	Payload example
GET	/api/products/	List all products	—
POST	/api/products/	Create a new product	{ "name": "Foo", "price": "9.99" }
GET	/api/products/{id}/	Retrieve single product	—
PUT	/api/products/{id}/	Update a product	same as POST
DELETE	/api/products/{id}/	Delete a product	—
POST	/api/cart/add/{product_id}/	Add product to current cart	—
POST	/api/cart/update/{product_id}/	Change quantity in cart	{ "quantity": 3 }
POST	/api/cart/remove/{product_id}/	Remove item from cart	—

Use curl or the React UI (located at /frontend/src/App.tsx) to exercise these.

---

Development tools

Backend

• Tests: docker-compose run web python manage.py test (also executed in CI)
• Lint/format: python -m black ., python -m flake8 (see .flake8 config)

Frontend (in frontend/)

• npm run lint (ESLint)
• npm run format:check / npm run format (Prettier)
• npm run build produces static assets for production

These checks are automatically run by the GitHub Actions workflow on every push/PR.

---

Notes

• .env contains database settings and should not be committed.
• Use the USE_SQLITE=True env var when running management commands locally to avoid needing the DB container.
• The Django backend no longer serves any HTML; the React frontend handles all user-facing screens.

Happy coding! 🚀