feat: initialize learning platform project with React, Vite, and baseline application structure

2026-05-10 10:30:30 +02:00
commit 2fb50a19c9
23 changed files with 4304 additions and 0 deletions
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -0,0 +1,66 @@
+import React from 'react'
+import { Routes, Route, Navigate } from 'react-router-dom'
+import { useApp } from './store/AppContext'
+
+// Placeholder components for routing structure
+const Login = () => <div className="p-8"><h1 className="text-4xl text-teal font-bold">Login</h1><p className="mt-4">Please log in.</p></div>
+const Dashboard = () => <div className="p-8"><h1 className="text-4xl text-teal font-bold">Dashboard</h1><p className="mt-4">Welcome to Respellion Leerplatform.</p></div>
+const Admin = () => <div className="p-8"><h1 className="text-4xl text-teal font-bold">Admin</h1><p className="mt-4">Kennisbeheer and Source Upload.</p></div>
+const Testen = () => <div className="p-8"><h1 className="text-4xl text-teal font-bold">Weektest</h1><p className="mt-4">Start your weekly test here.</p></div>
+const Leren = () => <div className="p-8"><h1 className="text-4xl text-teal font-bold">Leren</h1><p className="mt-4">Start your weekly learning session.</p></div>
+const Leaderboard = () => <div className="p-8"><h1 className="text-4xl text-teal font-bold">Leaderboard</h1><p className="mt-4">See who is on top!</p></div>
+
+// Protected Route Wrapper
+const ProtectedRoute = ({ children, requireAdmin }) => {
+  const { state } = useApp()
+  
+  if (state.isLoading) return <div className="p-8">Loading...</div>
+  
+  if (!state.currentUser) {
+    return <Navigate to="/login" replace />
+  }
+
+  if (requireAdmin && state.currentUser.role !== 'admin') {
+    return <Navigate to="/" replace />
+  }
+
+  return (
+    <div className="min-h-screen bg-bg text-fg font-sans flex flex-col">
+      {/* Basic Navigation Bar Placeholder */}
+      <nav className="bg-bg-dark text-paper p-4 shadow-soft flex justify-between items-center">
+        <div className="font-bold text-xl tracking-tight">{`{ r espellion }`}</div>
+        <div className="flex gap-4">
+          <a href="/" className="hover:text-accent-soft">Dashboard</a>
+          <a href="/learn" className="hover:text-accent-soft">Leren</a>
+          <a href="/test" className="hover:text-accent-soft">Testen</a>
+          <a href="/leaderboard" className="hover:text-accent-soft">Leaderboard</a>
+          {state.currentUser.role === 'admin' && (
+            <a href="/admin" className="hover:text-accent-soft">Admin</a>
+          )}
+        </div>
+      </nav>
+      <main className="flex-1 max-w-[var(--max)] w-full mx-auto">
+        {children}
+      </main>
+    </div>
+  )
+}
+
+function App() {
+  const { state } = useApp()
+
+  if (state.isLoading) return <div className="p-8">Loading application state...</div>
+
+  return (
+    <Routes>
+      <Route path="/login" element={<Login />} />
+      <Route path="/" element={<ProtectedRoute><Dashboard /></ProtectedRoute>} />
+      <Route path="/learn" element={<ProtectedRoute><Leren /></ProtectedRoute>} />
+      <Route path="/test" element={<ProtectedRoute><Testen /></ProtectedRoute>} />
+      <Route path="/leaderboard" element={<ProtectedRoute><Leaderboard /></ProtectedRoute>} />
+      <Route path="/admin/*" element={<ProtectedRoute requireAdmin={true}><Admin /></ProtectedRoute>} />
+    </Routes>
+  )
+}
+
+export default App