mern-template-tool 1.0.0 → 1.0.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mern-template-tool",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "description": "Exam-oriented MERN stack project generator with JWT, sessions, EJS, React Context, Multer, and generic CRUD",
   "main": "bin/index.js",
   "bin": {

package/templates/client/src/components/Loading.jsx

@@ -2,11 +2,8 @@ import React from 'react';
 
 const Loading = ({ message = 'Loading...' }) => {
   return (
-    <div className="spinner-container">
-      <div style={{ textAlign: 'center' }}>
-        <div className="spinner" style={{ margin: '0 auto 1rem auto' }}></div>
-        <p style={{ color: 'var(--text-secondary)', fontSize: '0.9rem' }}>{message}</p>
-      </div>
+    <div>
+      <p><em>{message}</em></p>
     </div>
   );
 };

package/templates/client/src/components/Navbar.jsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Link, NavLink, useNavigate } from 'react-router-dom';
+import { Link, useNavigate } from 'react-router-dom';
 import { useAuth } from '../context/AuthContext';
 
 const Navbar = () => {
@@ -12,45 +12,36 @@ const Navbar = () => {
   };
 
   return (
-    <nav className="navbar">
-      <Link to="/" className="nav-brand">
-        🚀 MERN App
-      </Link>
-
-      <div className="nav-links">
-        <NavLink to="/resources">Resources</NavLink>
-
+    <nav>
+      <h1>MERN Application</h1>
+      <div>
+        <Link to="/resources">Resources</Link>
+        {' | '}
         {isAuthenticated ? (
           <>
-            <NavLink to="/dashboard">Dashboard</NavLink>
-            <NavLink to="/resources/new">Create Resource</NavLink>
-            <NavLink to="/profile">Profile ({user?.name})</NavLink>
-            <button
-              onClick={handleLogout}
-              className="btn btn-secondary btn-sm"
-              style={{ marginLeft: '0.5rem' }}
-            >
+            <Link to="/dashboard">Dashboard</Link>
+            {' | '}
+            <Link to="/resources/new">Create Resource</Link>
+            {' | '}
+            <Link to="/profile">Profile ({user?.name})</Link>
+            {' | '}
+            <button type="button" onClick={handleLogout}>
               Logout
             </button>
           </>
         ) : (
           <>
-            <NavLink to="/login">Login</NavLink>
-            <NavLink to="/register" className="btn btn-primary btn-sm">
-              Register
-            </NavLink>
+            <Link to="/login">Login</Link>
+            {' | '}
+            <Link to="/register">Register</Link>
           </>
         )}
-
-        <a
-          href="http://localhost:5000/admin/login"
-          target="_blank"
-          rel="noreferrer"
-          style={{ fontSize: '0.8rem', color: '#a5b4fc', borderLeft: '1px solid #334155', paddingLeft: '0.75rem' }}
-        >
-          Admin Portal (EJS) &rarr;
+        {' | '}
+        <a href="http://localhost:5000/admin/login" target="_blank" rel="noreferrer">
+          Admin Portal (EJS)
         </a>
       </div>
+      <hr />
     </nav>
   );
 };

package/templates/client/src/index.css

@@ -1,244 +1 @@
-/* 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); }
-}
+/* Pure HTML - No CSS styles applied */

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

@@ -24,7 +24,6 @@ const CreateResource = () => {
     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);
@@ -49,92 +48,71 @@ const CreateResource = () => {
   };
 
   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>
+    <div>
+      <h2>Create New Resource</h2>
+      <p>Demonstrates generic CRUD entity creation with Multer file upload</p>
 
-        {error && <div className="alert alert-error">{error}</div>}
+      {error && <p><strong>Error: {error}</strong></p>}
 
-        <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>
+      <form onSubmit={handleSubmit}>
+        <div>
+          <label htmlFor="title">Title *: </label>
+          <input
+            id="title"
+            type="text"
+            required
+            placeholder="Resource Title"
+            value={title}
+            onChange={(e) => setTitle(e.target.value)}
+          />
+        </div>
+        <br />
+        <div>
+          <label htmlFor="category">Category: </label>
+          <select
+            id="category"
+            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>
+        <br />
+        <div>
+          <label htmlFor="description">Description: </label>
+          <br />
+          <textarea
+            id="description"
+            rows={4}
+            cols={50}
+            placeholder="Write details..."
+            value={description}
+            onChange={(e) => setDescription(e.target.value)}
+          />
+        </div>
+        <br />
+        <div>
+          <label htmlFor="file">File Upload (Optional): </label>
+          <input
+            id="file"
+            type="file"
+            onChange={handleFileChange}
+            accept=".pdf,.png,.jpg,.jpeg,.doc,.docx"
+          />
+        </div>
+        <br />
+        <button type="submit" disabled={loading}>
+          {loading ? 'Creating...' : 'Create Resource'}
+        </button>
+        {' '}
+        <button type="button" onClick={() => navigate('/resources')}>
+          Cancel
+        </button>
+      </form>
     </div>
   );
 };

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

@@ -14,7 +14,6 @@ const Dashboard = () => {
       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)
           );
@@ -33,83 +32,43 @@ const Dashboard = () => {
   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>
+      <h2>User Dashboard</h2>
+      <p>Welcome, <strong>{user?.name}</strong>!</p>
+      <p>Role: <strong>{user?.role}</strong> | Email: <strong>{user?.email}</strong></p>
+      <p>
+        <Link to="/resources/new">[ + Create New Resource ]</Link>
+      </p>
 
-      <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>
+      <hr />
 
-      <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>
+      <h3>Your Created Resources ({userResources.length})</h3>
+      {userResources.length === 0 ? (
+        <p>You haven't created any resources yet.</p>
+      ) : (
+        <table border="1" cellPadding="6" cellSpacing="0">
+          <thead>
+            <tr>
+              <th>Title</th>
+              <th>Category</th>
+              <th>Created At</th>
+              <th>Action</th>
+            </tr>
+          </thead>
+          <tbody>
+            {userResources.map((item) => (
+              <tr key={item._id}>
+                <td>{item.title}</td>
+                <td>{item.category}</td>
+                <td>{new Date(item.createdAt).toLocaleDateString()}</td>
+                <td>
+                  <Link to={`/resources/${item._id}`}>View Details</Link>
+                </td>
+              </tr>
             ))}
-          </div>
-        )}
-      </div>
+          </tbody>
+        </table>
+      )}
     </div>
   );
 };