Skip to content

Quick Start

This guide helps you get productive quickly with the Freeze Design codebase.

Development Workflow

1. Start the Services

Open three terminal windows:

cd backend
source venv/bin/activate
python manage.py runserver

cd frontend
npm run dev

cd backend
source venv/bin/activate
celery -A config worker -l INFO

2. Access the Application

URL Description
http://localhost:3000 Main webshop
http://localhost:8000/admin Django admin
http://localhost:8000/api/docs/ API documentation

Common Tasks

Adding a New API Endpoint

  1. Create the serializer in backend/apps/<app>/serializers.py
  2. Create the viewset in backend/apps/<app>/views.py
  3. Register in backend/config/urls.py router
  4. Test at http://localhost:8000/api/docs/

Adding a New React Component

  1. Create component in frontend/components/
  2. Add types to frontend/types/index.ts if needed
  3. Create Storybook story in same directory
  4. Run npm run storybook to preview

Running Tests

cd backend
python manage.py test

cd frontend
npm run test

cd frontend
npm run test:e2e

Useful Commands

Backend

# Create migrations
python manage.py makemigrations

# Apply migrations
python manage.py migrate

# Create superuser
python manage.py createsuperuser

# Shell access
python manage.py shell

# Validate OpenAPI schema
python manage.py spectacular --validate

Frontend

# Development server
npm run dev

# Production build
npm run build

# Linting
npm run lint

# Storybook
npm run storybook

# TypeDoc
npm run docs:typedoc

Next Steps