Flux

Flux is a modern full-stack application built with FastAPI and React, utilizing Refine for the frontend and Shadcn UI for components. It leverages devenv for a reproducible development environment.

Tech Stack

Backend

• Framework: FastAPI
• Database ORM: SQLAlchemy
• Migrations: Alembic
• Authentication: OAuth2 with JWT (python-jose, passlib)
• Linting & Formatting: Ruff
• Type Checking: Mypy
• Testing: Pytest

Frontend

• Framework: React 19
• Build Tool: Vite
• Data Framework: Refine
• UI Components: Shadcn UI, Radix UI
• Styling: Tailwind CSS
• Form Handling: React Hook Form
• Validation: Zod

Prerequisites

• Nix
• devenv

Getting Started

This project uses devenv to manage dependencies and services.

1. Clone the repository:

   git clone <repository-url>
   cd fluxapp
   

2. Start the development environment:

   devenv up
   

   This command will start all necessary services, including the backend API and frontend development server.

Project Structure

fluxapp/
├── backend/          # FastAPI application
│   ├── app/          # Application source code
│   ├── alembic/      # Database migrations
│   └── tests/        # Backend tests
├── frontend/         # React application
│   ├── src/          # Frontend source code
│   └── public/       # Static assets
├── devenv.yaml       # Development environment configuration
└── README.md         # Project documentation

Documentation

• Backend Development Guide
  • Adding Models
  • Creating Endpoints
  • Migrations
• Frontend Development Guide
  • Generating API Client
  • Adding Views & Columns
  • Form Validation

Development

Backend

Navigate to the backend directory:

cd backend

• Run Tests:

  pytest
  

• Linting:

  ruff check .
  

• Type Checking:

  mypy .
  

Frontend

Navigate to the frontend directory:

cd frontend

• Start Dev Server:

  npm run dev
  # or
  refine dev
  

• Build for Production:

  npm run build
  

• Linting:

  eslint .