mern-template-tool 1.0.0

package/templates/client/src/context/AuthContext.jsx

@@ -0,0 +1,109 @@
+import React, { createContext, useContext, useState, useEffect } from 'react';
+import { api } from '../services/api';
+
+const AuthContext = createContext();
+
+export const AuthProvider = ({ children }) => {
+  const [user, setUser] = useState(null);
+  const [token, setToken] = useState(() => localStorage.getItem('token') || null);
+  const [loading, setLoading] = useState(true);
+
+  // Check auth state on mount or token change
+  useEffect(() => {
+    const checkAuthentication = async () => {
+      const storedToken = localStorage.getItem('token');
+      if (!storedToken) {
+        setUser(null);
+        setLoading(false);
+        return;
+      }
+
+      try {
+        const response = await api.getMe();
+        if (response.success && response.user) {
+          setUser(response.user);
+        } else {
+          logout();
+        }
+      } catch (err) {
+        console.error('Failed to verify token:', err);
+        logout();
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    checkAuthentication();
+  }, []);
+
+  // Login handler
+  const login = async (email, password) => {
+    const response = await api.login({ email, password });
+    if (response.success && response.token) {
+      localStorage.setItem('token', response.token);
+      setToken(response.token);
+      setUser(response.user);
+      return response;
+    }
+    throw new Error(response.message || 'Login failed');
+  };
+
+  // Register handler
+  const register = async (name, email, password, role = 'student') => {
+    const response = await api.register({ name, email, password, role });
+    if (response.success && response.token) {
+      localStorage.setItem('token', response.token);
+      setToken(response.token);
+      setUser(response.user);
+      return response;
+    }
+    throw new Error(response.message || 'Registration failed');
+  };
+
+  // Logout handler
+  const logout = () => {
+    localStorage.removeItem('token');
+    setToken(null);
+    setUser(null);
+  };
+
+  // Refresh user state
+  const refreshUser = async () => {
+    try {
+      const response = await api.getMe();
+      if (response.success) {
+        setUser(response.user);
+      }
+    } catch (err) {
+      console.error('Error refreshing user profile:', err);
+    }
+  };
+
+  return (
+    <AuthContext.Provider
+      value={{
+        user,
+        token,
+        isAuthenticated: !!user,
+        loading,
+        login,
+        register,
+        logout,
+        refreshUser,
+      }}
+    >
+      {children}
+    </AuthContext.Provider>
+  );
+};
+
+// Custom hook to use AuthContext
+export const useAuth = () => {
+  const context = useContext(AuthContext);
+  if (!context) {
+    throw new Error('useAuth must be used within an AuthProvider');
+  }
+  return context;
+};
+
+export default AuthContext;

package/templates/client/src/index.css

@@ -0,0 +1,244 @@
+/* Base CSS Reset and Variables */
+:root {
+  --primary: #6366f1;
+  --primary-hover: #4f46e5;
+  --primary-light: #eef2ff;
+  --bg-color: #0f172a;
+  --card-bg: #1e293b;
+  --card-border: #334155;
+  --text-primary: #f8fafc;
+  --text-secondary: #94a3b8;
+  --danger: #ef4444;
+  --success: #10b981;
+  --warning: #f59e0b;
+  --radius: 8px;
+}
+
+* {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
+}
+
+body {
+  background-color: var(--bg-color);
+  color: var(--text-primary);
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+}
+
+#root {
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+}
+
+.container {
+  max-width: 1100px;
+  margin: 0 auto;
+  padding: 2rem 1rem;
+  flex: 1;
+  width: 100%;
+}
+
+/* Typography */
+h1, h2, h3, h4 {
+  color: var(--text-primary);
+  font-weight: 700;
+  margin-bottom: 0.75rem;
+}
+
+p {
+  color: var(--text-secondary);
+  line-height: 1.6;
+}
+
+/* Navigation */
+.navbar {
+  background-color: var(--card-bg);
+  border-bottom: 1px solid var(--card-border);
+  padding: 1rem 2rem;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.nav-brand {
+  font-size: 1.25rem;
+  font-weight: 700;
+  color: #fff;
+  text-decoration: none;
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.nav-links {
+  display: flex;
+  align-items: center;
+  gap: 1.25rem;
+}
+
+.nav-links a {
+  color: var(--text-secondary);
+  text-decoration: none;
+  font-weight: 500;
+  font-size: 0.95rem;
+  transition: color 0.2s;
+}
+
+.nav-links a:hover,
+.nav-links a.active {
+  color: #fff;
+}
+
+/* Cards & Layout */
+.card {
+  background-color: var(--card-bg);
+  border: 1px solid var(--card-border);
+  border-radius: var(--radius);
+  padding: 1.5rem;
+  margin-bottom: 1.5rem;
+  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
+}
+
+.grid-cols-3 {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+  gap: 1.5rem;
+}
+
+/* Buttons */
+.btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0.6rem 1.2rem;
+  border-radius: var(--radius);
+  font-weight: 600;
+  font-size: 0.9rem;
+  cursor: pointer;
+  border: none;
+  transition: all 0.2s ease;
+  text-decoration: none;
+}
+
+.btn-primary {
+  background-color: var(--primary);
+  color: white;
+}
+
+.btn-primary:hover {
+  background-color: var(--primary-hover);
+}
+
+.btn-secondary {
+  background-color: transparent;
+  border: 1px solid var(--card-border);
+  color: var(--text-primary);
+}
+
+.btn-secondary:hover {
+  background-color: var(--card-border);
+}
+
+.btn-danger {
+  background-color: var(--danger);
+  color: white;
+}
+
+.btn-danger:hover {
+  opacity: 0.9;
+}
+
+.btn-sm {
+  padding: 0.35rem 0.75rem;
+  font-size: 0.8rem;
+}
+
+/* Forms */
+.form-group {
+  margin-bottom: 1.25rem;
+}
+
+.form-group label {
+  display: block;
+  font-size: 0.875rem;
+  font-weight: 500;
+  color: var(--text-secondary);
+  margin-bottom: 0.5rem;
+}
+
+.form-control {
+  width: 100%;
+  padding: 0.7rem 0.9rem;
+  background-color: #0b1120;
+  border: 1px solid var(--card-border);
+  border-radius: var(--radius);
+  color: var(--text-primary);
+  font-size: 0.95rem;
+  outline: none;
+  transition: border-color 0.2s;
+}
+
+.form-control:focus {
+  border-color: var(--primary);
+}
+
+/* Alerts */
+.alert {
+  padding: 0.8rem 1rem;
+  border-radius: var(--radius);
+  font-size: 0.9rem;
+  margin-bottom: 1.25rem;
+}
+
+.alert-error {
+  background-color: rgba(239, 68, 68, 0.15);
+  border: 1px solid var(--danger);
+  color: #fca5a5;
+}
+
+.alert-success {
+  background-color: rgba(16, 185, 129, 0.15);
+  border: 1px solid var(--success);
+  color: #6ee7b7;
+}
+
+/* Badges */
+.badge {
+  display: inline-block;
+  padding: 0.2rem 0.6rem;
+  border-radius: 9999px;
+  font-size: 0.75rem;
+  font-weight: 600;
+  text-transform: uppercase;
+}
+
+.badge-primary {
+  background: rgba(99, 102, 241, 0.2);
+  color: #a5b4fc;
+}
+
+/* Spinner */
+.spinner-container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 3rem;
+}
+
+.spinner {
+  width: 40px;
+  height: 40px;
+  border: 4px solid var(--card-border);
+  border-top-color: var(--primary);
+  border-radius: 50%;
+  animation: spin 0.8s linear infinite;
+}
+
+@keyframes spin {
+  to { transform: rotate(360deg); }
+}

package/templates/client/src/main.jsx

@@ -0,0 +1,16 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import { BrowserRouter } from 'react-router-dom';
+import App from './App.jsx';
+import { AuthProvider } from './context/AuthContext.jsx';
+import './index.css';
+
+ReactDOM.createRoot(document.getElementById('root')).render(
+  <React.StrictMode>
+    <BrowserRouter>
+      <AuthProvider>
+        <App />
+      </AuthProvider>
+    </BrowserRouter>
+  </React.StrictMode>
+);

package/templates/client/src/pages/CreateResource.jsx

@@ -0,0 +1,142 @@
+import React, { useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { api } from '../services/api';
+
+const CreateResource = () => {
+  const [title, setTitle] = useState('');
+  const [description, setDescription] = useState('');
+  const [category, setCategory] = useState('General');
+  const [file, setFile] = useState(null);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState(null);
+
+  const navigate = useNavigate();
+
+  const handleFileChange = (e) => {
+    if (e.target.files && e.target.files[0]) {
+      setFile(e.target.files[0]);
+    }
+  };
+
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    setLoading(true);
+    setError(null);
+
+    try {
+      // Use FormData to support multipart/form-data with file upload
+      const formData = new FormData();
+      formData.append('title', title);
+      formData.append('description', description);
+      formData.append('category', category);
+      if (file) {
+        formData.append('file', file);
+      }
+
+      const response = await api.createResource(formData);
+      if (response.success) {
+        navigate(`/resources/${response.data._id}`);
+      }
+    } catch (err) {
+      if (err.data && err.data.errors) {
+        setError(err.data.errors.map((e) => e.message).join(', '));
+      } else {
+        setError(err.message || 'Failed to create resource');
+      }
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <div className="container" style={{ maxWidth: '650px' }}>
+      <div className="card">
+        <h2>Create New Resource</h2>
+        <p style={{ marginBottom: '1.5rem', fontSize: '0.9rem' }}>
+          Demonstrates Multer file upload, JWT-protected POST endpoint, and validation.
+        </p>
+
+        {error && <div className="alert alert-error">{error}</div>}
+
+        <form onSubmit={handleSubmit}>
+          <div className="form-group">
+            <label htmlFor="title">Title *</label>
+            <input
+              id="title"
+              type="text"
+              required
+              className="form-control"
+              placeholder="e.g. Node.js Architecture Notes"
+              value={title}
+              onChange={(e) => setTitle(e.target.value)}
+            />
+          </div>
+
+          <div className="form-group">
+            <label htmlFor="category">Category</label>
+            <select
+              id="category"
+              className="form-control"
+              value={category}
+              onChange={(e) => setCategory(e.target.value)}
+            >
+              <option value="General">General</option>
+              <option value="Documentation">Documentation</option>
+              <option value="Assignment">Assignment</option>
+              <option value="Project">Project</option>
+              <option value="Exam">Exam</option>
+            </select>
+          </div>
+
+          <div className="form-group">
+            <label htmlFor="description">Description</label>
+            <textarea
+              id="description"
+              rows={4}
+              className="form-control"
+              placeholder="Provide context or details about this item..."
+              value={description}
+              onChange={(e) => setDescription(e.target.value)}
+            />
+          </div>
+
+          <div className="form-group">
+            <label htmlFor="file">File Upload (Optional - PDF, Images, DOCX, max 10MB)</label>
+            <input
+              id="file"
+              type="file"
+              className="form-control"
+              onChange={handleFileChange}
+              accept=".pdf,.png,.jpg,.jpeg,.doc,.docx"
+            />
+            {file && (
+              <small style={{ display: 'block', marginTop: '0.4rem', color: 'var(--text-secondary)' }}>
+                Selected: {file.name} ({(file.size / 1024).toFixed(1)} KB)
+              </small>
+            )}
+          </div>
+
+          <div style={{ display: 'flex', gap: '1rem', marginTop: '1.5rem' }}>
+            <button
+              type="submit"
+              className="btn btn-primary"
+              disabled={loading}
+              style={{ flex: 1 }}
+            >
+              {loading ? 'Creating...' : 'Create Resource'}
+            </button>
+            <button
+              type="button"
+              onClick={() => navigate('/resources')}
+              className="btn btn-secondary"
+            >
+              Cancel
+            </button>
+          </div>
+        </form>
+      </div>
+    </div>
+  );
+};
+
+export default CreateResource;

package/templates/client/src/pages/Dashboard.jsx

@@ -0,0 +1,117 @@
+import React, { useEffect, useState } from 'react';
+import { Link } from 'react-router-dom';
+import { useAuth } from '../context/AuthContext';
+import { api } from '../services/api';
+import Loading from '../components/Loading';
+
+const Dashboard = () => {
+  const { user } = useAuth();
+  const [userResources, setUserResources] = useState([]);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    const fetchUserData = async () => {
+      try {
+        const response = await api.getResources();
+        if (response.success) {
+          // Filter resources created by current user
+          const myResources = response.data.filter(
+            (r) => r.createdBy && (r.createdBy._id === user?.id || r.createdBy === user?.id)
+          );
+          setUserResources(myResources);
+        }
+      } catch (err) {
+        console.error('Failed to load dashboard data:', err);
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    fetchUserData();
+  }, [user]);
+
+  if (loading) return <Loading message="Loading dashboard..." />;
+
+  return (
+    <div className="container">
+      <div
+        style={{
+          display: 'flex',
+          justifyContent: 'space-between',
+          alignItems: 'center',
+          marginBottom: '2rem',
+        }}
+      >
+        <div>
+          <h2>Welcome, {user?.name}!</h2>
+          <p>You are logged in with role: <span className="badge badge-primary">{user?.role}</span></p>
+        </div>
+        <Link to="/resources/new" className="btn btn-primary">
+          + Create New Resource
+        </Link>
+      </div>
+
+      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(240px, 1fr))', gap: '1rem', marginBottom: '2rem' }}>
+        <div className="card">
+          <p style={{ fontSize: '0.85rem' }}>Your Email</p>
+          <h3 style={{ fontSize: '1.1rem', marginTop: '0.25rem' }}>{user?.email}</h3>
+        </div>
+        <div className="card">
+          <p style={{ fontSize: '0.85rem' }}>Resources Created</p>
+          <h3 style={{ fontSize: '1.8rem', color: 'var(--primary)', marginTop: '0.25rem' }}>
+            {userResources.length}
+          </h3>
+        </div>
+        <div className="card">
+          <p style={{ fontSize: '0.85rem' }}>Account Status</p>
+          <h3 style={{ fontSize: '1.2rem', color: 'var(--success)', marginTop: '0.25rem' }}>
+            Active
+          </h3>
+        </div>
+      </div>
+
+      <div className="card">
+        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '1rem' }}>
+          <h3>Your Recent Items</h3>
+          <Link to="/resources" style={{ color: 'var(--primary)', fontSize: '0.9rem', textDecoration: 'none' }}>
+            View All Resources &rarr;
+          </Link>
+        </div>
+
+        {userResources.length === 0 ? (
+          <p style={{ padding: '1.5rem 0', textAlign: 'center' }}>
+            You haven't created any resources yet. Click "+ Create New Resource" to add one!
+          </p>
+        ) : (
+          <div className="grid-cols-3">
+            {userResources.slice(0, 3).map((item) => (
+              <div
+                key={item._id}
+                style={{
+                  background: 'rgba(255,255,255,0.03)',
+                  padding: '1rem',
+                  borderRadius: '6px',
+                  border: '1px solid var(--card-border)',
+                }}
+              >
+                <h4>{item.title}</h4>
+                <p style={{ fontSize: '0.85rem', margin: '0.5rem 0' }}>
+                  Category: <span className="badge badge-primary">{item.category}</span>
+                </p>
+                <Link
+                  to={`/resources/${item._id}`}
+                  className="btn btn-secondary btn-sm"
+                  style={{ marginTop: '0.5rem' }}
+                >
+                  View Details
+                </Link>
+              </div>
+            ))}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default Dashboard;