h4mid2019/flask-react-frontend repository overview

⁠Frontend Overview

React file manager interface that talks to the Flask backend.

⁠What it does

Web interface for managing files and folders. Users can upload files, create folders, rename items, and navigate through their file system.

⁠Tech stack

• React 18 - UI framework
• TypeScript - Type safety
• Vite - Fast development and builds
• Tailwind CSS - Styling
• Preact Signals - State management (lightweight, no re-renders)

⁠Key files

apps/frontend/src/
├── components/
│   ├── FileExplorer.tsx  # Main file browser
│   └── Layout.tsx        # App layout wrapper
├── context/
│   ├── ItemsContext.tsx  # Global state
│   └── itemsReducer.ts   # State updates
├── pages/
│   └── HomePage.tsx      # Main page
├── services/
│   └── api.ts           # Backend API calls
└── types/
    └── index.ts         # TypeScript definitions

⁠State management

Uses Preact Signals instead of React state. Benefits:

• No unnecessary re-renders
• Simple to use
• Lightweight
• Direct state updates

// Global signals for file data
const items = signal([]);
const currentPath = signal('/');
const loading = signal(false);

⁠Key components

FileExplorer - Main component that shows:

• Current folder contents
• File/folder grid view
• Upload area
• Navigation breadcrumbs
• Context menu for actions

Layout - Wraps the app with:

• Authentication check
• Loading states
• Error handling
• Navigation

⁠API integration

All backend calls go through services/api.ts:

// Get folder contents
const getItems = (parentId?: string) => 
  fetch('/api/filesystem?parent_id=' + parentId)

// Upload file
const uploadFile = (file: File, parentId?: string) => 
  fetch('/api/filesystem/upload', { method: 'POST', ... })

⁠Authentication

Uses Auth0 for login. Set VITE_TEST_MODE=true to skip auth during development.

⁠Environment setup

Create apps/frontend/.env:

VITE_API_URL=http://localhost:5000/api
VITE_TEST_MODE=false
VITE_AUTH0_DOMAIN=your-tenant.auth0.com
VITE_AUTH0_CLIENT_ID=your-client-id
VITE_AUTH0_AUDIENCE=your-api-identifier

⁠Development

Start dev server:

cd apps/frontend
npm run dev

Build for production:

cd apps/frontend
npm run build

Type checking:

cd apps/frontend
npm run type-check

⁠Styling

Uses Tailwind CSS utility classes. No custom CSS files needed.

Examples:

• bg-blue-500 - Blue background
• text-white - White text
• p-4 - Padding
• rounded-lg - Rounded corners

⁠Production

Builds to static files in dist/ folder. Nginx serves the files and proxies API calls to the backend.

⁠Common issues

API calls fail:

• Check VITE_API_URL points to backend
• Verify backend is running
• Check CORS settings

Auth not working:

• Set VITE_TEST_MODE=true for development
• Check Auth0 domain and client ID
• Verify redirect URLs in Auth0 dashboard

Build fails:

• Run npm run type-check first
• Fix TypeScript errors
• Check for missing dependencies