refactor

2026-01-29 01:49:52 -05:00
parent 31c37d9bdd
commit 3e3f37a570
13 changed files with 365 additions and 57 deletions
--- a/backend/package.json
+++ b/backend/package.json
@@ -14,6 +14,7 @@
    "bcryptjs": "^2.4.3",
    "dotenv": "^16.4.5",
    "cors": "^2.8.5",
-    "node-fetch": "^3.3.2"
+    "node-fetch": "^3.3.2",
+    "express-rate-limit": "^7.1.5"
  }
 }
--- a/backend/src/config.js
+++ b/backend/src/config.js
@@ -0,0 +1,60 @@
+/**
+ * Environment configuration and validation
+ */
+
+const requiredEnvVars = [
+  'JWT_SECRET',
+  'DB_HOST',
+  'DB_USER',
+  'DB_PASSWORD',
+  'DB_NAME',
+  'TMDB_API_KEY'
+];
+
+export function validateConfig() {
+  const missing = [];
+  
+  for (const varName of requiredEnvVars) {
+    if (!process.env[varName]) {
+      missing.push(varName);
+    }
+  }
+  
+  if (missing.length > 0) {
+    console.error('❌ Missing required environment variables:');
+    missing.forEach(varName => {
+      console.error(`   - ${varName}`);
+    });
+    console.error('\nPlease set these in your .env file or environment.');
+    process.exit(1);
+  }
+  
+  // Validate JWT_SECRET is strong enough
+  if (process.env.JWT_SECRET.length < 32) {
+    console.error('❌ JWT_SECRET must be at least 32 characters long for security.');
+    process.exit(1);
+  }
+  
+  console.log('✅ Environment configuration validated');
+}
+
+export const config = {
+  jwt: {
+    secret: process.env.JWT_SECRET,
+    expiresIn: '7d'
+  },
+  db: {
+    host: process.env.DB_HOST,
+    user: process.env.DB_USER,
+    password: process.env.DB_PASSWORD,
+    database: process.env.DB_NAME,
+    port: parseInt(process.env.DB_PORT || '3306', 10)
+  },
+  tmdb: {
+    apiKey: process.env.TMDB_API_KEY,
+    baseUrl: 'https://api.themoviedb.org/3'
+  },
+  server: {
+    port: parseInt(process.env.PORT || '3000', 10)
+  }
+};
--- a/backend/src/index.js
+++ b/backend/src/index.js
@@ -4,7 +4,10 @@ import dotenv from 'dotenv';
 import path from 'path';
 import fs from 'fs';
 import { fileURLToPath } from 'url';
+import rateLimit from 'express-rate-limit';
 import { initDB } from './db/index.js';
+import { validateConfig, config } from './config.js';
+import { errorHandler } from './middleware/errorHandler.js';
 import authRoutes from './routes/auth.js';
 import challengeRoutes from './routes/challenges.js';
 import predictionRoutes from './routes/predictions.js';
@@ -14,22 +17,50 @@ import leaderboardRoutes from './routes/leaderboard.js';

 dotenv.config();

+// Validate environment configuration
+validateConfig();
+
 const __filename = fileURLToPath(import.meta.url);
 const __dirname = path.dirname(__filename);

 const app = express();

+// Rate limiting
+const authLimiter = rateLimit({
+  windowMs: 15 * 60 * 1000, // 15 minutes
+  max: 5, // 5 requests per window
+  message: { error: 'Too many authentication attempts, please try again later.' },
+  standardHeaders: true,
+  legacyHeaders: false,
+});
+
+const apiLimiter = rateLimit({
+  windowMs: 15 * 60 * 1000, // 15 minutes
+  max: 100, // 100 requests per window
+  message: { error: 'Too many requests, please try again later.' },
+  standardHeaders: true,
+  legacyHeaders: false,
+});
+
+const tmdbLimiter = rateLimit({
+  windowMs: 60 * 1000, // 1 minute
+  max: 20, // 20 requests per minute
+  message: { error: 'Too many search requests, please slow down.' },
+  standardHeaders: true,
+  legacyHeaders: false,
+});
+
 // Middleware
 app.use(cors());
 app.use(express.json());

 // API Routes
-app.use('/api/auth', authRoutes);
-app.use('/api/challenges', challengeRoutes);
-app.use('/api/predictions', predictionRoutes);
-app.use('/api/friends', friendRoutes);
-app.use('/api/tmdb', tmdbRoutes);
-app.use('/api/leaderboard', leaderboardRoutes);
+app.use('/api/auth', authLimiter, authRoutes);
+app.use('/api/challenges', apiLimiter, challengeRoutes);
+app.use('/api/predictions', apiLimiter, predictionRoutes);
+app.use('/api/friends', apiLimiter, friendRoutes);
+app.use('/api/tmdb', tmdbLimiter, tmdbRoutes);
+app.use('/api/leaderboard', apiLimiter, leaderboardRoutes);

 // Health check
 app.get('/api/health', (req, res) => {
@@ -57,7 +88,10 @@ if (frontendExists) {
  });
 }

-const PORT = process.env.PORT || 4000;
+// Error handling middleware (must be last)
+app.use(errorHandler);
+
+const PORT = config.server.port;

 // Initialize database and start server
 initDB()
--- a/backend/src/middleware/errorHandler.js
+++ b/backend/src/middleware/errorHandler.js
@@ -0,0 +1,58 @@
+/**
+ * Centralized error handling middleware
+ */
+
+export class AppError extends Error {
+  constructor(message, statusCode = 500) {
+    super(message);
+    this.statusCode = statusCode;
+    this.isOperational = true;
+    Error.captureStackTrace(this, this.constructor);
+  }
+}
+
+export function errorHandler(err, req, res, next) {
+  let { statusCode = 500, message } = err;
+  
+  // Log error for debugging
+  if (process.env.NODE_ENV !== 'production') {
+    console.error('Error:', {
+      message: err.message,
+      stack: err.stack,
+      statusCode,
+      path: req.path,
+      method: req.method
+    });
+  } else {
+    console.error('Error:', err.message);
+  }
+  
+  // Handle specific error types
+  if (err.code === 'ER_DUP_ENTRY') {
+    statusCode = 409;
+    message = 'A record with this information already exists';
+  }
+  
+  if (err.name === 'JsonWebTokenError') {
+    statusCode = 401;
+    message = 'Invalid token';
+  }
+  
+  if (err.name === 'TokenExpiredError') {
+    statusCode = 401;
+    message = 'Token expired';
+  }
+  
+  // Send error response
+  res.status(statusCode).json({
+    error: message,
+    ...(process.env.NODE_ENV !== 'production' && { stack: err.stack })
+  });
+}
+
+// Async handler wrapper to catch errors in async routes
+export function asyncHandler(fn) {
+  return (req, res, next) => {
+    Promise.resolve(fn(req, res, next)).catch(next);
+  };
+}
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -10,7 +10,8 @@
  "dependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
-    "react-router-dom": "^6.20.0"
+    "react-router-dom": "^6.20.0",
+    "react-hot-toast": "^2.4.1"
  },
  "devDependencies": {
    "@vitejs/plugin-react": "^4.2.1",
--- a/frontend/src/components/ErrorBoundary.jsx
+++ b/frontend/src/components/ErrorBoundary.jsx
@@ -0,0 +1,62 @@
+import React from 'react';
+
+class ErrorBoundary extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = { hasError: false, error: null };
+  }
+
+  static getDerivedStateFromError(error) {
+    return { hasError: true, error };
+  }
+
+  componentDidCatch(error, errorInfo) {
+    console.error('Error caught by boundary:', error, errorInfo);
+  }
+
+  render() {
+    if (this.state.hasError) {
+      return (
+        <div style={{ 
+          minHeight: '100vh', 
+          display: 'flex', 
+          alignItems: 'center', 
+          justifyContent: 'center',
+          padding: '2rem'
+        }}>
+          <div className="card" style={{ maxWidth: '500px', textAlign: 'center' }}>
+            <h1 style={{ marginBottom: '1rem', color: 'var(--danger)' }}>Oops! Something went wrong</h1>
+            <p style={{ marginBottom: '1.5rem', color: 'var(--text-muted)' }}>
+              We're sorry, but something unexpected happened. Please refresh the page to try again.
+            </p>
+            <button 
+              className="btn btn-primary"
+              onClick={() => window.location.href = '/'}
+            >
+              Go Home
+            </button>
+            {process.env.NODE_ENV === 'development' && this.state.error && (
+              <details style={{ marginTop: '2rem', textAlign: 'left' }}>
+                <summary style={{ cursor: 'pointer', color: 'var(--text-muted)' }}>Error Details</summary>
+                <pre style={{ 
+                  marginTop: '1rem', 
+                  padding: '1rem', 
+                  background: 'var(--bg)', 
+                  borderRadius: '0.5rem',
+                  overflow: 'auto',
+                  fontSize: '0.75rem'
+                }}>
+                  {this.state.error.toString()}
+                </pre>
+              </details>
+            )}
+          </div>
+        </div>
+      );
+    }
+
+    return this.props.children;
+  }
+}
+
+export default ErrorBoundary;
--- a/frontend/src/hooks/useClickOutside.js
+++ b/frontend/src/hooks/useClickOutside.js
@@ -0,0 +1,20 @@
+import { useEffect } from 'react';
+
+export function useClickOutside(ref, handler) {
+  useEffect(() => {
+    const listener = (event) => {
+      if (!ref.current || ref.current.contains(event.target)) {
+        return;
+      }
+      handler(event);
+    };
+
+    document.addEventListener('mousedown', listener);
+    document.addEventListener('touchstart', listener);
+
+    return () => {
+      document.removeEventListener('mousedown', listener);
+      document.removeEventListener('touchstart', listener);
+    };
+  }, [ref, handler]);
+}
--- a/frontend/src/main.jsx
+++ b/frontend/src/main.jsx
@@ -1,6 +1,7 @@
 import React from 'react';
 import ReactDOM from 'react-dom/client';
 import { BrowserRouter, Routes, Route, Navigate, Link } from 'react-router-dom';
+import { Toaster } from 'react-hot-toast';
 import { AuthProvider, useAuth } from './AuthContext';
 import Login from './pages/Login';
 import Register from './pages/Register';
@@ -9,6 +10,7 @@ import ChallengeDetail from './pages/ChallengeDetail';
 import Profile from './pages/Profile';
 import Friends from './pages/Friends';
 import Leaderboard from './pages/Leaderboard';
+import ErrorBoundary from './components/ErrorBoundary';
 import './App.css';

 function ProtectedRoute({ children }) {
@@ -50,21 +52,46 @@ function Header() {

 function App() {
  return (
-    <BrowserRouter>
-      <AuthProvider>
-        <Header />
-        <Routes>
-          <Route path="/login" element={<Login />} />
-          <Route path="/register" element={<Register />} />
-          <Route path="/challenges" element={<ProtectedRoute><ChallengeList /></ProtectedRoute>} />
-          <Route path="/challenges/:id" element={<ProtectedRoute><ChallengeDetail /></ProtectedRoute>} />
-          <Route path="/profile" element={<ProtectedRoute><Profile /></ProtectedRoute>} />
-          <Route path="/friends" element={<ProtectedRoute><Friends /></ProtectedRoute>} />
-          <Route path="/leaderboard" element={<ProtectedRoute><Leaderboard /></ProtectedRoute>} />
-          <Route path="/" element={<Navigate to="/challenges" />} />
-        </Routes>
-      </AuthProvider>
-    </BrowserRouter>
+    <ErrorBoundary>
+      <BrowserRouter>
+        <AuthProvider>
+          <Toaster 
+            position="top-right"
+            toastOptions={{
+              duration: 3000,
+              style: {
+                background: '#1e293b',
+                color: '#f1f5f9',
+                border: '1px solid #334155',
+              },
+              success: {
+                iconTheme: {
+                  primary: '#10b981',
+                  secondary: '#f1f5f9',
+                },
+              },
+              error: {
+                iconTheme: {
+                  primary: '#ef4444',
+                  secondary: '#f1f5f9',
+                },
+              },
+            }}
+          />
+          <Header />
+          <Routes>
+            <Route path="/login" element={<Login />} />
+            <Route path="/register" element={<Register />} />
+            <Route path="/challenges" element={<ProtectedRoute><ChallengeList /></ProtectedRoute>} />
+            <Route path="/challenges/:id" element={<ProtectedRoute><ChallengeDetail /></ProtectedRoute>} />
+            <Route path="/profile" element={<ProtectedRoute><Profile /></ProtectedRoute>} />
+            <Route path="/friends" element={<ProtectedRoute><Friends /></ProtectedRoute>} />
+            <Route path="/leaderboard" element={<ProtectedRoute><Leaderboard /></ProtectedRoute>} />
+            <Route path="/" element={<Navigate to="/challenges" />} />
+          </Routes>
+        </AuthProvider>
+      </BrowserRouter>
+    </ErrorBoundary>
  );
 }

--- a/frontend/src/pages/ChallengeDetail.jsx
+++ b/frontend/src/pages/ChallengeDetail.jsx
@@ -1,7 +1,9 @@
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect, useRef } from 'react';
 import { useParams, Link } from 'react-router-dom';
+import toast from 'react-hot-toast';
 import { useAuth } from '../AuthContext';
 import api from '../api';
+import { useClickOutside } from '../hooks/useClickOutside';

 export default function ChallengeDetail() {
  const { id } = useParams();
@@ -15,6 +17,11 @@ export default function ChallengeDetail() {
  const [showInvite, setShowInvite] = useState(false);
  const [loading, setLoading] = useState(true);
  const [searchTimeout, setSearchTimeout] = useState(null);
+  const [submitting, setSubmitting] = useState(false);
+  const [validating, setValidating] = useState(null);
+  const searchRef = useRef(null);
+
+  useClickOutside(searchRef, () => setSearchResults([]));

  useEffect(() => {
    loadChallenge();
@@ -55,25 +62,33 @@ export default function ChallengeDetail() {
    e.preventDefault();
    if (!newPrediction.trim()) return;

+    setSubmitting(true);
    try {
      await api.createPrediction({
        challenge_id: id,
        content: newPrediction
      });
+      toast.success('Prediction submitted!');
      setNewPrediction('');
      await loadPredictions();
    } catch (err) {
-      alert('Failed to create prediction: ' + err.message);
+      toast.error('Failed to create prediction: ' + err.message);
+    } finally {
+      setSubmitting(false);
    }
  };

  const handleValidate = async (predictionId, status) => {
+    setValidating(predictionId);
    try {
      await api.validatePrediction(predictionId, status);
+      toast.success(status === 'validated' ? 'Prediction validated!' : 'Prediction invalidated');
      await loadPredictions();
      await loadLeaderboard();
    } catch (err) {
-      alert('Failed to validate: ' + err.message);
+      toast.error('Failed to validate: ' + err.message);
+    } finally {
+      setValidating(null);
    }
  };

@@ -106,11 +121,11 @@ export default function ChallengeDetail() {
  const handleInvite = async (userId) => {
    try {
      await api.inviteToChallenge(id, { user_ids: [userId] });
+      toast.success('Invitation sent!');
      setInviteQuery('');
      setSearchResults([]);
-      alert('Invitation sent!');
    } catch (err) {
-      alert('Failed to send invite: ' + err.message);
+      toast.error('Failed to send invite: ' + err.message);
    }
  };

@@ -154,7 +169,7 @@ export default function ChallengeDetail() {

        {/* Invite Section */}
        {showInvite && (
-          <div className="card" style={{ marginBottom: '2rem', position: 'relative' }}>
+          <div className="card" style={{ marginBottom: '2rem', position: 'relative' }} ref={searchRef}>
            <h3 style={{ marginBottom: '1rem' }}>Invite Someone</h3>
            <input
              type="text"
@@ -232,8 +247,8 @@ export default function ChallengeDetail() {
                  onChange={(e) => setNewPrediction(e.target.value)}
                  style={{ minHeight: '80px' }}
                />
-                <button type="submit" className="btn btn-primary" style={{ marginTop: '1rem' }}>
-                  Submit Prediction
+                <button type="submit" className="btn btn-primary" style={{ marginTop: '1rem' }} disabled={submitting}>
+                  {submitting ? 'Submitting...' : 'Submit Prediction'}
                </button>
              </form>
            </div>
@@ -261,14 +276,16 @@ export default function ChallengeDetail() {
                          <button
                            className="btn btn-success btn-sm"
                            onClick={() => handleValidate(pred.id, 'validated')}
+                            disabled={validating === pred.id}
                          >
-                            ✓ Validate
+                            {validating === pred.id ? '...' : '✓ Validate'}
                          </button>
                          <button
                            className="btn btn-danger btn-sm"
                            onClick={() => handleValidate(pred.id, 'invalidated')}
+                            disabled={validating === pred.id}
                          >
-                            ✗ Invalidate
+                            {validating === pred.id ? '...' : '✗ Invalidate'}
                          </button>
                        </>
                      )}
--- a/frontend/src/pages/ChallengeList.jsx
+++ b/frontend/src/pages/ChallengeList.jsx
@@ -1,6 +1,8 @@
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect, useRef } from 'react';
 import { Link } from 'react-router-dom';
+import toast from 'react-hot-toast';
 import api from '../api';
+import { useClickOutside } from '../hooks/useClickOutside';

 export default function ChallengeList() {
  const [challenges, setChallenges] = useState([]);
@@ -10,6 +12,10 @@ export default function ChallengeList() {
  const [loading, setLoading] = useState(true);
  const [creating, setCreating] = useState(false);
  const [searchTimeout, setSearchTimeout] = useState(null);
+  const [respondingTo, setRespondingTo] = useState(null);
+  const searchRef = useRef(null);
+
+  useClickOutside(searchRef, () => setShowResults([]));

  useEffect(() => {
    loadChallenges();
@@ -31,11 +37,15 @@ export default function ChallengeList() {
  };

  const handleRespondToInvite = async (challengeId, status) => {
+    setRespondingTo(challengeId);
    try {
      await api.respondToChallenge(challengeId, status);
+      toast.success(status === 'accepted' ? 'Challenge accepted!' : 'Challenge declined');
      await loadChallenges();
    } catch (err) {
-      alert('Failed to respond: ' + err.message);
+      toast.error('Failed to respond: ' + err.message);
+    } finally {
+      setRespondingTo(null);
    }
  };

@@ -72,18 +82,19 @@ export default function ChallengeList() {
        ? `https://image.tmdb.org/t/p/w500${show.poster_path}` 
        : null;

-      const result = await api.createChallenge({
+      await api.createChallenge({
        title: show.title,
        cover_image_url: coverImage,
        tmdb_id: show.id,
        media_type: show.media_type
      });

+      toast.success('Challenge created!');
      setSearchQuery('');
      setShowResults([]);
      await loadChallenges();
    } catch (err) {
-      alert('Failed to create challenge: ' + err.message);
+      toast.error('Failed to create challenge: ' + err.message);
    } finally {
      setCreating(false);
    }
@@ -124,14 +135,16 @@ export default function ChallengeList() {
                    <button
                      className="btn btn-success btn-sm"
                      onClick={() => handleRespondToInvite(challenge.id, 'accepted')}
+                      disabled={respondingTo === challenge.id}
                    >
-                      Accept
+                      {respondingTo === challenge.id ? '...' : 'Accept'}
                    </button>
                    <button
                      className="btn btn-danger btn-sm"
                      onClick={() => handleRespondToInvite(challenge.id, 'rejected')}
+                      disabled={respondingTo === challenge.id}
                    >
-                      Decline
+                      {respondingTo === challenge.id ? '...' : 'Decline'}
                    </button>
                  </div>
                </div>
@@ -141,7 +154,7 @@ export default function ChallengeList() {
        )}

        {/* Search/Create */}
-        <div style={{ marginBottom: '2rem', position: 'relative' }}>
+        <div style={{ marginBottom: '2rem', position: 'relative' }} ref={searchRef}>
          <input
            type="text"
            className="input"
--- a/frontend/src/pages/Friends.jsx
+++ b/frontend/src/pages/Friends.jsx
@@ -1,5 +1,7 @@
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect, useRef } from 'react';
+import toast from 'react-hot-toast';
 import api from '../api';
+import { useClickOutside } from '../hooks/useClickOutside';

 export default function Friends() {
  const [friends, setFriends] = useState([]);
@@ -9,6 +11,11 @@ export default function Friends() {
  const [searchResults, setSearchResults] = useState([]);
  const [loading, setLoading] = useState(true);
  const [searchTimeout, setSearchTimeout] = useState(null);
+  const [responding, setResponding] = useState(null);
+  const [sending, setSending] = useState(null);
+  const searchRef = useRef(null);
+
+  useClickOutside(searchRef, () => setSearchResults([]));

  useEffect(() => {
    loadData();
@@ -57,22 +64,29 @@ export default function Friends() {
  };

  const handleSendRequest = async (userId) => {
+    setSending(userId);
    try {
      await api.sendFriendRequest(userId);
      setSearchQuery('');
      setSearchResults([]);
-      alert('Friend request sent!');
+      toast.success('Friend request sent!');
    } catch (err) {
-      alert('Failed to send request: ' + err.message);
+      toast.error('Failed to send request: ' + err.message);
+    } finally {
+      setSending(null);
    }
  };

  const handleRespond = async (requestId, status) => {
+    setResponding(requestId);
    try {
      await api.respondToFriendRequest(requestId, status);
+      toast.success(status === 'accepted' ? 'Friend request accepted!' : 'Friend request declined');
      await loadData();
    } catch (err) {
-      alert('Failed to respond: ' + err.message);
+      toast.error('Failed to respond: ' + err.message);
+    } finally {
+      setResponding(null);
    }
  };

@@ -86,7 +100,7 @@ export default function Friends() {
        <h1 style={{ marginBottom: '2rem' }}>Friends</h1>

        {/* Search */}
-        <div className="card" style={{ marginBottom: '2rem', position: 'relative' }}>
+        <div className="card" style={{ marginBottom: '2rem', position: 'relative' }} ref={searchRef}>
          <h3 style={{ marginBottom: '1rem' }}>Add Friends</h3>
          <input
            type="text"
@@ -127,8 +141,9 @@ export default function Friends() {
                  <button
                    className="btn btn-primary btn-sm"
                    onClick={() => handleSendRequest(user.id)}
+                    disabled={sending === user.id}
                  >
-                    Add Friend
+                    {sending === user.id ? 'Sending...' : 'Add Friend'}
                  </button>
                </div>
              ))}
@@ -151,14 +166,16 @@ export default function Friends() {
                    <button
                      className="btn btn-success btn-sm"
                      onClick={() => handleRespond(req.id, 'accepted')}
+                      disabled={responding === req.id}
                    >
-                      Accept
+                      {responding === req.id ? '...' : 'Accept'}
                    </button>
                    <button
                      className="btn btn-danger btn-sm"
                      onClick={() => handleRespond(req.id, 'rejected')}
+                      disabled={responding === req.id}
                    >
-                      Reject
+                      {responding === req.id ? '...' : 'Reject'}
                    </button>
                  </div>
                </div>
--- a/frontend/src/pages/Login.jsx
+++ b/frontend/src/pages/Login.jsx
@@ -1,25 +1,25 @@
 import React, { useState } from 'react';
 import { useNavigate, Link } from 'react-router-dom';
+import toast from 'react-hot-toast';
 import { useAuth } from '../AuthContext';

 export default function Login() {
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');
-  const [error, setError] = useState('');
  const [loading, setLoading] = useState(false);
  const { login } = useAuth();
  const navigate = useNavigate();

  const handleSubmit = async (e) => {
    e.preventDefault();
-    setError('');
    setLoading(true);

    try {
      await login(email, password);
+      toast.success('Welcome back!');
      navigate('/challenges');
    } catch (err) {
-      setError(err.message);
+      toast.error(err.message || 'Login failed');
    } finally {
      setLoading(false);
    }
@@ -50,7 +50,6 @@ export default function Login() {
              required
            />
          </div>
-          {error && <div className="error">{error}</div>}
          <button type="submit" className="btn btn-primary" style={{ width: '100%', marginTop: '1rem' }} disabled={loading}>
            {loading ? 'Logging in...' : 'Login'}
          </button>
--- a/frontend/src/pages/Register.jsx
+++ b/frontend/src/pages/Register.jsx
@@ -1,26 +1,26 @@
 import React, { useState } from 'react';
 import { useNavigate, Link } from 'react-router-dom';
+import toast from 'react-hot-toast';
 import { useAuth } from '../AuthContext';

 export default function Register() {
  const [email, setEmail] = useState('');
  const [username, setUsername] = useState('');
  const [password, setPassword] = useState('');
-  const [error, setError] = useState('');
  const [loading, setLoading] = useState(false);
  const { register } = useAuth();
  const navigate = useNavigate();

  const handleSubmit = async (e) => {
    e.preventDefault();
-    setError('');
    setLoading(true);

    try {
      await register(email, username, password);
+      toast.success('Account created successfully!');
      navigate('/challenges');
    } catch (err) {
-      setError(err.message);
+      toast.error(err.message || 'Registration failed');
    } finally {
      setLoading(false);
    }
@@ -62,7 +62,6 @@ export default function Register() {
              minLength={6}
            />
          </div>
-          {error && <div className="error">{error}</div>}
          <button type="submit" className="btn btn-primary" style={{ width: '100%', marginTop: '1rem' }} disabled={loading}>
            {loading ? 'Creating account...' : 'Register'}
          </button>