Feature/user registration

client/eslint.config.js

@@ -5,25 +5,26 @@ import reactRefresh from 'eslint-plugin-react-refresh'
 import { defineConfig, globalIgnores } from 'eslint/config'
 
 export default defineConfig([
-  globalIgnores(['dist']),
-  {
-    files: ['**/*.{js,jsx}'],
-    extends: [
-      js.configs.recommended,
-      reactHooks.configs.flat.recommended,
-      reactRefresh.configs.vite,
-    ],
-    languageOptions: {
-      ecmaVersion: 2020,
-      globals: globals.browser,
-      parserOptions: {
-        ecmaVersion: 'latest',
-        ecmaFeatures: { jsx: true },
-        sourceType: 'module',
-      },
-    },
-    rules: {
-      'no-unused-vars': ['error', { varsIgnorePattern: '^[A-Z_]' }],
-    },
-  },
-])
+globalIgnores(['dist']),
+{
+files: ['**/*.{js,jsx}'],
+extends: [
+js.configs.recommended,
+reactHooks.configs.flat.recommended,
+reactRefresh.configs.vite,
+],
+languageOptions: {
+ecmaVersion: 2020,
+globals: globals.browser,
+parserOptions: {
+ecmaVersion: 'latest',
+ecmaFeatures: { jsx: true },
+sourceType: 'module',
+},
+},
+rules: {
+'no-unused-vars': ['warn', { varsIgnorePattern: '^[A-Z_]|set[A-Z]' }],
+'react-refresh/only-export-components': ['warn', { allowConstantExport: true }],
+},
+},
+])

client/package.json

@@ -11,7 +11,8 @@
   },
   "dependencies": {
     "react": "^19.2.0",
-    "react-dom": "^19.2.0"
+    "react-dom": "^19.2.0",
+    "react-router-dom": "^7.13.1"
   },
   "devDependencies": {
     "@eslint/js": "^9.39.1",

client/src/App.jsx

@@ -1,35 +1,51 @@
-import { useState } from 'react'
-import reactLogo from './assets/react.svg'
-import viteLogo from '/vite.svg'
-import './App.css'
+import Header from './components/layout/Header';
+import Footer from './components/layout/Footer';
+import Home from './pages/Home';
+import Login from './pages/Login';
+import Register from './pages/Register';
+import Dashboard from './pages/Dashboard';
+import { Routes, Route } from 'react-router-dom';
 
 function App() {
-  const [count, setCount] = useState(0)
-
   return (
-    <>
-      <div>
-        <a href="https://vite.dev" target="_blank">
-          <img src={viteLogo} className="logo" alt="Vite logo" />
-        </a>
-        <a href="https://react.dev" target="_blank">
-          <img src={reactLogo} className="logo react" alt="React logo" />
-        </a>
-      </div>
-      <h1>Vite + React</h1>
-      <div className="card">
-        <button onClick={() => setCount((count) => count + 1)}>
-          count is {count}
-        </button>
-        <p>
-          Edit <code>src/App.jsx</code> and save to test HMR
-        </p>
-      </div>
-      <p className="read-the-docs">
-        Click on the Vite and React logos to learn more
-      </p>
-    </>
-  )
+    <BrowserRouter>
+      <AuthProvider>  {/* Wrap everything */}
+        <div style={appStyle}>
+          <Header />
+          <main style={mainStyle}>
+            <Routes>
+              {/* Your routes */}
+              <Route path="/" element={<Home />} />
+              <Route path="/login" element={<Login />} />
+              <Route path="/register" element={<Register />} />
+              <Route path="/dashboard" element={<Dashboard />} />
+              <Route path="*" element={<NotFound />} />
+
+            </Routes>
+          </main>
+          <Footer />
+        </div>
+      </AuthProvider>  {/* Close wrapper */}
+    </BrowserRouter>
+  );
 }
 
-export default App
+// Simple 404 Component
+const NotFound = () => (
+  <div style={{ textAlign: 'center', padding: '4rem' }}>
+    <h1>404 - Page Not Found</h1>
+    <p>The page you're looking for doesn't exist.</p>
+  </div>
+);
+
+const appStyle = {
+  display: 'flex',
+  flexDirection: 'column',
+  minHeight: '100vh',
+};
+
+const mainStyle = {
+  flex: 1,
+};
+
+export default App;

client/src/components/common/ConnectionTest.jsx

@@ -0,0 +1,109 @@
+import { useState } from 'react';
+
+const ConnectionTest = () => {
+  const [message, setMessage] = useState('');
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState('');
+
+  const testConnection = async () => {
+    setLoading(true);
+    setError('');
+    setMessage('');
+
+    try {
+      // Using relative URL because of Vite proxy
+      const response = await fetch('/api/health');
+
+      if (!response.ok) {
+        throw new Error(`HTTP error! status: ${response.status}`);
+      }
+
+      const data = await response.json();
+      setMessage(data.message);
+
+    } catch (err) {
+      setError('Failed to connect to server: ' + err.message);
+      console.error('Connection test error:', err);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <div style={containerStyle}>
+      <h3>Backend Connection Test</h3>
+
+      <button 
+        onClick={testConnection} 
+        disabled={loading}
+        style={buttonStyle}
+      >
+        {loading ? 'Testing...' : 'Test Connection'}
+      </button>
+
+      {message && (
+        <div style={successStyle}>
+          ✅ Success: {message}
+        </div>
+      )}
+
+      {error && (
+        <div style={errorStyle}>
+          ❌ Error: {error}
+        </div>
+      )}
+
+      <div style={infoStyle}>
+        <p><strong>Backend URL:</strong> http://localhost:5000</p>
+        <p><strong>Frontend URL:</strong> http://localhost:5173</p>
+        <p><strong>Using:</strong> Vite Proxy</p>
+      </div>
+    </div>
+  );
+};
+
+const containerStyle = {
+  padding: '2rem',
+  backgroundColor: '#f8f9fa',
+  borderRadius: '8px',
+  margin: '2rem 0',
+};
+
+const buttonStyle = {
+  backgroundColor: '#007bff',
+  color: 'white',
+  padding: '0.75rem 1.5rem',
+  border: 'none',
+  borderRadius: '5px',
+  fontSize: '1rem',
+  cursor: 'pointer',
+  marginTop: '1rem',
+};
+
+const successStyle = {
+  marginTop: '1rem',
+  padding: '1rem',
+  backgroundColor: '#d4edda',
+  color: '#155724',
+  borderRadius: '5px',
+  border: '1px solid #c3e6cb',
+};
+
+const errorStyle = {
+  marginTop: '1rem',
+  padding: '1rem',
+  backgroundColor: '#f8d7da',
+  color: '#721c24',
+  borderRadius: '5px',
+  border: '1px solid #f5c6cb',
+};
+
+const infoStyle = {
+  marginTop: '1.5rem',
+  padding: '1rem',
+  backgroundColor: 'white',
+  borderRadius: '5px',
+  fontSize: '0.9rem',
+};
+
+export default ConnectionTest;

client/src/components/layout/Footer.jsx

@@ -0,0 +1,26 @@
+const Footer = () => {
+  return (
+    <footer style={footerStyle}>
+      <div style={containerStyle}>
+        <p>&copy; 2024 {/* YOUR PLATFORM NAME */}. All rights reserved.</p>
+        <p>Built by {/* YOUR NAME */}</p>
+      </div>
+    </footer>
+  );
+};
+
+const footerStyle = {
+  backgroundColor: '#333',
+  color: 'white',
+  padding: '2rem 0',
+  marginTop: 'auto',
+  textAlign: 'center',
+};
+
+const containerStyle = {
+  maxWidth: '1200px',
+  margin: '0 auto',
+  padding: '0 2rem',
+};
+
+export default Footer;