npm - mwalajs - Versions diffs - 1.0.7 → 1.0.8 - Mend

mwalajs 1.0.7 → 1.0.8

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (21) hide show

package/.env.backup-2025-12-04T08-55-09-593Z +5 -0
package/app.mjs +4 -0
package/bin/mwala copy.mjs +212 -0
package/bin/mwala.mjs +215 -100
package/config/createdatabase copy.mjs +362 -0
package/config/createdatabase.mjs +0 -158
package/package.json +1 -1
package/public/images/hekima-mwala.jpg +0 -0
package/public/images/hekima-mwala2.jpg +0 -0
package/public/images/mwala3.jpg +0 -0
package/public/images/mwalajs.jpg +0 -0
package/public/images/mwalajs1.jpg +0 -0
package/utils/dbUtils.mjs +124 -0
package/views/about.ejs +271 -136
package/views/index.ejs +325 -428
package/views/mwalajs-framework-documentation.ejs +778 -0
package/views/partials/footer.ejs +102 -0
package/views/partials/header.ejs +160 -0
package/views/steps copy.ejs +243 -0
package/views/steps.ejs +208 -482
package/views/welcome.ejs +242 -184

package/views/mwalajs-framework-documentation.ejs ADDED Viewed

@@ -0,0 +1,778 @@
+<!-- include partials/header -->
+ <%- include('partials/header') %>
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no" />
+  <title>MwalaJS Framework Documentation</title>
+  <!-- Bootstrap CSS for responsive design -->
+  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
+  <!-- Font Awesome for icons (HCI-friendly visual cues) -->
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" integrity="sha512-DTOQO9RWCH3ppGqcWaEA1BIZOC6xxalwEsw9c2QQeAIftl+Vegovlnee1c9QX4TctnWMn13TZye+giMm8e2LwA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
+  <!-- Meta Info for SEO & Social Sharing -->
+  <meta name="description" content="MwalaJS - Lightweight MVC JavaScript framework for full-stack web apps. Comprehensive documentation including installation, commands, structure, and examples.">
+  <meta name="keywords" content="MwalaJS, MVC, Node.js framework, JavaScript framework, documentation, installation, CLI commands, file structure">
+  <meta name="author" content="Hekima Ambalile Mwala">
+  <!-- Open Graph (for social media cards) -->
+  <meta property="og:title" content="MwalaJS - MVC Framework Documentation">
+  <meta property="og:description" content="Detailed guide for MwalaJS framework: installation, commands, project structure, examples, and more.">
+  <meta property="og:image" content="https://mwalajs.biasharabora.com/images/mwala-logo.png">
+  <meta property="og:url" content="https://mwalajs.biasharabora.com">
+  <!-- Twitter Cards -->
+  <meta name="twitter:card" content="summary_large_image">
+  <!-- Favicon -->
+  <link rel="icon" href="https://mwalajs.biasharabora.com/favicon.ico" type="image/x-icon" />
+  <!-- Custom Styles for attractive, HCI-compliant design -->
+  <style>
+    :root {
+      --primary-color: #0d6efd; /* Bootstrap primary blue */
+      --secondary-color: #6c757d;
+      --success-color: #198754;
+      --info-color: #0dcaf0;
+      --warning-color: #ffc107;
+      --danger-color: #dc3545;
+      --light-color: #f8f9fa;
+      --dark-color: #212529;
+      --accent-gradient: linear-gradient(135deg, #0d6efd, #6610f2);
+    }
+    body {
+      background-color: var(--light-color);
+      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+      line-height: 1.6;
+      color: var(--dark-color);
+      overflow-x: hidden; /* Prevent horizontal scroll */
+    }
+    h1, h2, h3, h4, h5, h6 {
+      color: var(--primary-color);
+      font-weight: 600;
+      margin-bottom: 1rem;
+    }
+    .navbar {
+      background: var(--accent-gradient) !important;
+      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+    }
+    .nav-link {
+      color: white !important;
+      transition: color 0.3s ease;
+    }
+    .nav-link:hover {
+      color: var(--warning-color) !important;
+    }
+    .help-content, .section-card {
+      background-color: #ffffff;
+      padding: 2rem;
+      border-radius: 12px;
+      box-shadow: 0 6px 15px rgba(0, 0, 0, 0.08);
+      margin-bottom: 2rem;
+      transition: transform 0.3s ease;
+    }
+    .section-card:hover {
+      transform: translateY(-5px);
+    }
+    pre {
+      background-color: #1e1e1e;
+      color: #f1f1f1;
+      padding: 1.5rem;
+      border-radius: 12px;
+      overflow-x: auto;
+      font-size: 0.95rem;
+      box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.2);
+    }
+    code {
+      padding: 0.2rem 0.4rem;
+      border-radius: 4px;
+      font-family: 'Courier New', Courier, monospace;
+    }
+    .table {
+      border-radius: 8px;
+      overflow: hidden;
+      box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
+    }
+    .table thead {
+      background: var(--accent-gradient);
+      color: white;
+    }
+    .table-striped tbody tr:nth-of-type(odd) {
+      background-color: rgba(0, 0, 0, 0.05);
+    }
+    footer {
+      background: var(--accent-gradient);
+      color: #ffffff;
+      padding: 2rem 0;
+      margin-top: 3rem;
+      text-align: center;
+    }
+    .whatsapp-box {
+      background-color: #d1e7dd;
+      padding: 1.5rem;
+      border-left: 6px solid var(--success-color);
+      border-radius: 8px;
+      margin: 2rem 0;
+      box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
+    }
+    .whatsapp-box a {
+      color: var(--success-color);
+      font-weight: bold;
+      text-decoration: none;
+      transition: color 0.3s ease;
+    }
+    .whatsapp-box a:hover {
+      color: var(--primary-color);
+    }
+    .note {
+      background-color: var(--info-color);
+      color: white;
+      padding: 1rem;
+      border-radius: 8px;
+      margin: 1rem 0;
+      font-style: italic;
+    }
+    /* Search Bar Styles */
+    #searchInput {
+      border-radius: 50px;
+      padding: 0.75rem 1.5rem;
+      border: 1px solid var(--secondary-color);
+      transition: border-color 0.3s ease;
+    }
+    #searchInput:focus {
+      border-color: var(--primary-color);
+      box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
+    }
+    .search-results {
+      display: none;
+      background-color: white;
+      border: 1px solid var(--secondary-color);
+      border-radius: 8px;
+      padding: 1rem;
+      margin-top: 1rem;
+      box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
+    }
+    /* HCI Improvements: Buttons with icons */
+    .btn-icon {
+      display: inline-flex;
+      align-items: center;
+      gap: 0.5rem;
+    }
+    /* Responsive Adjustments */
+    @media (max-width: 768px) {
+      h1 { font-size: 2rem; }
+      h2 { font-size: 1.5rem; }
+      pre { font-size: 0.85rem; padding: 1rem; }
+      .container { padding: 1rem; }
+      iframe { width: 100%; height: auto; }
+    }
+    @media (max-width: 576px) {
+      .table-responsive { overflow-x: auto; }
+      .nav-item { text-align: center; }
+    }
+    /* Attractive Animations */
+    .fade-in {
+      opacity: 0;
+      animation: fadeIn 1s ease-in forwards;
+    }
+    @keyframes fadeIn {
+      to { opacity: 1; }
+    }
+  </style>
+</head>
+<body>
+  <!-- Navigation Bar with Search -->
+  <nav class="navbar navbar-expand-lg navbar-dark">
+    <div class="container">
+      <a class="navbar-brand" href="/"><i class="fas fa-code me-2"></i>MwalaJS</a>
+      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
+        <span class="navbar-toggler-icon"></span>
+      </button>
+      <div class="collapse navbar-collapse" id="navbarNav">
+        <ul class="navbar-nav me-auto">
+          <li class="nav-item"><a class="nav-link" href="#overview"><i class="fas fa-info-circle me-1"></i>Overview</a></li>
+          <li class="nav-item"><a class="nav-link" href="#installation"><i class="fas fa-download me-1"></i>Installation</a></li>
+          <li class="nav-item"><a class="nav-link" href="#commands"><i class="fas fa-terminal me-1"></i>Commands</a></li>
+          <li class="nav-item"><a class="nav-link" href="#structure"><i class="fas fa-folder-tree me-1"></i>Structure</a></li>
+          <li class="nav-item"><a class="nav-link" href="#examples"><i class="fas fa-code-branch me-1"></i>Examples</a></li>
+          <li class="nav-item"><a class="nav-link" href="#about"><i class="fas fa-users me-1"></i>About</a></li>
+        </ul>
+        <!-- Search Bar for Terms -->
+        <form class="d-flex" role="search">
+          <input class="form-control me-2" type="search" id="searchInput" placeholder="Search terms..." aria-label="Search">
+          <button class="btn btn-outline-light" type="button" onclick="performSearch()"><i class="fas fa-search"></i></button>
+        </form>
+      </div>
+    </div>
+  </nav>
+  <!-- Main Content Container -->
+  <div class="container my-5">
+    <h1 class="text-center mb-5 fade-in"><i class="fas fa-book-open me-2"></i>MwalaJS Framework Documentation</h1>
+    <!-- Search Results Section -->
+    <div id="searchResults" class="search-results"></div>
+    <!-- Overview Section -->
+    <section id="overview" class="section-card fade-in">
+      <h2><i class="fas fa-eye me-2"></i>Overview</h2>
+      <p><strong>MwalaJS</strong> is a lightweight and modular JavaScript framework designed for building scalable server-side applications using modern Node.js features. It follows the MVC (Model-View-Controller) pattern, making it easy to organize code for full-stack web applications. With built-in support for databases, routing, and middleware, MwalaJS accelerates development while keeping things simple and efficient.</p>
+      <p>Key Features:</p>
+      <ul>
+        <li><i class="fas fa-check-circle text-success me-1"></i>MVC Architecture for clean code separation</li>
+        <li><i class="fas fa-check-circle text-success me-1"></i>CLI Tools for project scaffolding and management</li>
+        <li><i class="fas fa-check-circle text-success me-1"></i>Database Migrations and Models</li>
+        <li><i class="fas fa-check-circle text-success me-1"></i>Customizable Middleware</li>
+        <li><i class="fas fa-check-circle text-success me-1"></i>Support for .mjs and .js modules</li>
+        <li><i class="fas fa-check-circle text-success me-1"></i>Responsive and secure by design</li>
+      </ul>
+    </section>
+    <!-- Installation Section -->
+    <section id="installation" class="section-card fade-in">
+      <h2><i class="fas fa-download me-2"></i>Installation</h2>
+      <p>Install MwalaJS globally to use CLI tools:</p>
+      <pre><code>npm install -g mwalajs</code></pre>
+      <p>If you're using it in a specific project, install locally:</p>
+      <pre><code>npm install mwalajs</code></pre>
+      <p><strong>Note:</strong> In case of errors regarding missing <code>fs-extra</code>, install it manually:</p>
+      <pre><code>npm install -g fs-extra</code></pre>
+      <p><strong>Note 2:</strong> MwalaJS is now an NPM package—no need to download .ZIP, .RAR, or .EXE files for versions 1.0.4 or above. Before creating a project, run <code>npm init</code> to create a <code>package.json</code> file. Ensure it includes:</p>
+      <pre><code>"dependencies": {
+  "mwalajs": "^1.0.5"
+},
+"type": "module"</code></pre>
+      <p>These settings are crucial before running <code>mwala serve</code>.</p>
+      <h3><i class="fas fa-windows me-2"></i>Windows Installation Guide</h3>
+      <p><strong>What You’ll Need:</strong></p>
+      <ul>
+        <li><i class="fas fa-computer me-1"></i>A computer (Windows preferred)</li>
+        <li><i class="fas fa-wifi me-1"></i>Internet connection</li>
+        <li><i class="fas fa-brain me-1"></i>Basic computer knowledge (copy, paste, extracting files)</li>
+        <li><i class="fas fa-node-js me-1"></i><a href="https://nodejs.org" target="_blank">Node.js installed</a></li>
+      </ul>
+      <h4>Step-by-Step Instructions</h4>
+      <ol>
+        <li><strong>Download MwalaJS:</strong> Go to <a href="https://mwalajs.biasharabora.com" target="_blank">https://mwalajs.biasharabora.com</a> and download ZIP or RAR.</li>
+        <li><strong>Extract the File:</strong> Right-click and extract to get the <code>mwalajs</code> folder.</li>
+        <li><strong>Move to Program Files:</strong> Paste into <code>C:\Program Files</code>.</li>
+        <li><strong>Add to Environment Variables:</strong> Edit system Path and add <code>C:\Program Files\mwalajs</code>.</li>
+        <li><strong>Test:</strong> Open CMD and run <code>mwala</code>.</li>
+      </ol>
+      <h3><i class="fab fa-linux me-2"></i>Linux Installation (Ubuntu/Debian/Fedora/Others)</h3>
+      <ol>
+        <li><strong>Download:</strong> From the website, get ZIP or TAR.GZ.</li>
+        <li><strong>Extract:</strong> Use <code>unzip</code> or <code>tar -xvzf</code>.</li>
+        <li><strong>Move:</strong> <code>sudo mv mwalajs /opt/</code></li>
+        <li><strong>Make Executable:</strong> <code>sudo chmod +x /opt/mwalajs/mwala.mjs</code></li>
+        <li><strong>Create Symlink:</strong> <code>sudo ln -s /opt/mwalajs/mwala.mjs /usr/local/bin/mwala</code></li>
+        <li><strong>Test:</strong> Run <code>mwala</code>.</li>
+      </ol>
+      <h4>Troubleshooting</h4>
+      <div class="table-responsive">
+        <table class="table table-striped table-bordered">
+          <thead>
+            <tr>
+              <th>Issue</th>
+              <th>Solution</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr>
+              <td><code>mwala</code> not recognized</td>
+              <td>Recheck path, restart terminal</td>
+            </tr>
+            <tr>
+              <td>File won’t extract</td>
+              <td>Install 7-Zip or WinRAR</td>
+            </tr>
+            <tr>
+              <td>Node.js not found</td>
+              <td>Download from official site</td>
+            </tr>
+            <tr>
+              <td>Permission denied</td>
+              <td>Use <code>sudo</code> or check permissions</td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+      <h3>Installation Video Guide</h3>
+      <div class="ratio ratio-16x9">
+        <iframe src="https://www.youtube.com/embed/Zzj0WnvDET4?si=NsgUZDlF0uRuqe1P" title="YouTube video player" allowfullscreen></iframe>
+      </div>
+    </section>
+    <!-- Commands Section -->
+    <section id="commands" class="section-card fade-in">
+      <h2><i class="fas fa-terminal me-2"></i>Available Commands</h2>
+      <p>Use the MwalaJS CLI to manage your projects efficiently. Run <code>mwala help</code> for a full list.</p>
+      <pre>
+<span class="command">mwala create-project &lt;projectName&gt;</span>  → Create a new MVC project.
+<span class="command">mwala app.mjs</span>                        → Start the main application file.
+<span class="command">Database Commands:</span>
+  - mwala create-db                      → Create database.
+  - mwala create-table &lt;name&gt;            → Create a table.
+  - mwala drop-table &lt;name&gt;              → Drop a table.
+  - mwala migrate all                    → Run migrations.
+  - mwala rollback all                   → Undo last migration.
+<span class="command">Code Generation:</span>
+  - mwala generate model &lt;name&gt;          → Generate a model file.
+  - mwala generate controller &lt;name&gt;     → Generate a controller file.
+  - mwala generate route &lt;name&gt;          → Generate a route file.
+  - mwala generate view &lt;name&gt;           → Generate a view file.
+  - mwala generate midware &lt;name&gt;        → Generate middleware.
+<span class="command">mwala serve</span>                          → Start local server.
+<span class="command">mwala help</span>                           → List all available commands.
+<span class="command">mwala -v</span>                             → Check version.
+<span class="command">mwala init</span>                           → Initialize MwalaJS in a project.
+      </pre>
+      <h3>CLI Commands Table</h3>
+      <div class="table-responsive">
+        <table class="table table-striped table-bordered">
+          <thead>
+            <tr>
+              <th>Command</th>
+              <th>Description</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr>
+              <td><code>mwala create-project &lt;name&gt;</code></td>
+              <td>Create a new project</td>
+            </tr>
+            <tr>
+              <td><code>mwala init</code></td>
+              <td>Initialize MwalaJS</td>
+            </tr>
+            <tr>
+              <td><code>mwala serve</code></td>
+              <td>Run in development mode</td>
+            </tr>
+            <tr>
+              <td><code>mwala help</code></td>
+              <td>Display help</td>
+            </tr>
+            <tr>
+              <td><code>mwala generate model &lt;name&gt;</code></td>
+              <td>Generate model</td>
+            </tr>
+            <!-- Add more rows for all commands to make it longer -->
+            <tr>
+              <td><code>mwala generate controller &lt;name&gt;</code></td>
+              <td>Generate controller</td>
+            </tr>
+            <tr>
+              <td><code>mwala generate route &lt;name&gt;</code></td>
+              <td>Generate route</td>
+            </tr>
+            <tr>
+              <td><code>mwala generate view &lt;name&gt;</code></td>
+              <td>Generate view</td>
+            </tr>
+            <tr>
+              <td><code>mwala generate midware &lt;name&gt;</code></td>
+              <td>Generate middleware</td>
+            </tr>
+            <tr>
+              <td><code>mwala create-db</code></td>
+              <td>Create database</td>
+            </tr>
+            <tr>
+              <td><code>mwala create-table &lt;name&gt;</code></td>
+              <td>Create table</td>
+            </tr>
+            <tr>
+              <td><code>mwala drop-table &lt;name&gt;</code></td>
+              <td>Drop table</td>
+            </tr>
+            <tr>
+              <td><code>mwala migrate all</code></td>
+              <td>Run all migrations</td>
+            </tr>
+            <tr>
+              <td><code>mwala rollback all</code></td>
+              <td>Undo migrations</td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+    </section>
+    <!-- Structure Section -->
+    <section id="structure" class="section-card fade-in">
+      <h2><i class="fas fa-folder-tree me-2"></i>Project Structure</h2>
+      <p>MwalaJS follows a standard MVC structure for organization. The main entry point is <code>app.mjs</code> (use <code>.mjs</code> for ES modules; fallback to <code>.js</code> if needed, but <code>app.mjs</code> is required as MwalaJS points to it).</p>
+      <p>In other folders, use <code>filename.mjs</code> or <code>filename.js</code> if <code>.mjs</code> causes errors.</p>
+      <pre>
+mwalajs-project/
+├── app.mjs              # Main application entry point (must be .mjs)
+├── migrations/          # Database migration files (e.g., migration001.js or .mjs)
+├── models/              # Database models (e.g., UserModel.js or .mjs)
+├── controllers/         # Application logic (e.g., UserController.js or .mjs)
+├── routes/              # API routes (e.g., userRoutes.js or .mjs)
+├── middlewares/         # Custom middleware (e.g., authMiddleware.js or .mjs)
+├── config/              # Configuration files (e.g., database.js or .mjs, appSettings.js)
+├── public/              # Static assets (CSS, JS, images)
+│   ├── css/             # Stylesheets
+│   ├── js/              # Client-side scripts
+│   └── images/          # Images and icons
+├── views/               # Template views for server-side rendering (e.g., index.html or .ejs)
+├── package.json         # NPM dependencies and scripts
+└── README.md            # Project documentation
+      </pre>
+      <p><strong>Notes on File Extensions:</strong></p>
+      <ul>
+        <li><i class="fas fa-exclamation-triangle text-warning me-1"></i>Use <code>.mjs</code> for modern ES modules.</li>
+        <li><i class="fas fa-exclamation-triangle text-warning me-1"></i>If compatibility issues arise, switch to <code>.js</code> except for <code>app.mjs</code>.</li>
+        <li><i class="fas fa-info-circle text-info me-1"></i>Example: <code>controllers/UserController.mjs</code> or <code>UserController.js</code>.</li>
+      </ul>
+    </section>
+    <!-- Examples Section -->
+    <section id="examples" class="section-card fade-in">
+      <h2><i class="fas fa-code-branch me-2"></i>Examples</h2>
+      <p>Here are some code examples to get you started with MwalaJS.</p>
+      <h3>Creating a Simple Controller</h3>
+      <pre><code>// controllers/homeController.mjs
+//homeController.mjs
+export const homeController = {
+  getHomePage: (req, res) => {
+    res.render('index', { title: 'Welcome to MwalaJS MVC' });
+  }
+};
+export const Steps = {
+getSteps: (req, res) => {
+  res.render('steps', { title: 'Welcome to MwalaJS MVC' });
+}
+};
+export const welcome = {
+  getwelcome: (req, res) => {
+    res.render('welcome', { title: 'Welcome to MwalaJS MVC' });
+  }
+  };
+  export const about = {
+    getabout: (req, res) => {
+      res.render('about', { title: 'Welcome to MwalaJS MVC' });
+    }
+    };
+  </code></pre>
+      <h3>Defining a Route</h3>
+      <pre><code>// routes/homeRoutes.mjs
+import mwalajs from 'mwalajs';
+import { homeController,Steps,welcome,about } from '../controllers/homeController.mjs';
+const router = mwalajs.Router(); // Corrected Router usage
+router.get('/', homeController.getHomePage);
+router.get('/steps',Steps.getSteps);
+router.get('/welcome',welcome.getwelcome);
+router.get('/about',about.getabout);
+export { router as homeRoutes };
+</code></pre>
+      <h3>App Entry Point</h3>
+      <pre><code>// app.mjs
+//app.mjs
+import mwalajs from 'mwalajs';
+import { homeRoutes } from './routes/homeRoutes.mjs';
+import { fileURLToPath } from 'url';
+import path from 'path';
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+// Use mwalajs directly (it's an instance now)
+mwalajs.set('view engine', 'ejs');
+mwalajs.set('views', path.join(__dirname, 'views'));
+// Serve static files correctly
+mwalajs.useStatic(path.join(__dirname, 'public'));
+// Use routes
+mwalajs.use('/', homeRoutes);
+mwalajs.use('/steps', homeRoutes);
+mwalajs.use('/about', homeRoutes);
+mwalajs.use('/welcome', homeRoutes);
+mwalajs.get('/mwalajs-framework-documentation', (req, res) => {
+  res.render('mwalajs-framework-documentation');
+});
+// Start server
+const port = process.env.PORT || 2025;
+mwalajs.listen(port, () => {
+  console.log(`Server running on http://localhost:${port}`);
+});
+      <h3>Generating a Model</h3>
+      <p>Run <code>mwala generate model User</code> to create a model file.</p>
+      <pre><code>// models/User.mjs
+export class User {
+  // Model logic here
+}
+EXAMPLE
+import db from '../config/db.js';
+export const getAllResources = async (filters = {}) => {
+  let query = `
+    SELECT r.*, u.fullname AS uploaded_by_name,
+           c.name AS category_name,
+           l.name AS level_name,
+           s.subject_name
+    FROM resources r
+    LEFT JOIN users u ON r.uploaded_by = u.id
+    LEFT JOIN categories c ON r.category_id = c.id
+    LEFT JOIN levels l ON r.level_id = l.id
+    LEFT JOIN subjects s ON r.subject_id = s.id
+    WHERE 1=1
+  `;
+  const params = [];
+  if (filters.category_id) {
+    query += ' AND r.category_id = ?';
+    params.push(filters.category_id);
+  }
+  if (filters.level_id) {
+    query += ' AND r.level_id = ?';
+    params.push(filters.level_id);
+  }
+  if (filters.subject_id) {
+    query += ' AND r.subject_id = ?';
+    params.push(filters.subject_id);
+  }
+  query += ' ORDER BY r.id DESC';
+  const [rows] = await db.query(query, params);
+  return rows;
+};
+export const getResourceById = async (id) => {
+  const [rows] = await db.query('SELECT * FROM resources WHERE id = ?', [id]);
+  return rows[0];
+};
+export const createResource = async (resource) => {
+  const sql = `
+    INSERT INTO resources
+    (title, description, google_drive_link, category_id, level_id, subject_id, uploaded_by)
+    VALUES (?, ?, ?, ?, ?, ?, ?)
+  `;
+  const params = [
+    resource.title,
+    resource.description,
+    resource.google_drive_link,
+    resource.category_id,
+    resource.level_id,
+    resource.subject_id,
+    resource.uploaded_by
+  ];
+  await db.query(sql, params);
+};
+export const updateResource = async (id, resource) => {
+  const sql = `
+    UPDATE resources SET
+      title = ?, description = ?, google_drive_link = ?,
+      category_id = ?, level_id = ?, subject_id = ?
+    WHERE id = ?
+  `;
+  const params = [
+    resource.title,
+    resource.description,
+    resource.google_drive_link,
+    resource.category_id,
+    resource.level_id,
+    resource.subject_id,
+    id
+  ];
+  await db.query(sql, params);
+};
+export const deleteResource = async (id) => {
+  await db.query('DELETE FROM resources WHERE id = ?', [id]);
+};
+</code></pre>
+      <p>More examples available in the official repository or by joining the support group.</p>
+    </section>
+    <!-- About Section -->
+    <section id="about" class="section-card fade-in">
+      <h2><i class="fas fa-users me-2"></i>About MwalaJS</h2>
+      <p>MwalaJS is developed by Hekima Ambalile Mwala and the MwalaJS Team. It's open-source under the MIT License, aimed at simplifying Node.js development for beginners and experts alike.</p>
+      <h3>Security Notes</h3>
+      <ul>
+        <li><i class="fas fa-shield-alt text-success me-1"></i>Keep dependencies updated with <code>npm update</code>.</li>
+        <li><i class="fas fa-shield-alt text-success me-1"></i>Sanitize user inputs to prevent vulnerabilities.</li>
+        <li><i class="fas fa-shield-alt text-success me-1"></i>Run <code>npm audit</code> regularly for security checks.</li>
+        <li><i class="fas fa-shield-alt text-success me-1"></i>Use HTTPS in production.</li>
+        <li><i class="fas fa-shield-alt text-success me-1"></i>Implement authentication middleware.</li>
+      </ul>
+      <h3>License</h3>
+      <p>MIT License © 2025 Hekima Mwala and MwalaJS Team. All rights reserved for contributions.</p>
+    </section>
+    <!-- Download Section -->
+    <section class="section-card fade-in">
+      <h2><i class="fas fa-cloud-download-alt me-2"></i>MwalaJS Release Downloads</h2>
+      <p>For versions below 1.0.2, download .EXE, .ZIP, or .RAR. For latest, use NPM.</p>
+      <h4 class="text-success">Version 1.0.1</h4>
+      <div class="table-responsive">
+        <table class="table table-bordered table-hover">
+          <thead>
+            <tr>
+              <th>File Type</th>
+              <th>Description</th>
+              <th>Download</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr>
+              <td>ZIP</td>
+              <td>Latest release ZIP</td>
+              <td><a class="btn btn-primary btn-sm btn-icon" href="https://mwalajs.biasharabora.com/files/mwalajsv101.zip"><i class="fas fa-download"></i>Download</a></td>
+            </tr>
+            <tr>
+              <td>RAR</td>
+              <td>Latest release RAR</td>
+              <td><a class="btn btn-primary btn-sm btn-icon" href="https://mwalajs.biasharabora.com/files/mwalajsv101.rar"><i class="fas fa-download"></i>Download</a></td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+      <h4 class="text-secondary mt-4">Version 1.0.0</h4>
+      <div class="table-responsive">
+        <table class="table table-bordered table-hover">
+          <thead>
+            <tr>
+              <th>File Type</th>
+              <th>Description</th>
+              <th>Download</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr>
+              <td>EXE</td>
+              <td>Installer (.exe)</td>
+              <td><a class="btn btn-success btn-sm btn-icon" href="https://mwalajs.biasharabora.com/files/mwalaJS_installer.exe"><i class="fas fa-download"></i>Download</a></td>
+            </tr>
+            <tr>
+              <td>ZIP</td>
+              <td>v1.0.0 ZIP</td>
+              <td><a class="btn btn-secondary btn-sm btn-icon" href="https://mwalajs.biasharabora.com/files/mwalajsm.zip"><i class="fas fa-download"></i>Download</a></td>
+            </tr>
+            <tr>
+              <td>RAR</td>
+              <td>v1.0.0 RAR</td>
+              <td><a class="btn btn-secondary btn-sm btn-icon" href="https://mwalajs.biasharabora.com/files/mwalajsm.rar"><i class="fas fa-download"></i>Download</a></td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+    </section>
+    <!-- WhatsApp Support Box -->
+    <div class="whatsapp-box fade-in">
+      <h5><i class="fab fa-whatsapp me-2 text-success"></i>Join the MwalaJS WhatsApp Support Group</h5>
+      <p>Get real-time help from the community and developers.</p>
+      <a href="https://chat.whatsapp.com/F8x1p8R1EhZ5b7RX7PO6dR?mode=r_t" target="_blank" class="btn btn-success btn-icon"><i class="fas fa-external-link-alt"></i>Click here to join</a>
+    </div>
+  </div>
+  <!-- Footer -->
+  <!-- <footer>
+    <div class="container">
+      <p>&copy;  MwalaJS Framework. Built by Hekima Mwala and the MwalaJS Development Team. <i class="fas fa-heart text-danger"></i></p>
+      <p>Contact: <a href="mailto:biasharaboraofficials@biasharabora.com" class="text-white"><i class="fas fa-envelope me-1"></i>biasharaboraofficials@biasharabora.com</a> | <a href="https://mwalajs.biasharabora.com" target="_blank" class="text-white"><i class="fas fa-globe me-1"></i>Official Website</a></p>
+    </div>
+  </footer> -->
+  <!-- Bootstrap JS -->
+  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
+  <!-- Custom JavaScript for Search Functionality -->
+  <script>
+    function performSearch() {
+      const query = document.getElementById('searchInput').value.toLowerCase();
+      const sections = document.querySelectorAll('section, div.help-content');
+      const resultsContainer = document.getElementById('searchResults');
+      resultsContainer.innerHTML = '';
+      resultsContainer.style.display = 'none';
+      if (!query) return;
+      let results = [];
+      sections.forEach(section => {
+        const text = section.textContent.toLowerCase();
+        if (text.includes(query)) {
+          const title = section.querySelector('h2') ? section.querySelector('h2').textContent : 'Match Found';
+          results.push(`<div class="mb-3"><strong>${title}</strong><p>${text.substring(text.indexOf(query) - 50, text.indexOf(query) + 100)}...</p><a href="#${section.id}" class="btn btn-sm btn-primary">Go to Section</a></div>`);
+        }
+      });
+      if (results.length > 0) {
+        resultsContainer.innerHTML = results.join('');
+        resultsContainer.style.display = 'block';
+      } else {
+        resultsContainer.innerHTML = '<p>No results found.</p>';
+        resultsContainer.style.display = 'block';
+      }
+    }
+  </script>
+</body>
+</html>
+<%- include('partials/footer') %>