Standard React FastAPI Environment

Mobile UI

Expo mobile screenshot

Web UI

"web_ui"

Expo React Native アプリを FastAPI backend に接続するための、すぐに実行できる full-stack starter container。

この template には、Expo React Native frontend、FastAPI backend、PostgreSQL、JWT authentication、CRUD APIs、Docker Compose、backend tests、frontend tests、GitHub Actions CI が含まれる。

Expo で mobile app または web app を構築し、FastAPI backend に接続したい場合に、この repository を使用する。

full-stack development environment の構成:

Frontend: Expo (React Native + TypeScript)
- 単一の codebase で Web、Android、iOS に対応
Backend: FastAPI (Python)
Database: PostgreSQL
Container: 一貫した development setup のための Docker Compose

Features

Expo による Cross-platform frontend
- Expo Go または standalone builds を通じて、web app として、または Android/iOS devices 上で実行可能
CRUD operations : records の Create、Read、Update、Delete
Auth operations : Signup、Signin、Signout
automatic docs 付きの FastAPI backend
- /api/v1 配下の versioned REST API と Swagger UI (/docs)

🚀 Getting Started

1. Prerequisites

Docker Compose
Expo Go (Android/iOS testing 用)

2. すべての services を build して start する:

# set environment variables:
export REACT_NATIVE_PACKAGER_HOSTNAME=${YOUR_HOST}

# Build the image
docker compose build

# Run the container
docker compose up

3. Test:

# Backend pytest
docker compose \
  -f docker-compose.test.yml run \
  --rm \
  --entrypoint /bin/sh backend_test \
  -lc ' pytest -q '

# Backend Lint
docker compose \
  -f docker-compose.test.yml run \
  --rm \
  --entrypoint /bin/sh backend_test \
  -lc 'ruff check /app /tests'

# Frontend Test
docker compose \
  -f docker-compose.test.yml run \
  --rm frontend_test

4. Services にアクセスする:

Backend API: http://localhost:8000/docs
Frontend UI (WEB): http://localhost:8081
Frontend UI (mobile): exp://${YOUR_HOST}:8081: Expo が提供する QR から access する。

License

Apache License 2.0