---
title: "React + Vite + TypeScript Frontend"
aliases: [react-vite, frontend-stack]
tags: [react, vite, typescript, frontend, tailwind, shadcn]
sources: [01 Projects/gmal-scope-builder, 01 Projects/modcomms, 01 Projects/semblance, 01 Projects/video-accessibility, 01 Projects/lusa-back-planner, 01 Projects/build-a-squad, 01 Projects/baic_dashboard]
created: 2026-04-15
updated: 2026-04-15
---

# React + Vite + TypeScript Frontend

The standard Oliver frontend stack. React (18 or 19) + Vite + TypeScript, commonly paired with Tailwind CSS and shadcn/ui.

## Key Takeaways
- React 18 or 19 + Vite is the default for all new SPAs
- Tailwind CSS (CDN for simple tools, npm for complex apps) + shadcn/ui for component-heavy UIs
- `axios` for API calls; `react-router` for routing
- For PDF: `pdfjs-dist` (parse) + `jsPDF` + `html2canvas` (export)
- `shadcn/ui` (Radix UI + Tailwind) used in premium UI tools (Semblance, LUSA Back Planner)
- Recharts for data visualization (BAIC Dashboard)

## When to Use
Any new Oliver UI that needs interactivity beyond a simple HTML page.

## Key Details
- **Port conventions:** 3000 (default), 3010 (GMAL), 5137 (Semblance), 5173 (Vite default)
- **State management:** Zustand for auth (Sandbox NotebookLM) or local state
- **API proxy:** Vite proxy to backend — increase timeout for AI calls (5 min)
- **Build:** `npm run build` → `dist/` folder served by nginx or Node
- **MSAL v5:** use `clearCache()` for logout (not `logout()` — breaking change in v5)

## Styling Variants
| Tool | Styling |
|------|---------|
| Semblance | Tailwind + shadcn/ui |
| LUSA Back Planner | Tailwind + shadcn/ui |
| GMAL Scope Builder | React + Vite + Axios |
| Mod Comms | React 18 + Vite |
| Video Accessibility | React 18 + Vite |
| Build A Squad | React 19 + Vite |
| BAIC Dashboard | React + Vite + Recharts |

## Projects Using This Pattern
- [[01 Projects/gmal-scope-builder/GMAL Scope Builder|GMAL Scope Builder]] — React 18 + TypeScript + Vite + React Router + Axios
- [[01 Projects/modcomms/Mod Comms|Mod Comms]] — React 18 + Vite + TypeScript
- [[01 Projects/semblance/Semblance|Semblance]] — React + TypeScript + Vite + Tailwind + shadcn/ui
- [[01 Projects/video-accessibility/Video Accessibility Platform|Video Accessibility]] — React 18 + Vite + TypeScript
- [[01 Projects/lusa-back-planner/LUSA Back Planner|LUSA Back Planner]] — React 19 + TypeScript + Vite + Tailwind + shadcn/ui + pdfjs + jsPDF
- [[01 Projects/build-a-squad/Build A Squad|Build A Squad]] — React 19 + TypeScript + Vite + Gemini
- [[01 Projects/baic_dashboard/BAIC Dashboard|BAIC Dashboard]] — React + Vite + Recharts + PapaParse
- [[01 Projects/sandbox-notebookllamalm-nextjs/Sandbox NotebookLM|Sandbox NotebookLM]] — React 19 (inside Next.js 15 App Router)

## Gotchas & Lessons
- Vite proxy timeout defaults are too low for AI requests — set `proxy: { timeout: 300000 }` in vite.config
- MSAL v5 breaking change: `clearCache()` not `logout()` for sign-out (GMAL fix 2026-03-30)
- Send **ID token** (not Graph access token) to backend for Azure AD validation (GMAL fix 2026-03-30)
- `shadcn/ui` components are copied into `src/components/ui/` — they're not an npm import at runtime
- PapaParse for CSV export is lightweight and works browser-side

## Related
- [[wiki/tech-patterns/fastapi-python-docker|fastapi-python-docker]] — backend counterpart
- [[wiki/tech-patterns/nextjs-fastapi-fullstack|nextjs-fastapi-fullstack]] — Next.js alternative
- [[wiki/tech-patterns/azure-ad-msal-auth|azure-ad-msal-auth]] — auth integration