mern-template-tool 1.0.0

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

@@ -0,0 +1,181 @@
+import React, { useState, useEffect } from 'react';
+import { Link } from 'react-router-dom';
+import { api } from '../services/api';
+import Loading from '../components/Loading';
+
+const Resources = () => {
+  const [resources, setResources] = useState([]);
+  const [loading, setLoading] = useState(true);
+  const [search, setSearch] = useState('');
+  const [category, setCategory] = useState('All');
+  const [sort, setSort] = useState('newest');
+
+  const fetchResources = async () => {
+    setLoading(true);
+    try {
+      const response = await api.getResources({
+        search,
+        category,
+        sort,
+      });
+      if (response.success) {
+        setResources(response.data);
+      }
+    } catch (err) {
+      console.error('Failed to fetch resources:', err);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    fetchResources();
+  }, [category, sort]);
+
+  const handleSearchSubmit = (e) => {
+    e.preventDefault();
+    fetchResources();
+  };
+
+  return (
+    <div className="container">
+      <div
+        style={{
+          display: 'flex',
+          justifyContent: 'space-between',
+          alignItems: 'center',
+          marginBottom: '1.5rem',
+        }}
+      >
+        <div>
+          <h2>All Resources</h2>
+          <p>Explore, search, filter, and download uploaded items.</p>
+        </div>
+        <Link to="/resources/new" className="btn btn-primary">
+          + Add New Resource
+        </Link>
+      </div>
+
+      {/* Filter and Search Bar */}
+      <div className="card" style={{ padding: '1rem' }}>
+        <form
+          onSubmit={handleSearchSubmit}
+          style={{
+            display: 'grid',
+            gridTemplateColumns: 'repeat(auto-fit, minmax(200px, 1fr))',
+            gap: '1rem',
+            alignItems: 'center',
+          }}
+        >
+          {/* Search Input */}
+          <div className="form-group" style={{ marginBottom: 0 }}>
+            <input
+              type="text"
+              className="form-control"
+              placeholder="Search by title or description..."
+              value={search}
+              onChange={(e) => setSearch(e.target.value)}
+            />
+          </div>
+
+          {/* Category Filter */}
+          <div className="form-group" style={{ marginBottom: 0 }}>
+            <select
+              className="form-control"
+              value={category}
+              onChange={(e) => setCategory(e.target.value)}
+            >
+              <option value="All">All Categories</option>
+              <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>
+
+          {/* Sort Option */}
+          <div className="form-group" style={{ marginBottom: 0 }}>
+            <select
+              className="form-control"
+              value={sort}
+              onChange={(e) => setSort(e.target.value)}
+            >
+              <option value="newest">Sort by: Newest</option>
+              <option value="oldest">Sort by: Oldest</option>
+              <option value="title_asc">Title (A-Z)</option>
+              <option value="title_desc">Title (Z-A)</option>
+            </select>
+          </div>
+
+          {/* Search Button */}
+          <button type="submit" className="btn btn-secondary">
+            Search
+          </button>
+        </form>
+      </div>
+
+      {/* Resource List */}
+      {loading ? (
+        <Loading message="Fetching resources..." />
+      ) : resources.length === 0 ? (
+        <div className="card" style={{ textAlign: 'center', padding: '3rem' }}>
+          <h3>No resources found</h3>
+          <p style={{ marginTop: '0.5rem' }}>
+            Try adjusting your search query or filter criteria.
+          </p>
+        </div>
+      ) : (
+        <div className="grid-cols-3">
+          {resources.map((item) => (
+            <div key={item._id} className="card" style={{ display: 'flex', flexDirection: 'column', justifyContent: 'space-between' }}>
+              <div>
+                <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', marginBottom: '0.5rem' }}>
+                  <span className="badge badge-primary">{item.category}</span>
+                  <span style={{ fontSize: '0.75rem', color: 'var(--text-secondary)' }}>
+                    {new Date(item.createdAt).toLocaleDateString()}
+                  </span>
+                </div>
+                <h3 style={{ fontSize: '1.2rem', marginBottom: '0.5rem' }}>{item.title}</h3>
+                <p style={{ fontSize: '0.9rem', marginBottom: '1rem' }}>
+                  {item.description ? (
+                    item.description.length > 90
+                      ? `${item.description.substring(0, 90)}...`
+                      : item.description
+                  ) : (
+                    <em style={{ color: 'var(--text-secondary)' }}>No description provided.</em>
+                  )}
+                </p>
+              </div>
+
+              <div>
+                {item.fileUrl && (
+                  <div style={{ marginBottom: '0.75rem', fontSize: '0.85rem' }}>
+                    <a
+                      href={`http://localhost:5000/api/resources/${item._id}/download`}
+                      target="_blank"
+                      rel="noreferrer"
+                      style={{ color: '#38bdf8', textDecoration: 'none' }}
+                    >
+                      📎 {item.fileName || 'Download Attachment'}
+                    </a>
+                  </div>
+                )}
+                <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', borderTop: '1px solid var(--card-border)', paddingTop: '0.75rem' }}>
+                  <span style={{ fontSize: '0.8rem', color: 'var(--text-secondary)' }}>
+                    By: {item.createdBy?.name || 'Anonymous'}
+                  </span>
+                  <Link to={`/resources/${item._id}`} className="btn btn-secondary btn-sm">
+                    Details &rarr;
+                  </Link>
+                </div>
+              </div>
+            </div>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default Resources;

package/templates/client/src/routes/ProtectedRoute.jsx

@@ -0,0 +1,34 @@
+import React from 'react';
+import { Navigate, useLocation } from 'react-router-dom';
+import { useAuth } from '../context/AuthContext';
+import Loading from '../components/Loading';
+
+const ProtectedRoute = ({ children, requiredRole = null }) => {
+  const { isAuthenticated, loading, user } = useAuth();
+  const location = useLocation();
+
+  if (loading) {
+    return <Loading message="Verifying session..." />;
+  }
+
+  if (!isAuthenticated) {
+    // Redirect to login preserving destination state
+    return <Navigate to="/login" state={{ from: location }} replace />;
+  }
+
+  // Role check if required
+  if (requiredRole && user?.role !== requiredRole) {
+    return (
+      <div className="container" style={{ textAlign: 'center', marginTop: '3rem' }}>
+        <div className="card">
+          <h2>Access Forbidden</h2>
+          <p>You do not have the required role ({requiredRole}) to view this page.</p>
+        </div>
+      </div>
+    );
+  }
+
+  return children;
+};
+
+export default ProtectedRoute;

package/templates/client/src/services/api.js

@@ -0,0 +1,71 @@
+const API_BASE_URL = '/api';
+
+/**
+ * Reusable HTTP helper using native fetch API
+ * Automatically includes Authorization Bearer token from localStorage
+ */
+async function request(endpoint, options = {}) {
+  const token = localStorage.getItem('token');
+  const headers = {
+    ...options.headers,
+  };
+
+  // Add auth header if token exists and not explicitly overridden
+  if (token) {
+    headers['Authorization'] = `Bearer ${token}`;
+  }
+
+  // If body is NOT FormData, set JSON Content-Type
+  if (options.body && !(options.body instanceof FormData)) {
+    headers['Content-Type'] = 'application/json';
+    options.body = JSON.stringify(options.body);
+  }
+
+  const response = await fetch(`${API_BASE_URL}${endpoint}`, {
+    ...options,
+    headers,
+  });
+
+  const data = await response.json().catch(() => ({}));
+
+  if (!response.ok) {
+    const error = new Error(data.message || 'An error occurred with the request');
+    error.status = response.status;
+    error.data = data;
+    throw error;
+  }
+
+  return data;
+}
+
+export const api = {
+  // Auth API
+  login: (credentials) =>
+    request('/auth/login', { method: 'POST', body: credentials }),
+  register: (userData) =>
+    request('/auth/register', { method: 'POST', body: userData }),
+  getMe: () => request('/auth/me', { method: 'GET' }),
+
+  // Generic Resources API
+  getResources: (params = {}) => {
+    const searchParams = new URLSearchParams();
+    if (params.search) searchParams.append('search', params.search);
+    if (params.category && params.category !== 'All')
+      searchParams.append('category', params.category);
+    if (params.sort) searchParams.append('sort', params.sort);
+
+    const queryString = searchParams.toString();
+    return request(`/resources${queryString ? `?${queryString}` : ''}`, {
+      method: 'GET',
+    });
+  },
+  getResourceById: (id) => request(`/resources/${id}`, { method: 'GET' }),
+  createResource: (formData) =>
+    request('/resources', { method: 'POST', body: formData }),
+  updateResource: (id, formData) =>
+    request(`/resources/${id}`, { method: 'PUT', body: formData }),
+  deleteResource: (id) =>
+    request(`/resources/${id}`, { method: 'DELETE' }),
+};
+
+export default api;

package/templates/client/vite.config.js

@@ -0,0 +1,20 @@
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [react()],
+  server: {
+    port: 5173,
+    proxy: {
+      '/api': {
+        target: 'http://localhost:5000',
+        changeOrigin: true,
+      },
+      '/uploads': {
+        target: 'http://localhost:5000',
+        changeOrigin: true,
+      },
+    },
+  },
+});

package/templates/server/.env.example

@@ -0,0 +1,5 @@
+PORT=5000
+MONGO_URI=mongodb://127.0.0.1:27017/mern_exam
+JWT_SECRET=supersecretjwtkey_exam12345
+SESSION_SECRET=supersecretsessionkey_exam12345
+NODE_ENV=development

package/templates/server/config/db.js

@@ -0,0 +1,13 @@
+const mongoose = require('mongoose');
+
+const connectDB = async () => {
+  try {
+    const conn = await mongoose.connect(process.env.MONGO_URI || 'mongodb://127.0.0.1:27017/mern_exam');
+    console.log(`[MongoDB] Connected to database: ${conn.connection.name} @ ${conn.connection.host}`);
+  } catch (error) {
+    console.error(`[MongoDB Error] Database connection failed: ${error.message}`);
+    process.exit(1);
+  }
+};
+
+module.exports = connectDB;

package/templates/server/controllers/authController.js

@@ -0,0 +1,131 @@
+const bcrypt = require('bcryptjs');
+const User = require('../models/User');
+const { generateToken } = require('../utils/jwt');
+
+// @desc    Register a new user
+// @route   POST /api/auth/register
+// @access  Public
+const registerUser = async (req, res, next) => {
+  try {
+    const { name, email, password, role } = req.body;
+
+    // Check if user already exists
+    const userExists = await User.findOne({ email: email.toLowerCase() });
+    if (userExists) {
+      return res.status(400).json({
+        success: false,
+        message: 'A user with this email already exists.',
+      });
+    }
+
+    // Hash password
+    const salt = await bcrypt.genSalt(10);
+    const hashedPassword = await bcrypt.hash(password, salt);
+
+    // Create user
+    const user = await User.create({
+      name,
+      email: email.toLowerCase(),
+      password: hashedPassword,
+      role: role || 'student',
+    });
+
+    // Generate JWT
+    const token = generateToken(user);
+
+    return res.status(201).json({
+      success: true,
+      message: 'User registered successfully.',
+      token,
+      user: {
+        id: user._id,
+        name: user.name,
+        email: user.email,
+        role: user.role,
+        isActive: user.isActive,
+      },
+    });
+  } catch (error) {
+    next(error);
+  }
+};
+
+// @desc    Authenticate user & get token
+// @route   POST /api/auth/login
+// @access  Public
+const loginUser = async (req, res, next) => {
+  try {
+    const { email, password } = req.body;
+
+    // Check for user
+    const user = await User.findOne({ email: email.toLowerCase() });
+    if (!user) {
+      return res.status(401).json({
+        success: false,
+        message: 'Invalid email or password.',
+      });
+    }
+
+    // Check if active
+    if (!user.isActive) {
+      return res.status(403).json({
+        success: false,
+        message: 'Your account has been deactivated. Please contact an admin.',
+      });
+    }
+
+    // Compare password
+    const isMatch = await bcrypt.compare(password, user.password);
+    if (!isMatch) {
+      return res.status(401).json({
+        success: false,
+        message: 'Invalid email or password.',
+      });
+    }
+
+    // Generate token
+    const token = generateToken(user);
+
+    return res.status(200).json({
+      success: true,
+      message: 'Login successful.',
+      token,
+      user: {
+        id: user._id,
+        name: user.name,
+        email: user.email,
+        role: user.role,
+        isActive: user.isActive,
+      },
+    });
+  } catch (error) {
+    next(error);
+  }
+};
+
+// @desc    Get current authenticated user profile
+// @route   GET /api/auth/me
+// @access  Private (JWT)
+const getMe = async (req, res, next) => {
+  try {
+    return res.status(200).json({
+      success: true,
+      user: {
+        id: req.user._id,
+        name: req.user.name,
+        email: req.user.email,
+        role: req.user.role,
+        isActive: req.user.isActive,
+        createdAt: req.user.createdAt,
+      },
+    });
+  } catch (error) {
+    next(error);
+  }
+};
+
+module.exports = {
+  registerUser,
+  loginUser,
+  getMe,
+};