[go: up one dir, main page]
Scribd
Upload
29 views2 pages

Operator Portal Tech Stack

The document outlines the technical stack and implementation plan for the Operator Portal, utilizing Flask for the backend and React with Inertia.js for the frontend. Key technologies include Flask, React, TypeScript, Tailwind CSS, and various libraries for forms, validation, and data management. The implementation plan details the setup for both backend and frontend, including file structure and initialization commands for necessary components and libraries.

Uploaded by

Jeff Peterson
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
29 views2 pages

Operator Portal Tech Stack

The document outlines the technical stack and implementation plan for the Operator Portal, utilizing Flask for the backend and React with Inertia.js for the frontend. Key technologies include Flask, React, TypeScript, Tailwind CSS, and various libraries for forms, validation, and data management. The implementation plan details the setup for both backend and frontend, including file structure and initialization commands for necessary components and libraries.

Uploaded by

Jeff Peterson
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 2

# Operator Portal – Technical Stack & Implementation Plan

## 1. Tech Stack Overview

### Backend
- **Flask**: Primary web framework handling routes, controllers, and server-side
logic.
- **flask-inertia**: Middleware to integrate Flask with Inertia.js.
- **Sentry SDK for Flask**: For error tracking and performance monitoring.

### Frontend
- **React**: Component-based UI library.
- **Inertia.js**: Acts as a bridge between Flask and React, enabling single-page
app behavior without a dedicated API.
- **shadcn/ui**: UI component library built on Radix UI primitives and styled with
Tailwind CSS.
- **Vite**: Fast build tool for frontend assets and development server.
- **TypeScript**: Static typing for safer React development.

### Styling & Utilities


- **Tailwind CSS**: Utility-first CSS framework used throughout the UI.
- **clsx, tailwind-merge, class-variance-authority**: Utilities for dynamic class
merging and management.
- **lucide-react**: Icon library for shadcn/ui.

### Forms & Validation


- **react-hook-form**: Form state management.
- **@hookform/resolvers**: Integration between react-hook-form and validation
schemas.
- **zod**: Schema-based form validation.

### Data & Tables


- **@tanstack/react-table**: Feature-rich table library.
- **@table-library/react-table-library**: Optional advanced table utilities (if
needed).
- **jspdf + jspdf-autotable**: PDF export functionality.

---

## 2. Project & File Structure

See [`file-structure.md`](/specs/file-structure.md) for the detailed layout.

**High-level structure:**
```
operator-portal/
├── backend/
│ ├── app.py
│ ├── routes/
│ ├── templates/
│ │ └── app.html # Inertia root
│ └── static/ # Flask serves Vite build here
├── frontend/
│ ├── src/
│ │ ├── pages/ # Inertia pages
│ │ ├── components/ # Reusable UI components
│ │ ├── main.tsx # Vite entry
│ │ └── index.css
│ ├── vite.config.ts
│ └── tsconfig.json
├── public/ # Public assets
├── package.json
└── requirements.txt
```

---

## 3. Implementation Plan

### Backend (Flask)


- Set up Flask app with `flask-inertia`.
- Use `app.html` in the `templates/` folder as the Inertia root.
- Serve the compiled Vite assets via Flask in production.
- Configure error tracking with `sentry-sdk` and `FlaskIntegration`.

### Frontend (React + Inertia.js)


- Initialize a Vite project with TypeScript and React.
- Configure `vite.config.ts` with aliases and proxy for Flask API routes.
- Use `createInertiaApp()` to mount Inertia pages in `main.tsx`.

```tsx
createInertiaApp({
resolve: name => import.meta.glob('./pages/**/*.tsx', { eager: true
})[\`./pages/\${name}.tsx\`],
setup({ el, App, props }) {
createRoot(el).render(<App {...props} />)
},
})
```

### UI (shadcn/ui)
- Initialize the library:
```bash
npx shadcn-ui@latest init
```
- Add required components:
```bash
npx shadcn-ui@latest add button card form input table dialog select
```

### Tables
- Use `@tanstack/react-table` for core logic.
- Wrap table UI using shadcn's `Table` components.

You might also like