mwalajs 1.0.4 → 1.0.6

package/README.md

@@ -77,6 +77,59 @@ mwala serve
 ### app.mjs
 Here is an example of the default `app.mjs` file for starting the server:
 
+
+git clone https://github.com/mwala400/mwalajs.git
+![npm version](https://img.shields.io/npm/v/mwalajs)
+![GitHub issues](https://img.shields.io/github/issues/mwala400/mwalajs)
+![License](https://img.shields.io/github/license/mwala400/mwalajs)
+# MwalaJS Framework
+
+MwalaJS is a modern CLI tool and web framework  built on top of Javascript,Node.js and Express.js for powerful and fast backend and frontend development. It simplifies creating MVC applications, managing databases, and generating code scaffolding.
+
+---
+
+## Table of Contents
+
+- [Features](#features)  
+- [Requirements](#requirements)  
+- [Installation](#installation)  
+- [Setup](#setup)  
+- [Usage](#usage)  
+- [CLI Commands](#cli-commands)  
+- [Project Structure](#project-structure)  
+- [Contributing](#contributing)  
+- [License](#license)  
+
+---
+
+## Features
+
+- Lightweight Express.js wrapper with MVC pattern  
+- CLI tool for project scaffolding and database management  
+- Support for multiple databases: MongoDB, MySQL, PostgreSQL, SQLite  
+- Built-in middleware integration (session, cors, helmet, compression)  
+- Easy static file serving and routing  
+- Code generation for models, controllers, routes, views, and middleware  
+- Migration support for database schema changes  
+
+---
+
+## Requirements
+
+- Node.js v18 or higher  
+- npm (comes with Node.js)  
+- Supported databases (MongoDB, MySQL, PostgreSQL, SQLite) installed and configured  
+
+---
+
+## Installation
+
+Install MwalaJS globally via npm:
+
+```bash
+npm install -g mwalajs
+
+
 ```javascript
 import mwalajs from 'mwalajs';
 import { homeRoutes } from './routes/homeRoutes.mjs';
@@ -89,7 +142,7 @@ const __dirname = path.dirname(__filename);
 mwalajs.set('view engine', 'ejs');
 mwalajs.set('views', path.join(__dirname, 'views'));
 
-mwalajs.static(path.join(__dirname, 'public'));
+mwalajs.useStatic(path.join(__dirname, 'public'));
 
 mwalajs.use('/', homeRoutes);
 
@@ -106,7 +159,7 @@ Here is an example of the default `homeRoutes.mjs` file:
 import mwalajs from 'mwalajs';
 import { homeController, Steps, welcome, about } from '../controllers/homeController.mjs';
 
-const router = mwalajs.constructor.Router();
+const router = mwalajs.Router();
 
 router.get('/', homeController.getHomePage);
 router.get('/steps', Steps.getSteps);
@@ -154,8 +207,8 @@ export const about = {
 - `mwala help` | `mwala h`       → Show this help message.
 
 #### Project Management:
-- `mwala create-project <name>`       → Create a new MwalaJS project.
-- `mwala init`                         → Initialize MwalaJS in the current project.
+- `mwala create-project `       → Create a new MwalaJS project Then will request project name.
+- `mwala init`                         → Initialize MwalaJS in the current project I N OLD VERSION .
 
 #### Running the Application:
 - `mwala serve` | `mwala app.mjs` → Start the MwalaJS application.
@@ -188,7 +241,7 @@ Clone the repository from GitHub:
 
 git clone https://github.com/mwala400/mwalajs.git
 
-Using a ZIP, EXE, or RAR File
+Using a ZIP, EXE, or RAR File 
 Download and extract the files from the available compressed format:
 
 ZIP: Extract using WinRAR or 7-Zip.
@@ -208,9 +261,9 @@ Click below to download rar file mwalajs framework :
 
 
 
-2. Setting Up MwalaJS
+2. Setting Up MwalaJS if installed through .exe,zip or rar
 Initialize MwalaJS
-mwala init
+mwala init 
 Creating a New Project
 mwala create-project
 3. Running the Application
@@ -366,8 +419,8 @@ Summary of MwalaJS Commands
     🔹 To execute a command, use:
       mwala 
             
-mwalajsm/ # Root directory
-      mwalajsm/               # Root directory
+mwalajs/ # Root directory
+      mwalajs/               # Root directory
       │── app.mjs             # Main application file
       │── runMigrations.mjs   # Handles database migrations
       │── createProject.mjs   # Script for creating new projects
@@ -447,7 +500,7 @@ Your MwalaJS file structure is well-organized, but to make it more convincing fo
 Here’s a structured breakdown:
 FOLDERS
 
-  -- mwalajsm/              # Root directory  
+  -- mwalajs/              # Root directory  
   │──  app.mjs           # Main application entry point  
   │──  ATTENDANCE/       # Attendance-related files (clarify purpose)  
   │──  bin/              # Executable scripts  
@@ -536,10 +589,3 @@ Click below to download zip file mwalajs framework:
 
 
 Click below to download rar file mwalajs framework :
-
-
-git clone https://github.com/mwala400/mwalajs.git
-![npm version](https://img.shields.io/npm/v/mwalajs)
-![GitHub issues](https://img.shields.io/github/issues/mwala400/mwalajs)
-![License](https://img.shields.io/github/license/mwala400/mwalajs)
-

package/bin/mwala.mjs

@@ -55,7 +55,7 @@ switch (command) {
   case '-v':
   case 'v':
   case '--version':
-    console.log('MwalaJS Version: 1.0.4');
+    console.log('MwalaJS Version: 1.0.6');
     process.exit(0);
 
   case 'create-project':

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mwalajs",
-  "version": "1.0.4",
+  "version": "1.0.6",
   "description": "MwalaJS Framework CLI Tool and Web Framework for Backend and Frontend Development.",
   "type": "module",
   "main": "app.mjs",

package/setupMwalajs.mjs

@@ -1,58 +1,75 @@
-import { execSync } from 'child_process';
-import fs from 'fs-extra';
+import fs from 'fs';
 import path from 'path';
 import os from 'os';
+import readline from 'readline';
+import { execSync } from 'child_process';
 import { fileURLToPath } from 'url';
 
+// Convert __dirname and __filename for ES module
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+
+// Create readline interface
+const rl = readline.createInterface({
+    input: process.stdin,
+    output: process.stdout
+});
+
+async function prompt(question) {
+    return new Promise((resolve) => rl.question(question, resolve));
+}
+
 /**
- * Function to install express in mwalajs and copy the folder into node_modules.
+ * Function to install mwalajs.
+ * - If package.json exists, it proceeds to install.
+ * - If not, it prompts user to auto-create or manually create.
+ * - When auto-creating, it sets "type": "module" and "main": "app.mjs" by default.
  */
 async function setupMwalajs() {
-    const projectDir = process.cwd(); // Get project root directory
-    const mwalajsDir = path.join(projectDir, 'mwalajs'); // mwalajs folder
-    const nodeModulesDir = path.join(projectDir, 'node_modules'); // node_modules
-    const targetMwalajs = path.join(nodeModulesDir, 'mwalajs'); // Destination folder inside node_modules
+    const projectDir = process.cwd();
+    const packageJsonPath = path.join(projectDir, 'package.json');
 
     try {
-        console.log(" Detecting Operating System...");
-        const userOS = os.platform(); // Get user OS (win32, linux, darwin)
-        console.log(` Running on: ${userOS === "win32" ? "Windows" : userOS === "darwin" ? "MacOS" : "Linux"}`);
-
-        // Check if mwalajs exists
-        if (!fs.existsSync(mwalajsDir)) {
-            console.error(" Error: 'mwalajs' folder not found! Please ensure it exists.");
-            return;
-        }
+        console.log("Detecting Operating System...");
+        const userOS = os.platform();
+        console.log(`Running on: ${userOS === "win32" ? "Windows" : userOS === "darwin" ? "MacOS" : "Linux"}`);
 
-        console.log(" Installing 'dependencies' inside 'mwalajs'...");
-        execSync('npm install express --prefix mwalajs', { stdio: 'inherit' });
+        if (!fs.existsSync(packageJsonPath)) {
+            console.log("No package.json found in the current directory.");
+            const choice = await prompt("Do you want to create one now? (y/n): ");
 
-        // Ensure node_modules exists
-        if (!fs.existsSync(nodeModulesDir)) {
-            fs.mkdirSync(nodeModulesDir);
-        }
+            if (choice.toLowerCase() === 'y') {
+                console.log("Initializing package.json...");
+                execSync('npm init -y', { stdio: 'inherit' });
 
-        // Delete existing mwalajs in node_modules if present
-        if (fs.existsSync(targetMwalajs)) {
-            console.log(" Removing old 'mwalajs' from node_modules...");
-            fs.removeSync(targetMwalajs);
+                // Modify package.json with defaults
+                const pkg = JSON.parse(fs.readFileSync(packageJsonPath, 'utf-8'));
+                pkg.type = "module";
+                pkg.main = "app.mjs";
+                fs.writeFileSync(packageJsonPath, JSON.stringify(pkg, null, 2));
+                console.log('package.json created with type: "module" and main: "app.mjs"');
+            } else {
+                console.log("Please create a package.json file manually using `npm init`.");
+                rl.close();
+                return;
+            }
         }
 
-        console.log(" Copying 'mwalajs' to 'node_modules'...");
-        fs.copySync(mwalajsDir, targetMwalajs, { overwrite: true });
-
-        console.log(` Successfully installed 'dependencies' and moved 'mwalajs' to:`);
-        console.log(` ${targetMwalajs}`);
+        console.log("Installing mwalajs in current directory...");
+        execSync('npm install mwalajs', { stdio: 'inherit' });
+        console.log("mwalajs installed successfully.");
 
     } catch (error) {
-        console.error(" Error:", error.message);
+        console.error("Error:", error.message);
+    } finally {
+        rl.close();
     }
 }
 
-// Export the function so it can be used anywhere
+// Export the function
 export { setupMwalajs };
 
-// Prevent auto-execution unless explicitly called (ES Module Fix)
+// Only execute if run directly
 if (import.meta.url === `file://${process.argv[1]}`) {
     setupMwalajs();
 }

package/views/index.ejs

@@ -1,227 +1,494 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <!-- Title of the page for search engines -->
-  <title>MwalaJS</title>
-  
-  <!-- Meta description for better SEO ranking -->
-  <meta name="description" content="Get detailed help and documentation for MwalaJS framework. Learn how to use MwalaJS commands, structure, installation, and more.">
-  
-  <!-- Meta keywords for SEO -->
-  <meta name="keywords" content="MwalaJS, MVC framework, MwalaJS installation, MwalaJS commands, MwalaJS documentation, web development framework, JavaScript framework, full-stack development">
-  
-  <!-- Author information -->
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>MwalaJS Framework Documentation</title>
+
+  <!-- Bootstrap -->
+  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
+
+  <!-- Meta Info for SEO & Social Sharing -->
+  <meta name="description" content="MwalaJS - Lightweight MVC JavaScript framework for full-stack web apps.">
+  <meta name="keywords" content="MwalaJS, MVC, Node.js framework, JavaScript framework, documentation">
   <meta name="author" content="Hekima Ambalile Mwala">
-  
-  <!-- Open Graph meta tags for social media optimization -->
-  <meta property="og:title" content="MwalaJS - Help | Documentation for MVC Framework">
-  <meta property="og:description" content="Get detailed help and documentation for MwalaJS framework. Learn how to use MwalaJS commands, structure, installation, and more.">
-  <meta property="og:image" content="path-to-image.jpg"> <!-- Add your image URL for social media previews -->
-  <meta property="og:url" content="https://yourwebsite.com/help"> <!-- Add your actual website URL here -->
-  
-  <!-- Twitter meta tags for better visibility on Twitter -->
-  <meta name="twitter:title" content="MwalaJS - Help | Documentation for MVC Framework">
-  <meta name="twitter:description" content="Get detailed help and documentation for MwalaJS framework. Learn how to use MwalaJS commands, structure, installation, and more.">
-  <meta name="twitter:image" content="path-to-image.jpg">
-  <meta name="twitter:card" content="summary_large_image">
-  <meta property="og:url" content="https://mwalajs.biasharabora.com">
+
+  <!-- Open Graph (for social media cards) -->
+  <meta property="og:title" content="MwalaJS - MVC Framework">
+  <meta property="og:description" content="Documentation for MwalaJS framework including installation, commands, and structure.">
   <meta property="og:image" content="https://your-website-url.com/images/mwala-logo.png">
-  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
- 
-  <!-- Favicon for the website -->
-  <link rel="icon" href="favicon.ico" type="image/x-icon">
-  
-  <!-- Link to external stylesheet -->
-  <link rel="stylesheet" href="styles.css">
- 
- 
-  <style>
+  <meta property="og:url" content="https://mwalajs.biasharabora.com">
 
-    
-    body {
-      font-family: Arial, sans-serif;
-      margin: 0;
-      padding: 0;
-      background-color: #f4f4f4;
-    }
+  <!-- Twitter Cards -->
+  <meta name="twitter:card" content="summary_large_image">
+
+  <!-- Favicon -->
+  <link rel="icon" href="favicon.ico" type="image/x-icon" />
 
-    h1 {
-      text-align: center;
-      color: #333;
+  <!-- Custom Styles -->
+  <style>
+    body {
+      background-color: #f8f9fa;
+      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+      line-height: 1.6;
     }
 
-    .container {
-      max-width: 1200px;
-      margin: 0 auto;
-      padding: 20px;
+    h1, h2 {
+      color: #0d6efd;
     }
 
     .help-content {
-      background-color: #fff;
-      padding: 20px;
+      background-color: #ffffff;
+      padding: 2rem;
       border-radius: 8px;
-      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+      box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
+      margin-top: 2rem;
     }
 
     pre {
-      background-color: #2d2d2d;
-      color: #f4f4f4;
-      padding: 20px;
+      background-color: #1e1e1e;
+      color: #f1f1f1;
+      padding: 1rem;
       border-radius: 8px;
-      white-space: pre-wrap;
-      word-wrap: break-word;
+      overflow-x: auto;
     }
 
-    .command {
-      font-weight: bold;
-      color: #5c5c5c;
+    .nav-link {
+      color: white !important;
     }
 
-    @media (max-width: 768px) {
-      body {
-        font-size: 14px;
-      }
+    .table thead {
+      background-color: #f1f1f1;
+    }
 
-      .container {
-        padding: 10px;
-      }
+    footer {
+      background-color: #212529;
+      color: #ffffff;
+      padding: 1rem 0;
+      margin-top: 3rem;
+    }
 
-      pre {
-        padding: 15px;
-      }
+    .whatsapp-box {
+      background-color: #d1e7dd;
+      padding: 1rem;
+      border-left: 5px solid #198754;
+      border-radius: 6px;
+      margin-top: 2rem;
+    }
 
-      h1 {
-        font-size: 1.5em;
-      }
+    .whatsapp-box a {
+      color: #198754;
+      font-weight: bold;
     }
 
-    @media (max-width: 480px) {
+    @media (max-width: 768px) {
       h1 {
-        font-size: 1.2em;
+        font-size: 1.5rem;
       }
 
       pre {
-        padding: 10px;
+        font-size: 0.9rem;
       }
     }
   </style>
-  <link rel="stylesheet" href="styles.css">
-  <!-- Structured data for better search engine understanding (JSON-LD) -->
-  <script type="application/ld+json">
-    {
-      "@context": "https://schema.org",
-      "@type": "WebPage",
-      "name": "MwalaJS Help Documentation",
-      "description": "Get detailed help and documentation for MwalaJS framework. Learn how to use MwalaJS commands, structure, installation, and more.",
-      "url": "https://mwalajs.biasharabora.com/setups", 
-      "publisher": {
-        "@type": "Organization",
-        "name": "MwalaJS"
-      }
-    }
-  </script>
-  
 </head>
 <body>
-  <!-- Navbar for easy navigation -->
+
+  <!-- Navigation -->
   <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
-    <div class="container-fluid">
-      <a class="navbar-brand" href="/">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">
+    <div class="container">
+      <a class="navbar-brand" href="#">MwalaJS</a>
+      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
         <span class="navbar-toggler-icon"></span>
       </button>
       <div class="collapse navbar-collapse" id="navbarNav">
-        <ul class="navbar-nav">
-          <li class="nav-item">
-            <a class="nav-link active" href="steps#overview">Overview</a>
-          </li>
-          <li class="nav-item">
-            <a class="nav-link" href="steps#installation">Installation</a>
-          </li>
-          <li class="nav-item">
-            <a class="nav-link" href="steps#commands">Commands</a>
-          </li>
-          <li class="nav-item">
-            <a class="nav-link" href="steps#structure">Project Structure</a>
-          </li>
-          <li class="nav-item">
-            <a class="nav-link" href="steps#example">Example Application</a>
-          </li>
-          <li class="nav-item">
-            <a class="nav-link" href="steps#conclusion">Conclusion</a>
-          </li>
+        <ul class="navbar-nav ms-auto">
+          <li class="nav-item"><a class="nav-link" href="steps#overview">Overview</a></li>
+          <li class="nav-item"><a class="nav-link" href="steps#installation">Installation</a></li>
+          <li class="nav-item"><a class="nav-link" href="steps#commands">Commands</a></li>
+          <li class="nav-item"><a class="nav-link" href="steps#structure">Structure</a></li>
+          <li class="nav-item"><a class="nav-link" href="steps#example">Examples</a></li>
+          <li class="nav-item"><a class="nav-link" href="/about">About</a></li>
         </ul>
       </div>
     </div>
   </nav>
 
+  <!-- Main Content -->
   <div class="container">
-    <h1>MwalaJS Framework Help</h1>
+    <h1 class="text-center my-4">MwalaJS Framework Documentation</h1>
+
     <div class="help-content">
-      <p>Available commands for MwalaJS framework:</p>
+      <h2>Available Commands</h2>
       <pre>
-. <span class="command">mwala create-project &lt;&gt;</span> - Create a new MVC project. Example: mwala create myapp
-. <span class="command">mwala app.mjs</span> - Run the app.mjs file to start your application.
-. <span class="command">Database Operations:&gt;</span> - Database commands for various database tasks:
-- mwala create-db            → Create the database specified in the .env file.        
-- mwala create-table <name>  → Create a specific database table.
-- mwala drop-table <name>    → Drop a specific database table.
-- mwala migrate all          → Run all pending migrations.
-- mwala rollback all         →to undo  migration
-4. <span class="command">mwala generate &lt;model/controller/route/view&gt; &lt;name&gt;</span> - Generate various MVC components (models, controllers, routes, and views).
-Code Generation:
-- mwala generate model <name>       → Create a new model.
-- mwala generate controller <name>  → Create a new controller.
-- mwala generate route <name>       → Create a new route.
-- mwala generate view <name>        → Create a new view file.
-- mwala generate midware <name>     → Create a new middleware.
-. <span class="command">mwala serve</span> - Start the server (similar to running "mwala app.mjs" or "node app.mjs").
-. <span class="command">mwala help</span> - Show available commands (this command).
-. <span class="command">mwala create-table &lt;table_name&gt;</span> - Create a table in the database. Example: mwala create-table users
-. <span class="command">mwala drop-table &lt;table_name&gt;</span> - Drop a table from the database. Example: mwala drop-table users
-. <span class="command">mwala migrate all</span> - Run migrations on the database. Example: mwala migrate
-. <span class="command">mwala rollback all</span> - Rollback the last migration. Example: mwala rollback
+<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;
+  - mwala generate controller &lt;name&gt;
+  - mwala generate route &lt;name&gt;
+  - mwala generate view &lt;name&gt;
+  - mwala generate midware &lt;name&gt;
+
+<span class="command">mwala serve</span>                         ? Start local server.
+<span class="command">mwala help</span>                          ? List all available commands.
       </pre>
-     
-    <section id="release">
-      <br> <h2 class="section-title">1. VERSION RELEASE</h2>
-        <p>Click below to download the installer For Mwalajs framework:</p>
-        <br><a class="btn" href="https://mwalajs.biasharabora.com/files/mwalaJS_installer.exe" download>Download MwalaJS COMMAND SHELL (CLS) download .exe file here  </a>
-       <br> <p>Click below to download zip file mwalajs framework:</p>
-       <br> <a class="btn" href="https://mwalajs.biasharabora.com/files/mwalajsm.zip" download>Download MwalaJS   mwalajs.zip v1.0.0</a>
-       <br> <p>Click below to download rar file mwalajs framework :</p>
-      <br>  <a class="btn" href="https://mwalajs.biasharabora.com/files/mwalajsm.rar" download>Download MwalaJS   mwalajs.rar v1.0.0</a>
+    </div>
+
+
+<div class="container my-5">
+    <h1 class="mb-4 text-primary">MwalaJS Framework</h1>
+    <p><strong>MwalaJS</strong> is a lightweight and modular JavaScript framework designed for building scalable server-side applications using modern Node.js features.</p>
 
+    <hr />
+
+    <h2 class="mt-4">Installation </h2>
+    <p>Install MwalaJS globally to use CLI tools:</p>
+    <pre><code class=" p-3 rounded">npm install -g mwalajs</code></pre>
+    <p>If you're using it in a specific project, install locally:</p>
+    <pre><code class="p-3 rounded">npm install mwalajs</code></pre>
+    <p><strong>Note:</strong> In case of errors regarding missing <code>fs-extra</code>, you can install it manually:</p>
+    <pre><code class=" p-3 rounded">npm install -g fs-extra</code></pre>
+    <p><strong>Note 2:</strong>  <code class=" p-3 rounded"> NOW MWALAJS IS ONE OF NPM PACKAGE NO NEED TO DOWNLOAD .ZIP, .RAR OR .EXE FILES <br> 
+also no need to run mwala init in version 1.0.4 or above
 <br>
+before any create a .json file by running npm init
+make sure in your .json file you have   "dependencies": {
+    "mwalajs": "^1.0.5"
+  }
+and "type": "module", these are more important to be set before run mwala serve 
+ </code>, you can install it BY npm install -g mwalajs:</p>
+
+    <hr />
+
+    <h2 class="mt-4"> Usage</h2>
+    <p>Once installed globally, you can use the CLI command:</p>
+    <pre><code class=" p-3 rounded">mwala</code></pre>
+    <p>Or check the version:</p>
+    <pre><code class=" p-3 rounded">mwala -v</code></pre>
 
-</section>
+    <hr />
 
+    <h2 class="mt-4">??? CLI Commands</h2>
+    <table class="table table-bordered table-striped">
+      <thead class="table-primary">
+        <tr>
+          <th>Command</th>
+          <th>Description</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr>
+          <td><code>mwala create-project</code></td>
+          <td>Create a new project using MwalaJS</td>
+        </tr>
+        <tr>
+          <td><code>npm init </code></td>
+          <td>initialization of .json file in the project</td>
+        </tr>
+        <tr>
+          <td><code>mwala serve</code></td>
+          <td>Run the project in development mode</td>
+        </tr>
+        <tr>
+          <td><code>mwala help</code></td>
+          <td>Display help instructions</td>
+        </tr>
+      </tbody>
+    </table>
+
+    <hr />
+
+    <h2 class="mt-4">?? Security Notes</h2>
+    <ul>
+      <li>Be sure to keep your dependencies updated.</li>
+      <li>Sanitize user inputs.</li>
+      <li>Run <code>npm audit</code> regularly.</li>
+    </ul>
+
+    <hr />
+
+    <h2 class="mt-4"> License</h2>
+    <p>MIT License © 2025 Hekima Mwala and MwalaJS Team</p>
+  </div>
+
+    <!-- Download Section -->
+    <section class="mt-5">
+      <h2 class="text-primary">MwalaJS Release Downloads for all versions below version 1.0.2 download .exe,.zip or .rar in latest versions it is simply run npm install -g mwalajs and npm install mwalajs</h2>
+
+      <div class="table-responsive">
+        <h4 class="text-success">Version 1.0.1 </h4>
+        <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" href="https://mwalajs.biasharabora.com/files/mwalajsv101.zip">Download</a></td>
+            </tr>
+            <tr>
+              <td>RAR</td>
+              <td>Latest release RAR</td>
+              <td><a class="btn btn-primary btn-sm" href="https://mwalajs.biasharabora.com/files/mwalajsv101.rar">Download</a></td>
+            </tr>
+          </tbody>
+        </table>
+
+        <h4 class="text-secondary mt-4">Version 1.0.0</h4>
+        <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" href="https://mwalajs.biasharabora.com/files/mwalaJS_installer.exe">Download</a></td>
+            </tr>
+            <tr>
+              <td>ZIP</td>
+              <td>v1.0.0 ZIP</td>
+              <td><a class="btn btn-secondary btn-sm" href="https://mwalajs.biasharabora.com/files/mwalajsm.zip">Download</a></td>
+            </tr>
+            <tr>
+              <td>RAR</td>
+              <td>v1.0.0 RAR</td>
+              <td><a class="btn btn-secondary btn-sm" href="https://mwalajs.biasharabora.com/files/mwalajsm.rar">Download</a></td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+    </section>
+
+    <!-- WhatsApp Support Box -->
+    <div class="whatsapp-box">
+      <h5>Join the MwalaJS WhatsApp Support Group</h5>
+      <a href="https://chat.whatsapp.com/F8x1p8R1EhZ5b7RX7PO6dR?mode=r_t" target="_blank">Click here to join</a>
     </div>
   </div>
-  <ul >
-    <li c>
-      <a class="link active" href="/welcome">MWALAJS FRAMEWORK OVERVIEW</a>
-    </li>
-    <li >
-      <a href="/steps">steps  to get started</a>
+
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>MwalaJS Installation Guide</title>
+
+ 
+</head>
+<body>
+
+  <h1>MwalaJS Installation Guide</h1>
+<iframe width="560" height="315" src="https://www.youtube.com/embed/Zzj0WnvDET4?si=NsgUZDlF0uRuqe1P" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
+  <p><strong>Version:</strong> Latest<br>
+  <strong>Official Website:</strong> <a href="https://mwalajs.biasharabora.com" target="_blank">https://mwalajs.biasharabora.com</a></p>
+
+  <h2> What You’ll Need</h2>
+  <ul>
+    <li>A computer (Windows preferred)</li>
+    <li>Internet connection</li>
+    <li>Basic computer knowledge (copy, paste, extracting files)</li>
+    <li><a href="https://nodejs.org" target="_blank">Node.js installed</a></li>
+  </ul>
+
+  <h2> Step-by-Step Installation Instructions</h2>
+
+  <h3>STEP 1: Download MwalaJS</h3>
+  <ol>
+    <li>Open your browser and go to: <a href="https://mwalajs.biasharabora.com" target="_blank">https://mwalajs.biasharabora.com</a></li>
+    <li>Choose one of the files:
+      <ul>
+        <li><code>MwalaJS.zip</code></li>
+        <li><code>MwalaJS.rar</code></li>
+      </ul>
     </li>
-    <li class="nav-item">
-      <a href="steps#commands">Commands</a>
+    <li>Download and save it to your computer (usually goes to your <strong>Downloads</strong> folder).</li>
+  </ol>
+
+  <h3>STEP 2: Extract the Downloaded File</h3>
+  <ol>
+    <li>Go to your <strong>Downloads</strong> folder.</li>
+    <li>Right-click on the downloaded file:
+      <ul>
+        <li>If ZIP ? choose <strong>Extract All</strong></li>
+        <li>If RAR ? open with <strong>WinRAR</strong> or <strong>7-Zip</strong></li>
+      </ul>
     </li>
-    <li class="nav-item">
-      <a href="steps#structure">Project Structure</a>
+    <li>You’ll get a folder named <code>mwalajs</code>. Copy or cut this folder.</li>
+  </ol>
+
+  <h3>STEP 3: Move to Program Files</h3>
+  <ol>
+    <li>Open <strong>C:\Program Files</strong> on your PC.</li>
+    <li>Paste the <code>mwalajs</code> folder inside.</li>
+    <li>If asked for administrator permission, click <strong>Continue</strong>.</li>
+  </ol>
+
+  <h3>STEP 4: Add to Environment Variable</h3>
+  <div class="note">This step allows you to run <code>mwala</code> command from any terminal window.</div>
+  <ol>
+    <li>Press <strong>Windows + S</strong>, type <em>environment variables</em>, and click on <strong>Edit the system environment variables</strong>.</li>
+    <li>In the new window, click <strong>Environment Variables</strong>.</li>
+    <li>Under <strong>System variables</strong>, select <code>Path</code> and click <strong>Edit</strong>.</li>
+    <li>Click <strong>New</strong>, then paste the path:
+      <pre>C:\Program Files\mwalajs</pre>
     </li>
-    <li class="nav-item">
-      <a href="steps#example">Example Application</a>
+    <li>Click <strong>OK</strong> on all windows to save changes.</li>
+  </ol>
+
+  <h3>STEP 5: Test the Installation</h3>
+  <ol>
+    <li>Open <strong>Command Prompt</strong> (Windows + R ? type <code>cmd</code> ? Enter).</li>
+    <li>Type the following command and press Enter:
+      <pre>mwala</pre>
     </li>
-    <li class="nav-item">
-      <a href="/about">about</a>
+    <li>If installed correctly, you’ll see a welcome message or command list.</li>
+  </ol>
+
+  <h2> Extra Tips</h2>
+  <ul>
+    <li>If <code>mwala</code> is not recognized:
+      <ul>
+        <li>Close and reopen your terminal.</li>
+        <li>Double-check that you added the correct path to the environment variable.</li>
+      </ul>
     </li>
+    <li>Make sure the <code>mwalajs</code> folder contains a file like <code>mwala.mjs</code>.</li>
+    <li>Ensure Node.js is installed properly.</li>
   </ul>
-</body>
-</html>
 
+  <h2>Troubleshooting</h2>
+  <table>
+    <thead>
+      <tr>
+        <th>Issue</th>
+        <th>Solution</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <td><code>mwala</code> is not recognized</td>
+        <td>Recheck environment path, restart CMD</td>
+      </tr>
+      <tr>
+        <td>File won’t extract</td>
+        <td>Install <a href="https://www.7-zip.org" target="_blank">7-Zip</a> or <a href="https://www.rarlab.com" target="_blank">WinRAR</a></td>
+      </tr>
+      <tr>
+        <td>Node.js not found</td>
+        <td><a href="https://nodejs.org" target="_blank">Download from Node.js official site</a></td>
+      </tr>
+    </tbody>
+  </table>
+
+<h3>LINUX INSTALLATION (Ubuntu / Debian / Fedora / Others)</h3>
+
+<div class="note">Make sure Node.js is already installed on your system before you begin.</div>
+
+<ol>
+  <li><strong>Download MwalaJS:</strong>
+    <ul>
+      <li>Visit: <a href="https://mwalajs.biasharabora.com" target="_blank">https://mwalajs.biasharabora.com</a></li>
+      <li>Select and download either:
+        <ul>
+          <li><code>MwalaJS.zip</code></li>
+          <li><code>MwalaJS.tar.gz</code></li>
+        </ul>
+      </li>
+    </ul>
+  </li>
+
+  <li><strong>Open Terminal and go to the Downloads folder:</strong>
+    <pre>cd ~/Downloads</pre>
+  </li>
+
+  <li><strong>Extract the downloaded file:</strong>
+    <ul>
+      <li>If ZIP:
+        <pre>unzip MwalaJS.zip</pre>
+      </li>
+      <li>If TAR.GZ:
+        <pre>tar -xvzf MwalaJS.tar.gz</pre>
+      </li>
+    </ul>
+  </li>
+
+  <li><strong>Move the extracted folder to a system directory:</strong>
+    <pre>sudo mv mwalajs /opt/</pre>
+  </li>
+
+  <li><strong>Make the main file executable (if it's a script):</strong>
+    <pre>sudo chmod +x /opt/mwalajs/mwala.mjs</pre>
+  </li>
+
+  <li><strong>Create a system-wide shortcut (symlink):</strong>
+    <pre>sudo ln -s /opt/mwalajs/mwala.mjs /usr/local/bin/mwala</pre>
+  </li>
+
+  <li><strong>Test the installation:</strong>
+    <pre>mwala</pre>
+    <p>If everything is set up correctly, you’ll see a welcome message or command list.</p>
+  </li>
+</ol>
 
+<h4>Troubleshooting</h4>
+<table>
+  <thead>
+    <tr><th>Issue</th><th>Solution</th></tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td><code>mwala: command not found</code></td>
+      <td>Check if the symlink is correct: <code>ls -l /usr/local/bin/mwala</code></td>
+    </tr>
+    <tr>
+      <td>Node.js not installed</td>
+      <td>Install Node.js using:
+        <pre>sudo apt install nodejs npm</pre>
+      </td>
+    </tr>
+    <tr>
+      <td>Permission denied</td>
+      <td>Try using <code>sudo</code> or ensure the file has executable permission</td>
+    </tr>
+  </tbody>
+</table>
 
+  <footer>
+    <h3>Need Help?</h3>
+    <p>Feel free to contact the developer or support:</p>
+    <ul>
+      <li>Email: <a href="mailto:biasharaboraofficials@biasharabora.com">biasharaboraofficials@biasharabora.com</a></li>
+      <li>Website: <a href="https://mwalajs.biasharabora.com" target="_blank">https://mwalajs.biasharabora.com</a></li>
+    </ul>
+  </footer>
+
+  
+  <!-- Footer -->
+  <footer class="text-center">
+    <div class="container">
+      &copy; 2025 MwalaJS Framework. Built by MwalaJS Development Team.
+    </div>
+  </footer>
+
+  <!-- Bootstrap JS -->
+  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
+</body>
+</html>