Accelerating Full‑Stack Development with React Kit

Building a scalable, maintainable application often means juggling multiple repositories, ensuring consistency across front- and back‑end code, and wiring up complex toolchains. React Kit streamlines this process by bundling a modern React frontend and an asynchronous Python FastAPI backend into a single, type‑safe monorepo. Whether you’re prototyping an MVP or laying the groundwork for a production‑grade platform, React Kit gets you up and running in minutes — with best practices baked in.

👉 Explore the repo on GitHub

Why a Monorepo?

Splitting frontend and backend into separate repos can soon become an organizational headache:

• Duplicated setup: Separate linting, formatting, and CI configurations.
• Sync challenges: API changes on the backend may break frontend code if types drift.
• Onboarding friction: New team members must clone and configure multiple projects.

React Kit solves this by colocating code under a single roof, sharing configuration, and enforcing consistent tooling across the stack.

Key Features at a Glance

Type‑Safe Full Stack

• Backend: FastAPI + Pydantic v2 ensures strict request/response validation.
• Frontend: React + TypeScript with end‑to‑end type safety.
• Type Generation: Optional tools like @rtk-query/codegen-openapi can generate TS types directly from your FastAPI OpenAPI schema, eliminating type drift.

Modern Frontend Tooling

• Vite for lightning‑fast builds and hot reload.
• TanStack Router for file‑based, zero‑config routing with nested layouts.
• Redux Toolkit & RTK Query for intuitive state management and data fetching.
• Tailwind CSS for utility‑first styling.

Async‑First Backend

• FastAPI powers auto‑generated OpenAPI docs (Swagger at /docs).
• SQLAlchemy with async support (via asyncpg) for high‑throughput database interactions.
• Seed Data: On startup, the backend seeds predefined data from constants/seed_data.json if tables are empty.

Robust Tooling & Automation

• Husky Git Hooks enforce linting and formatting at every commit and can auto‑run migrations or dependency installs on merge.
• Ruff for Python linting, Black for formatting.
• Biome on the frontend for linting and formatting.

Inside the Monorepo

react-kit/
├── backend/                # FastAPI backend
│   ├── app/                # Core code: routers, models, schemas
│   ├── requirements.txt    # Python deps
│   └── .env                # Environment variables
├── frontend/               # React + TypeScript
│   ├── src/                # Routes, store, assets
│   ├── package.json        # JS deps & scripts
│   └── vite.config.ts      # Build config
└── .husky/                 # Git hooks (pre‑commit, post‑merge)

This structure keeps concerns neatly separated while sharing top‑level scripts and configuration files.

Quickstart Guide

1. Clone and Install

git clone https://github.com/DivineDemon/react-kit.git
cd react-kit

2. Backend Setup

cd backend
python -m venv .venv
source .venv/bin/activate
pip install -r requirements.txt
cp .env.example .env    # configure DATABASE_URL, JWT_SECRET_KEY
uvicorn app.main:app --reload

3. Frontend Setup

cd ../frontend
pnpm install
cp .env.example .env    # set VITE_BASE_API_URL
pnpm run dev

Within moments, you’ll have both servers running with hot reload enabled.

Development Workflow & Best Practices

• Coding: Work inside /frontend or /backend; file‑based routing and modular FastAPI routers make feature addition intuitive.
• Lint & Format: Pre‑commit hooks automatically run Ruff/Black and ESLint/Prettier on staged changes.
• Type Updates: After modifying Pydantic schemas, regenerate TS types via @rtk-query/codegen-openapi to keep frontend in sync.
• Database Migrations: While not built‑in, you can augment React Kit with Alembic for versioned migrations.

This workflow minimizes manual steps, letting you focus on building features rather than maintaining boilerplate.

Special Highlights

• Automatic API Discovery: All Python modules under app/routers/ are auto‑included in your FastAPI app—no manual imports needed.
• Hot‑Reload Everywhere: Both uvicorn and Vite watch for file changes, providing instant feedback loops.
• Seeded Demo Data: Fresh database? Just start your backend and watch your tables populate automatically.
• Extensible: Swap Postgres for MySQL by updating your DATABASE_URL, or replace RTK Query with React Query—React Kit doesn’t lock you in.

Who Should Use React Kit?

• Startup Teams aiming to ship MVPs rapidly with minimal ops overhead.
• Full‑Stack Developers who value type safety and end‑to‑end consistency.
• Engineering Managers looking for a reproducible boilerplate to onboard new engineers.
• Even seasoned teams can benefit by using React Kit as a template for best‑in‑class tooling and workflows.

Next Steps & Contribution

While React Kit comes pre‑wired for most use cases, you can easily extend it:

• Add GraphQL by layering Ariadne or Strawberry on top of FastAPI.
• Integrate CI/CD pipelines (GitHub Actions templates are a natural fit).
• Build a mobile companion using React Native in the same monorepo.
• Contributions are welcome — simply fork the repo, implement your enhancements, and submit a pull request. Check out the FAQ and Contributing sections for more details.

Conclusion

React Kit offers a compelling foundation for modern web applications, uniting a type‑safe Python backend and a high‑performance TypeScript frontend under one roof. With automated tooling, robust defaults, and an emphasis on developer experience, it’s an ideal starting point for projects of any scale. Clone the repo today and start building your next full‑stack app with confidence.

🔗 github.com/DivineDemon/react‑kit