A virtual wardrobe that shows you how clothes look on you.
dressme-add-cut-16-9.mp4
- shadcn/ui
- Tailwind
- React
- Auth0
- FastAPI
- SQLModel
- PostgreSQL
- Neon
- Cloudflare Containers
- Replicate
- π
[.github](./.github): GitHub Actions CI configuration - π
[api](./api): the backend API - π
[images](./images): sample images for seeding the development database - π
[src](./src): the frontend client source code - π
[worker](./worker): the Cloudflare Worker entrypoint
- Install the required tools:
- Install dependencies:
pnpm install- Copy the example environment file and fill in the missing values:
cp .env.example .envSee [settings.py](./api/src/dressme/settings.py) for documentation of environment variables used by the API. Note that environment variables need to be explicitly forwarded to the API container in [worker/index.ts](./worker/index.ts) when running through the worker (both for development and production).
All environment variables are sourced from .env (see .env.example for the template).
Production environment variables for the API are managed via the Cloudflare dashboard or the Wrangler CLI:
pnpm wrangler secret list
pnpm wrangler secret put <SECRET_NAME>All environment variables are sourced from .env (see .env.example for the template).
Some environment variables are not needed to run tests, because they don't rely on external services. To allow settings validation to pass without weakening types by allowing None, placeholder values are set in the [tool.pytest_env] section in [pyproject.toml](./api/pyproject.toml).
Production environment variables for the client are sourced from .env and set on build/deploy. Only variables starting with VITE_ are included. To use different values in production than in local development, create a .env.production file with only the variables you want to override.
For local development, we use MinIO as an S3-compatible object storage. It requires no extra configuration when copying the default values from .env.example. You can access the MinIO console at http://localhost:9101 with the credentials minioadmin/minioadmin.
In production, we use Cloudflare R2 with a scoped-down API token that only has permission to read and write objects in specific buckets. A new API token can be created in the Cloudflare dashboard under R2 > API Tokens > Manage.
Runs both the client and API together, similar to the production setup.
# Run required services
docker compose up -d
# Start the app (rebuilds container)
pnpm run devThe client will be available at http://localhost:5173. After making an (authenticated) request to the client, the API will start and be available at http://localhost:8000.
Changes to the client and worker are auto-reloaded, but changes to the API require a restart to take effect.
API logs are not shown by default when running with pnpm run dev. To view them while the API is running:
pnpm run api-logsNote that you need to make a request to the client before the API will start.
If you need to do it manually, look up the Docker container ID with docker ps (image name cloudflare-dev/dressme), then run docker logs -f <CONTAINER_ID>.
Faster to start and iterate when working on the API only.
# Run required services
docker compose up -d
# Start the API
cd api
uv run fastapi dev src/dressme/main.pyThe API will be available at http://localhost:8000.
Faster than running the whole app, but matches the production environment more closely than running directly with uv.
# Run required services
docker compose up -d
# Build and run the API
docker build api/ -t dressme-api
docker run -p 8000:8000 --env-file .env dressme-apiThe API will be available at http://localhost:8000.
pnpm test
pnpm typecheck
pnpm lintcd api
uv run pytest
uv run pyright # type checkingEvals measure the performance of AI components. To run them:
cd api
uv run pytest -m eval -s # run all evals once
uv run pytest -m eval -s --runs 3 # run multiple times for consistencyWhile docker compose is running, you can interact with the local PostgreSQL database using:
psql postgresql://dressme:dressme@localhost:5432/localTo reset your local database, stop the containers and remove the volume:
docker compose down -vWhen you first start the backend, the database will be empty. To add some test data, set the AUTH0_SEED_USER_ID environment variable (in your .env file or your shell), then run the seed script:
cd api
uv run seedThis will add some wearables to the database.
A TypeScript client is generated in src/api to easily interact with the API. When the API is changed, you should re-generate this client to stay up-to-date:
pnpm generate-clientNote that the API server must be running for this to work.
When making API requests, you'll need to pass a valid access token. The client gets this token automatically from Auth0 after you log in, but you can also get it yourself by making a request like this:
curl -X POST 'https://$AUTH0_DOMAIN/oauth/token' \
--header 'Content-Type: application/json' \
--data '{
"client_id": "$AUTH0_CLIENT_ID",
"client_secret": "$AUTH0_CLIENT_SECRET",
"audience": "$AUTH0_API_AUDIENCE",
"grant_type": "client_credentials"
}'(You can get these variables from the Auth0 Dashboard, and you probably already have some in your .env file)
You can then use this access token when making API requests, for example:
curl -X GET 'http://localhost:8000/wearables' \
--header 'Authorization: Bearer $YOUR_ACCESS_TOKEN'The app is deployed to Cloudflare using:
pnpm run deployThis deploys both the client (Cloudflare Workers) and the API (Cloudflare Containers).