Files
noteflow/client/src/App.tsx
T
Claude 2315933868 React: Application complète en React + TypeScript
Architecture:
- Types TypeScript complets pour toutes les entités
- Service API avec axios et intercepteurs JWT
- AuthContext pour gestion authentification
- Router avec routes protégées (login, dashboard)

Composants:
- Login: page de connexion avec formulaire
- Dashboard: page principale avec 3 colonnes (notes, todos, rss)
- Affichage conditionnel articles vs résumés RSS
- Gestion todos en temps réel
- Design moderne et responsive

Configuration:
- Vite avec proxy API vers backend (:3000)
- Build vers /public-react
- Configuration TypeScript stricte
- CSS moderne avec variables et responsive

Features:
- Authentication complète
- Notes affichées en grille
- Todos sidebar avec CRUD
- RSS sidebar avec articles ou résumés
- Protection des routes
- UX fluide et moderne
2025-11-11 17:10:22 +00:00

63 lines
1.3 KiB
TypeScript

import { BrowserRouter, Routes, Route, Navigate } from 'react-router-dom';
import { AuthProvider, useAuth } from './contexts/AuthContext';
import Login from './pages/Login';
import Dashboard from './pages/Dashboard';
// Protected Route Component
function ProtectedRoute({ children }: { children: React.ReactNode }) {
const { isAuthenticated } = useAuth();
if (!isAuthenticated) {
return <Navigate to="/login" replace />;
}
return <>{children}</>;
}
// Public Route Component (redirect if already logged in)
function PublicRoute({ children }: { children: React.ReactNode }) {
const { isAuthenticated } = useAuth();
if (isAuthenticated) {
return <Navigate to="/" replace />;
}
return <>{children}</>;
}
function AppRoutes() {
return (
<Routes>
<Route
path="/login"
element={
<PublicRoute>
<Login />
</PublicRoute>
}
/>
<Route
path="/"
element={
<ProtectedRoute>
<Dashboard />
</ProtectedRoute>
}
/>
<Route path="*" element={<Navigate to="/" replace />} />
</Routes>
);
}
function App() {
return (
<BrowserRouter>
<AuthProvider>
<AppRoutes />
</AuthProvider>
</BrowserRouter>
);
}
export default App;