GenAI Workspace Dashboard

A unified, resilient portal for managing Generative AI tools with an integrated Full-Stack TypeScript architecture (Express + Vite).

📁 Project Structure

root/
├── src/                   # React Frontend Code
│   ├── components/        # UI Components (Sidebar, Header, AppItem, etc.)
│   ├── services/          # API connectivity (api.ts)
│   ├── App.tsx            # Main Application Component
│   ├── main.tsx           # React Entry Point
│   └── types.ts           # Shared TypeScript Definitions
├── server.ts              # Express Backend & Vite Dev Server
├── config.json            # Central Tool Registry (Data Store)
├── package.json           # Dependencies & Scripts
└── vite.config.ts         # Vite Configuration

🔐 Authentication (Mock JWT)

The application implements a Mock JWT flow to demonstrate secure API communication.

How it works:

1. Login: On mount, the frontend calls /api/auth/login.
2. Token: The Express server returns a mock access token (mock-jwt-token-xyz-123).
3. Authorization: The frontend stores this token and attaches it as an Authorization: Bearer <token> header to all subsequent API requests.
4. Verification: The backend middleware (verifyToken in server.ts) validates this token before serving data.

🛠️ Resilience & Offline Mode

The dashboard is built to be "Offline-First":

• Fallback Data: If the backend server is unreachable or authentication fails, the frontend automatically switches to a set of hardcoded fallback tools.
• Visual Feedback: Toasts notify the user when the app is running in "Offline/Cached" mode.
• Timeout Handling: API requests have a built-in timeout to prevent the UI from hanging on slow connections.

🚀 Getting Started

1. Installation

Install the required dependencies:

npm install

2. Development

Start the integrated server (Express + Vite):

npm run dev

The application will be available at http://localhost:3000.

3. Production

Build the frontend and start the production server:

npm run build
npm start

🎨 Configuration

You can manage the tools displayed in the dashboard by editing config.json.

• Icons: Supports Lucide icon names (e.g., "Zap", "Palette").
• Categories: Tools are automatically grouped by the category field in the sidebar.
• Real-time Updates: Changes to config.json are reflected in the UI upon page refresh (no server restart required).