alvaro/normogen
1
0
Fork 0
Code Issues 2 Pull requests Projects Releases Packages Wiki Activity Actions

feat(web): Phase 3a — migrate CRA to Vite + make the app runnable

Browse source 
The frontend was a Create React App scaffold (deprecated) where App.tsx was
still the stock 'Learn React' boilerplate — the implemented login/register pages
and stores were never mounted (no router). This swaps to Vite/TS5, fixes the
broken API client, wires a real router + dashboard, and lands on a runnable app.

Tooling swap (CRA -> Vite):
* Dropped react-scripts, web-vitals, @types/jest; added vite 6 + @vitejs/plugin-react
  + vitest 3 + jsdom; bumped typescript 4.9 -> 5.6, @types/node 16 -> 22.
* New vite.config.ts (with dev-server /api proxy -> backend, no CORS in dev),
  tsconfig.json (target es2022, moduleResolution bundler, vite/client types),
  tsconfig.node.json, vite-env.d.ts, root index.html.
* .env / .env.example (VITE_API_URL + VITE_API_TARGET). Renamed index.tsx ->
  main.tsx (theme provider + CssBaseline). Deleted all CRA boilerplate
  (App.css, logo.svg, App.test.tsx, reportWebVitals.ts, react-app-env.d.ts,
  CRA index.html/logos/readme) + the orphaned empty web/src/ and mobile/ trees.
* node_modules 479MB -> 265MB; lockfile 695KB -> 198KB.

API client correctness (services/api.ts):
* Env var process.env.REACT_APP_* -> import.meta.env.VITE_*; dropped the
  hardcoded http://solaria:8001/api (now /api via the dev proxy).
* Fixed contract mismatches: getCurrentUser /auth/me -> /users/me;
  updateMedication PUT -> POST /:id; deleteMedication DELETE -> POST /:id/delete.
* Added refreshToken() (/auth/refresh) and server-side logout() (/auth/logout).
* Removed the /lab-results block (no backend route).
* 401 interceptor now attempts ONE silent refresh (deduped) before bouncing to
  /login, instead of hard-redirecting on every 401.
* CreateMedicationRequest type now matches the backend (required route +
  profile_id fields).

Router + dashboard:
* Real App.tsx with BrowserRouter: /login, /register (public), / (protected
  Dashboard), catch-all -> /.
* New Dashboard.tsx: MUI AppBar + welcome card, loads the current user on mount,
  logout button. The shell feature UIs get built into next.
* LoginPage/RegisterPage navigate to / (was /dashboard); store logout is now
  async; AuthTokens type includes refresh_token.
* Minimal MUI theme.ts.

Verified: npm run build clean (TS5 strict + Vite), dev server serves the app +
proxies /api to the backend, vitest runs. Solaria round-trip confirmed all
corrected endpoints (/users/me 200, /auth/refresh 200, /auth/logout 204,
medication create 200).
This commit is contained in:
goose 2026-06-28 00:47:06 -03:00
parent 8bc0391100
commit cd5a62c983
28 changed files with 2104 additions and 15710 deletions
Download patch file Download diff file Expand all files Collapse all files

44
web/normogen-web/src/App.tsx
View file

@ -1,25 +1,31 @@
import React from 'react';
import logo from './logo.svg';
import './App.css';
import { BrowserRouter, Routes, Route, Navigate } from 'react-router-dom';
import { LoginPage } from './pages/LoginPage';
import { RegisterPage } from './pages/RegisterPage';
import { Dashboard } from './pages/Dashboard';
import { ProtectedRoute } from './components/common/ProtectedRoute';
function App() {
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<p>
Edit <code>src/App.tsx</code> and save to reload.
</p>
<a
className="App-link"
href="https://reactjs.org"
target="_blank"
rel="noopener noreferrer"
>
Learn React
</a>
</header>
</div>
<BrowserRouter>
<Routes>
{/* Public routes */}
<Route path="/login" element={<LoginPage />} />
<Route path="/register" element={<RegisterPage />} />
{/* Protected routes */}
<Route
path="/"
element={
<ProtectedRoute>
<Dashboard />
</ProtectedRoute>
}
/>
{/* Catch-all -> redirect home */}
<Route path="*" element={<Navigate to="/" replace />} />
</Routes>
</BrowserRouter>
);
}