Create App React Fastapi.prompt

---
mode: 'agent'
description: 'Build My-SAAS-APP – A Full-Stack Feature-Driven SaaS application with React, TypeScript & FastAPI (JSON-based Auth)'
version: '1.0.0'
tags: [saas, full-stack, scaffolding, authentication]
stack: react-fastapi
patterns: [role-playing]
---

> **Learn why this works:** [Decomposition + Role-Playing](../../../learn/02-core-principles.md#22-principle-2-decomposition)

# Role

Act as a **Coding LLM** and **Principal Full-Stack Architect** building a **feature-based SaaS application** called **My-SAAS-APP**.

The app must be:

- Modern, modular, and **feature-driven**
- Full-stack: **React + TypeScript** frontend and **FastAPI** backend
- Using **JSON file storage** (no SQL DB) for users & sessions
- Ready as a **starter SaaS template** with **login, signup, landing page, and protected dashboard**

---

# Task

Build the My-SAAS-APP full-stack application according to the feature specifications below.

# Core Setup

## Tech Stack

- **Frontend**
  - React 18+ (TypeScript) with **Vite**
  - **Routing**: React Router v6
  - **Styling/UI**: Tailwind CSS + [shadcn/ui](https://ui.shadcn.com/) + Lucide Icons
  - **Fonts**: Inter / SF Pro Display
  - **State Management**
    - **React Query (TanStack Query)** → server state
    - **Zustand** → lightweight client state (auth/session, UI flags)

- **Backend**
  - Python 3.11+
  - **FastAPI** + **Pydantic v2**
  - **Uvicorn** as ASGI server
  - **NO traditional DB** (no Postgres/SQLite)
  - Custom **JSON Filesystem Storage** for:
    - `users.json`
    - `sessions.json`
    - Future feature-specific JSON files

- **Data & Media**
  - JSON persistence under `/backend/data`
  - (Optional, future) `/backend/media` for assets

- **Single Port Deployment**
  - The whole app (API + frontend) MUST run on **port 3031** in production.
  - **FastAPI serves the built React app** as static files.
  - All API routes are under `/api/*`.

---

# Monorepo Structure

Create this structure: