stuff

- Added stats cards to display active, completed, overdue, and due-today tasks on the dashboard.
- Implemented search functionality to filter tasks in real-time based on user input.
- Introduced quick-pick date buttons for easier task date selection.
- Updated task rendering logic to handle empty states for task lists.
- Improved overall user interface with new CSS styles for stat cards and buttons.

chore: Update environment variables and backend error handling

- Fixed formatting in the .env file for consistency.
- Enhanced error handling in the backend API for better debugging.

feat: Revamp frontend pages with new features and pricing sections

- Redesigned the index.html page to include a hero section and feature highlights.
- Created a new features page with dynamic loading of features from JSON.
- Implemented a pricing page that loads plans from JSON and highlights the featured plan.
- Added support and FAQ sections with dynamic content loading and contact form functionality.
- Introduced JSON files for FAQs, features, and pricing to allow easy updates without code changes.

backend/.env

@@ -1,2 +1,3 @@
 PORT = 3001
-MONGO_URI = "mongodb+srv://timmybee:EMqczsTr1oYPBtCd@cluster0.dombm2a.mongodb.net/?appName=Cluster0"
+MONGO_URI = "mongodb+srv://timmybee:EMqczsTr1oYPBt@cluster0.dombm2a.mongodb.net/?appName=Cluster0"
+APP_URI = "http://localhost:3001"

backend/index.js

@@ -7,84 +7,178 @@ const port = 3001;
 const app = express();
 
 app.use(express.json());
+app.use(cors());
 
-app.use(cors("*"));
-
-// app.get("/test", async (req, res) => {
-//   res.send("Hello World!");
-// });
-
-const tasks = [
-  {
-    id: 1,
-    completed: false,
-    title: "Buy groceries for the week",
-    description: "Pick up vegetables, fruits, milk, eggs, and bread from the supermarket.",
-    dueDate: "14/03/2026",
-    dateCreated: new Date(Date.now()).toLocaleDateString("en-AU")
-  },
-  {
-    id: 2,
-    completed: false,
-    title: "Clean the apartment",
-    description: "Vacuum the floors, wipe kitchen surfaces, and take out the trash.",
-    dueDate: "16/03/2026",
-    dateCreated: new Date(Date.now()).toLocaleDateString("en-AU")
-  },
-  {
-    id: 3,
-    completed: false,
-    title: "Call the dentist for appointment",
-    description: "Book a routine checkup and confirm available time slots for next week.",
-    dueDate: "17/03/2026",
-    dateCreated: new Date(Date.now()).toLocaleDateString("en-AU")
-  },
-  {
-    id: 4,
-    completed: true,
-    title: "Do laundry and fold clothes",
-    description: "Wash dark and light loads separately, then fold and organize clean clothes.",
-    dueDate: "21/03/2026",
-    dateCreated: new Date(Date.now()).toLocaleDateString("en-AU")
-  }
-];
-
-app.get("/api/tasks", async (req, res) => {
+(async () => {
   try {
-    res.json(tasks);
-  }
-  catch (error) {
-    console.error(`Error: ${error}`)
-    res.status(500).json({ message: "Error getting tasks" })
-  }
-});
+    mongoose.set("autoIndex", false);
 
-app.post("/api/tasks/todo", async (req, res) => {
+    await mongoose.connect(process.env.MONGO_URI);
+    console.log("✅ MongoDB Connected");
+
+    await Task.syncIndexes();
+    console.log("✅ Indexes created");
+
+    app.listen(port, () => {
+      console.log(`✅ To Do App listening on port ${port}`);
+    });
+  } catch (error) {
+    console.error(`Startup Error! ${error}`);
+  }
+})();
+
+// Task Schema
+const taskSchema = new mongoose.Schema({
+  title: { type: String, required: true },
+  completed: { type: Boolean, required: true, default: false },
+  description: { type: String, required: true },
+  dueDate: { type: Date, required: true },
+  dateCreated: { type: Date, required: true, default: new Date() }
+})
+
+taskSchema.index({ dueDate: 1 })
+taskSchema.index({ dateCreated: 1 })
+
+const Task = mongoose.model("Task", taskSchema);
+
+// this api route gets all the tasks from our database.
+// if the request included a query string, use that for our sorting.
+app.get('/api/tasks', async (req, res) => {
   try {
-    const { title, description, dueDate } = req.body;
+    const { sortBy } = req.query; // destructs the sortBy from the query string. e.g. ?sortBy=dueDate or ?sortBy=dateCreated
+    let sortOption = {}; // create an empty sort object for the database query
 
-    const newTask = {
-      id: tasks.length + 1,
-      completed: false,
-      title, title,
-      description, description,
-      dueDate, dueDate,
-      dateCreated: new Date(Date.now()).toLocaleDateString("en-AU"),
-    };
-
-    tasks.push(newTask);
-
-    res.json(newTask);
-
-    res.status(201).json(newTask);
+    if (sortBy === 'dueDate') {
+      sortOption = { dueDate: 1 }; // if the sortBy query string is dueDate, set the sortOption to dueDate and set the order to ascending (1)
+    } else if (sortBy === 'dateCreated') {
+      sortOption = { dateCreated: 1 }; // if the sortBy query string is dateCreated, set the sortOption to dateCreated and set the order to ascending (1)
     }
-  catch (error) {
-    console.error(`Error: ${error}`)
-    res.status(500).json({ message: "Error creating task" })
+
+    const tasks = await Task.find({}).sort(sortOption); // fetch all task documents and sort them using sortOption
+
+    if (!tasks) {
+      // return the following if the query failed to return a value
+      return res.status(404).json({ message: "Tasks not found!" });
+    }
+
+    res.json(tasks); // send a json response with the task objects
+  } catch (error) {
+    // if there are any errors, do the following
+    console.error("Error:", error);
+    res.status(500).json({ message: "Error grabbing tasks!" });
+
+  }
+});
+
+// this api route takes post requests to save a new MongoDB document, aka, our task
+app.post('/api/tasks/todo', async (req, res) => {
+  try {
+    const { title, description, dueDate } = req.body; //destructures the request body
+    const taskData = { title, description, dueDate }; // creating the object to be used for creating the task
+    const createTask = new Task(taskData); // instantiates a new Task document/model instance using the taskData object values
+    const newTask = await createTask.save(); // this saves the new document to MongoDB using the Task model/schema.
+
+    res.json({ task: newTask, message: "New task created successfully!" }); // if there were no error above, send a response where the body is an JSON object.
+
+  } catch (error) {
+    // if there are any errors, do the following
+    console.error("Error:", error);
+    res.status(500).json({ message: "Error creating the task!" });
   }
 
 });
 
-app.listen(port, () => {
-  console.log(`To Do App listening on port ${port}`);
+// this api route marks a task as complete using its id.
+
+app.patch('/api/tasks/complete/:id', async (req, res) => {
+  try {
+    const { completed } = req.body; // expected boolean value coming from the frontend
+    const taskId = req.params.id; // grab the task id from the URL params
+    const completedTask = await Task.findByIdAndUpdate(taskId, { completed }, { new: true }); // update completed status and return updated document
+
+    if (!completedTask) {
+      // return 404 if no task matches the provided id
+      return res.status(404).json({ message: "Task not found!" });
+
+    }
+    // return updated task document and confirmation message
+    res.json({ task: completedTask, message: "Task set to 'Complete'" });
+
+  } catch (error) {
+    // return 500 if database update fails
+    console.error("Error:", error);
+    res.status(500).json({ message: "Error completing the task!" });
+
+  }
+});
+
+// this api route marks a task as not complete using its id.
+
+app.patch('/api/tasks/notComplete/:id', async (req, res) => {
+
+  try {
+    const { completed } = req.body; // expected boolean value coming from the frontend
+    const taskId = req.params.id; // grab the task id from the URL params
+    const taskNotComplete = await Task.findByIdAndUpdate(taskId, { completed }, { new: true }); // update completed status and return updated document
+
+    if (!taskNotComplete) {
+      // return 404 if no task matches the provided id
+      return res.status(404).json({ message: "Task not found!" });
+    }
+    // return updated task document and confirmation message
+    res.json({ task: taskNotComplete, message: "Task set to 'Not Complete'" });
+  } catch (error) {
+    // return 500 if database update fails
+    console.error("Error:", error);
+    res.status(500).json({ message: "Error making the task NOT complete!" });
+  }
+});
+
+// this api route deletes a task by id.
+app.delete('/api/tasks/delete/:id', async (req, res) => {
+  try {
+    const taskId = req.params.id; // grab the task id from the URL params
+    const deletedTask = await Task.findByIdAndDelete(taskId); // delete the matching task document
+
+    if (!deletedTask) {
+      // return 404 if no task matches the provided id
+      return res.status(404).json({ message: "Task not found!" });
+    }
+
+    // return deleted task document and confirmation message
+    res.json({ task: deletedTask, message: "Task deleted successfully!" });
+
+  } catch (error) {
+    // return 500 if deletion fails
+    console.error("Error:", error);
+    res.status(500).json({ message: "Error deleting the task!" });
+
+  }
+});
+
+// this api route updates a task's editable fields by id.
+
+app.put('/api/tasks/update/:id', async (req, res) => {
+
+  try {
+    const taskId = req.params.id; // grab the task id from the URL params
+    const { title, description, dueDate } = req.body;  // extract updated fields from request body
+    const taskData = { title, description, dueDate }; // build the update object
+    const updatedTask = await Task.findByIdAndUpdate(taskId, taskData, { new: true }); // apply update and return updated document
+
+    if (!updatedTask) {
+      // return 404 if no task matches the provided id
+      return res.status(404).json({ message: "Task not found!" });
+    }
+
+    // return updated task document and confirmation message
+    res.json({ task: updatedTask, message: "Task updated successfully!" });
+
+  } catch (error) {
+    // return 500 if update fails
+    console.error('Error:', error);
+    res.status(500).json({ message: "Error updating the task!" });
+
+  }
+
 });

backend/package.json

@@ -4,6 +4,7 @@
   "description": "",
   "main": "index.js",
   "scripts": {
+    "start": "node index.js",
     "test": "echo \"Error: no test specified\" && exit 1"
   },
   "keywords": [],

frontend/css/styles.css

@@ -24,15 +24,10 @@
     radial-gradient(ellipse 600px 500px at 55% 5%, rgba(177, 98, 134, 0.18), transparent),
     radial-gradient(ellipse 500px 400px at 75% 20%, rgba(104, 157, 106, 0.12), transparent),
     linear-gradient(160deg, #1d2021 0%, #282828 45%, #32302f 100%);
-
   min-height: 90vh;
-
   height: auto;
-
   background-size: cover;
-
   background-position: center center;
-
   background-repeat: no-repeat;
 }
 
@@ -56,37 +51,36 @@ footer {
   color: var(--fg);
 }
 
-.nav-link:hover {
+.nav-link:hover,
+.navbar-nav .nav-link.active,
+.navbar-nav .nav-link.show {
   color: var(--accent);
 }
 
+.navbar-nav .nav-link.active {
+    color: white;
+}
+
 .navbar-toggler {
   border: none !important;
-
   box-shadow: none !important;
 }
 
 .btn-primary {
   background-color: var(--secondary);
-
   color: var(--fg);
-
   border-color: transparent;
 }
 
 .btn-primary:hover {
   background-color: var(--secondary-hover);
-
   color: var(--primary);
-
   border-color: transparent;
 }
 
 form a {
   text-decoration: none;
-
   color: var(--fg);
-
   transition: 0.2s ease-in-out;
 }
 
@@ -109,3 +103,29 @@ form a:hover {
 textarea {
   resize: none;
 }
+
+.stat-card {
+  background-color: rgba(40, 40, 40, 0.6);
+  border-radius: 0.5rem;
+  padding: 1rem;
+  text-align: center;
+  color: var(--fg);
+}
+
+.stat-card .stat-value {
+  font-size: 2rem;
+  font-weight: 700;
+  line-height: 1;
+  color: var(--accent);
+}
+
+.stat-card .stat-label {
+  font-size: 0.85rem;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  opacity: 0.7;
+}
+
+.quick-date-btn {
+  font-size: 0.85rem;
+}

frontend/dashboard.html

@@ -4,7 +4,7 @@
 <head>
   <meta charset="UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>To Do App | Dashboard</title>
+  <title>BusketLisk &#x2022; Dashboard</title>
   <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet"
     integrity="sha384-sRIl4kxILFvY47J16cr9ZwB07vP4J8+LH7qKQnuqkuIAvNWLzeN8tE5YBujZqJLB" crossorigin="anonymous" />
   <link rel="stylesheet" href="./css/styles.css" />
@@ -36,6 +36,10 @@
           <li class="nav-item">
             <a class="nav-link" href="./support.html">Support</a>
           </li>
+          <div class="d-flex gap-2 d-none d-lg-block ms-3">
+            <a class="btn btn-primary" href="./login.html">Login</a>
+            <a class="btn btn-outline-light" href="./signup.html">Signup</a>
+          </div>
         </ul>
       </div>
     </div>
@@ -47,31 +51,73 @@
         <div class="rounded shadow bg-translucent p-3 p-lg-5 col-12">
           <form id="taskForm" class="mb-5 text-white">
             <h1 id="greeting" class="mb-5 display-3">Your Dashboard</h1>
+
+            <!-- Stats cards: populated by updateStats() in api.js. -->
+            <div class="row g-3 mb-5">
+              <div class="col-6 col-md-3">
+                <div class="stat-card">
+                  <div id="statActive" class="stat-value">0</div>
+                  <div class="stat-label">Active</div>
+                </div>
+              </div>
+              <div class="col-6 col-md-3">
+                <div class="stat-card">
+                  <div id="statCompleted" class="stat-value">0</div>
+                  <div class="stat-label">Completed</div>
+                </div>
+              </div>
+              <div class="col-6 col-md-3">
+                <div class="stat-card">
+                  <div id="statOverdue" class="stat-value">0</div>
+                  <div class="stat-label">Overdue</div>
+                </div>
+              </div>
+              <div class="col-6 col-md-3">
+                <div class="stat-card">
+                  <div id="statDueToday" class="stat-value">0</div>
+                  <div class="stat-label">Due Today</div>
+                </div>
+              </div>
+            </div>
+
             <h2 class="mb-3">New Task</h2>
             <input id="taskName" name="taskName" placeholder="Task Name" class="mb-2 form-control shadow-sm" type="text"
               required />
             <textarea id="taskDescription" name="taskDescription" placeholder="Task Description"
               class="mb-2 form-control shadow-sm" rows="8" required></textarea>
-            <input id="dueDate" name="dueDate" type="date" class="mb-3 form-control shadow-sm" required
+            <input id="dueDate" name="dueDate" type="date" class="mb-2 form-control shadow-sm" required
               placeholder="Due Date" />
+            <!-- Quick-pick date buttons: handler in api.js writes the
+                 chosen date into the #dueDate field above. -->
+            <div class="d-flex gap-2 flex-wrap mb-3">
+              <button type="button" class="btn btn-outline-light quick-date-btn" data-quick="today">Today</button>
+              <button type="button" class="btn btn-outline-light quick-date-btn" data-quick="tomorrow">Tomorrow</button>
+              <button type="button" class="btn btn-outline-light quick-date-btn" data-quick="nextWeek">Next
+                week</button>
+            </div>
             <button type="submit" class="btn btn-primary shadow-sm px-5">
               Create Task
             </button>
-            <div class="d-flex align-items-center gap-3 my-5">
-              <label for="sortSelect" class="text-white">Sort by:</label>
+            <div class="d-flex align-items-center gap-3 flex-wrap mt-5 mb-3">
+              <label for="sortSelect" class="text-white mb-0">Sort by:</label>
               <select name="sortSelect" id="sortSelect" class="form-select w-auto shadow-none">
                 <option value="default" selected>Default</option>
                 <option value="dueDate">Due Date</option>
                 <option value="dateCreate">Date Created</option>
               </select>
+              <!-- Search: filters the lists below live via api.js (no API call). -->
+              <input id="searchInput" type="search" placeholder="Search tasks..."
+                class="form-control shadow-sm flex-grow-1" style="max-width: 320px;" />
             </div>
             <div class="row text-white">
               <div class="col-12 col-lg-6 mb-4 mb-lg-0">
                 <h2>To Do</h2>
+                <p id="toDoEmpty" class="text-white-50 d-none">No matching tasks.</p>
                 <ul id="toDoList" class="list-group"></ul>
               </div>
               <div class="col-12 col-lg-6">
                 <h2>Completed</h2>
+                <p id="completedEmpty" class="text-white-50 d-none">No matching tasks.</p>
                 <ul id="completedList" class="list-group"></ul>
               </div>
             </div>
@@ -111,6 +157,51 @@
       </div>
     </div>
   </footer>
+  <!-- Toast-style alert container, populated by showAlert() in api.js -->
+  <div id="alertContainer" class="position-fixed top-0 end-0 p-3" style="z-index: 1080;"></div>
+
+  <!-- Delete confirmation modal -->
+  <div class="modal fade" id="deleteModal" tabindex="-1" aria-labelledby="deleteTaskModalLabel" aria-hidden="true">
+    <div class="modal-dialog modal-dialog-centered">
+      <div class="modal-content">
+        <div class="modal-header">
+          <h1 class="modal-title fs-5" id="deleteTaskModalLabel">Delete Task</h1>
+          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+        </div>
+        <div class="modal-body">
+          <p class="mb-0">Are you sure you want to delete this task? This action cannot be undone.</p>
+        </div>
+        <div class="modal-footer">
+          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
+          <button id="confirmDeleteButton" type="button" class="btn btn-danger">Delete</button>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <!-- Modal -->
+  <div class="modal fade" id="editModal" tabindex="-1" aria-labelledby="editTaskModalLabel" aria-hidden="true">
+    <div class="modal-dialog modal-dialog-centered">
+      <div class="modal-content">
+        <div class="modal-header">
+          <h1 class="modal-title fs-5" id="editTaskModalLabel">Edit Task</h1>
+          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+        </div>
+        <div class="modal-body">
+          <form id="editTaskForm">
+            <input id="editTaskName" placeholder="Task Name" class="mb-2 form-control shadow-sm" type="text">
+            <textarea id="editTaskDescription" placeholder="Task Description" rows="7"
+              class="form-control mb-2 shadow-sm"></textarea>
+            <input id="editDueDate" placeholder="Task Name" class="mb-3 form-control shadow-sm" type="date">
+          </form>
+        </div>
+        <div class="modal-footer">
+          <button id="saveButton" type="submit" class="btn btn-primary">Save changes</button>
+        </div>
+      </div>
+    </div>
+  </div>
+
   <script src="./js/api.js"></script>
   <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js"
     integrity="sha384-FKyoEForCGlyvwx9Hj09JcYn3nv7wiPVlz7YYwJrWVcXK/BmnVDxM+D2scQbITxI"

frontend/data/faq.json

@@ -0,0 +1,28 @@
+{
+  "faqs": [
+    {
+      "question": "Is BucketLisk free to use?",
+      "answer": "Yes, the Free plan lets you create up to 25 tasks across 1 list, forever. Upgrade to Pro or Team for unlimited lists, reminders and shared team features."
+    },
+    {
+      "question": "Where is my data stored?",
+      "answer": "Tasks are stored in a MongoDB database. Your data is only accessible via authenticated API requests, and all traffic is sent over HTTPS."
+    },
+    {
+      "question": "Can I access my tasks on mobile?",
+      "answer": "The web app is fully responsive and works on phones, tablets and desktops. A native mobile app is on the roadmap."
+    },
+    {
+      "question": "How do I reset my password?",
+      "answer": "Click the 'Forgot Password?' link on the login page and follow the instructions sent to your email."
+    },
+    {
+      "question": "Can I export my data?",
+      "answer": "Yes. From your dashboard settings you can export all your tasks as a JSON file at any time."
+    },
+    {
+      "question": "Do you support team collaboration?",
+      "answer": "Team plans include shared lists, role-based permissions, and integrations with Slack, Salesforce and Asana."
+    }
+  ]
+}

frontend/data/features.json

@@ -0,0 +1,34 @@
+{
+  "features": [
+    {
+      "icon": "./images/CreateNew.png",
+      "title": "Create tasks in seconds",
+      "description": "Add a title, description and due date. Your task is saved and sorted instantly."
+    },
+    {
+      "icon": "./images/Tick.svg",
+      "title": "Mark as done (or undo)",
+      "description": "One click to complete a task, one click to move it back if you change your mind."
+    },
+    {
+      "icon": "./images/Tasks-Screenshot (1).png",
+      "title": "Two-column layout",
+      "description": "Your active tasks and completed tasks live side-by-side, so you always know what's left."
+    },
+    {
+      "icon": "./images/Email.svg",
+      "title": "Flexible sorting",
+      "description": "Sort by due date, created date, or default order. Indexed on the backend for speed."
+    },
+    {
+      "icon": "./images/Cross.svg",
+      "title": "Edit or delete anytime",
+      "description": "Made a mistake? Update any field or remove the task entirely with a single click."
+    },
+    {
+      "icon": "./images/Slack.png",
+      "title": "Integrations (coming soon)",
+      "description": "Slack, Salesforce and Asana integrations are in the works for the Team plan."
+    }
+  ]
+}

frontend/data/pricing.json

@@ -0,0 +1,50 @@
+{
+  "plans": [
+    {
+      "name": "Free",
+      "price": 0,
+      "period": "forever",
+      "tagline": "Get started with the basics.",
+      "features": [
+        "Up to 25 active tasks",
+        "1 list / project",
+        "Basic sort (due date, created)",
+        "Community support"
+      ],
+      "cta": "Start for free",
+      "href": "./signup.html",
+      "featured": false
+    },
+    {
+      "name": "Pro",
+      "price": 8,
+      "period": "per user / month",
+      "tagline": "For individuals who want more power.",
+      "features": [
+        "Unlimited tasks & lists",
+        "Task reminders & due-date alerts",
+        "Advanced sorting & filtering",
+        "Priority email support"
+      ],
+      "cta": "Upgrade to Pro",
+      "href": "./signup.html",
+      "featured": true
+    },
+    {
+      "name": "Team",
+      "price": 15,
+      "period": "per user / month",
+      "tagline": "For teams that ship together.",
+      "features": [
+        "Everything in Pro",
+        "Shared team lists",
+        "Role-based permissions",
+        "Integrations (Slack, Salesforce, Asana)",
+        "Dedicated support"
+      ],
+      "cta": "Start Team trial",
+      "href": "./signup.html",
+      "featured": false
+    }
+  ]
+}

frontend/features.html

@@ -4,7 +4,7 @@
 <head>
   <meta charset="UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>To Do App | Features</title>
+  <title>BusketLisk &#x2022; Features</title>
   <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet"
     integrity="sha384-sRIl4kxILFvY47J16cr9ZwB07vP4J8+LH7qKQnuqkuIAvNWLzeN8tE5YBujZqJLB" crossorigin="anonymous" />
   <link rel="stylesheet" href="./css/styles.css" />
@@ -36,26 +36,32 @@
           <li class="nav-item">
             <a class="nav-link" href="./support.html">Support</a>
           </li>
+          <div class="d-flex gap-2 d-none d-lg-block ms-3">
+            <a class="btn btn-primary" href="./login.html">Login</a>
+            <a class="btn btn-outline-light" href="./signup.html">Signup</a>
+          </div>
         </ul>
       </div>
     </div>
   </nav>
 
-  <!-- ↓ Page not ready ↓ -->
-  <section class="bg-img d-flex justify-content-center align-items-center support py-5">
-    <div class="container text-center text-white py-5">
-      <img src="./images/Construction.svg" alt="Under Construction" height="150px" width="auto" />
+  <section class="bg-img py-5">
+    <div class="container py-5">
+      <div class="text-center text-white mb-5">
+        <h1 class="display-3">Everything you need to stay on top</h1>
+        <p class="lead text-white-50">A focused set of features designed to get out of your way.</p>
+      </div>
 
-      <h2 class="mt-5">Page under construction. Check back later!</h2>
+      <div class="row" id="featuresContainer">
+        <div class="col-12 text-center text-white-50">Loading features…</div>
+      </div>
 
-      <div class="mt-5">
-        <a href="./index.html" class="btn btn-primary px-4">Go Home</a>
+      <div class="text-center mt-4">
+        <a href="./dashboard.html" class="btn btn-primary btn-lg px-5">Try the dashboard</a>
       </div>
     </div>
   </section>
-  <!-- ↑ Page not ready ↑ -->
 
-  <!-- ↓ Footer ↓ -->
   <footer>
     <div class="py-5 container">
       <div class="d-flex justify-content-between flex-column gap-5 gap-md-0 flex-md-row align-items-center px-3 mb-5">
@@ -86,6 +92,7 @@
     </div>
   </footer>
 
+  <script src="./js/features.js"></script>
   <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js"
     integrity="sha384-FKyoEForCGlyvwx9Hj09JcYn3nv7wiPVlz7YYwJrWVcXK/BmnVDxM+D2scQbITxI"
     crossorigin="anonymous"></script>

frontend/index.html

@@ -4,7 +4,7 @@
 <head>
   <meta charset="UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>To Do App | Home</title>
+  <title>BusketLisk &#x2022; Home</title>
   <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet"
     integrity="sha384-sRIl4kxILFvY47J16cr9ZwB07vP4J8+LH7qKQnuqkuIAvNWLzeN8tE5YBujZqJLB" crossorigin="anonymous" />
   <link rel="stylesheet" href="./css/styles.css" />
@@ -36,21 +36,154 @@
           <li class="nav-item">
             <a class="nav-link" href="./support.html">Support</a>
           </li>
+          <div class="d-flex gap-2 d-none d-lg-block ms-3">
+            <a class="btn btn-primary" href="./login.html">Login</a>
+            <a class="btn btn-outline-light" href="./signup.html">Signup</a>
+          </div>
         </ul>
       </div>
     </div>
   </nav>
 
-  <!-- ↓ Page not ready ↓ -->
-  <main class="d-flex justify-content-center flex-column align-items-center bg-img">
-    <h1 class="display-2 text-center text-white">
-      Stay organised with BucketLisk
-    </h1>
-    <div class="d-flex justify-content-center align-items-center mt-5">
+  <main>
+    <!-- Hero -->
+    <section class="d-flex justify-content-center flex-column align-items-center bg-img text-center px-3">
+      <h1 class="display-2 text-white">Stay organised with BucketLisk</h1>
+      <p class="lead text-white-50 col-12 col-md-8 col-lg-6 mt-3">
+        The simple, no-nonsense to-do app that keeps your team on track, from morning stand-up to end-of-quarter
+        shipping.
+      </p>
+      <div class="d-flex justify-content-center align-items-center gap-3 mt-4 flex-wrap">
         <a href="./dashboard.html" class="btn btn-primary btn-lg px-5">Try it for free</a>
+        <a href="./features.html" class="btn btn-outline-light btn-lg px-5">See features</a>
       </div>
+    </section>
+
+    <!-- Feature highlights -->
+    <section class="py-5">
+      <div class="container py-5">
+        <div class="text-center text-white mb-5">
+          <h2 class="display-5">Why BucketLisk?</h2>
+          <p class="text-white-50">Everything you need. Nothing you don't.</p>
+        </div>
+        <div class="row g-4">
+          <div class="col-12 col-md-4">
+            <div class="rounded shadow bg-translucent p-4 h-100 text-white text-center">
+              <img src="./images/CreateNew.png" alt="" height="56" class="mb-3">
+              <h3 class="h5">Capture fast</h3>
+              <p class="text-white-50 mb-0">Jot down a task in seconds: title, details, due date. Done.</p>
+            </div>
+          </div>
+          <div class="col-12 col-md-4">
+            <div class="rounded shadow bg-translucent p-4 h-100 text-white text-center">
+              <img src="./images/Tick.svg" alt="" height="56" class="mb-3">
+              <h3 class="h5">Stay focused</h3>
+              <p class="text-white-50 mb-0">Two clean columns: active and completed. Always know what's next.</p>
+            </div>
+          </div>
+          <div class="col-12 col-md-4">
+            <div class="rounded shadow bg-translucent p-4 h-100 text-white text-center">
+              <img src="./images/Contact.svg" alt="" height="56" class="mb-3">
+              <h3 class="h5">Share with your team</h3>
+              <p class="text-white-50 mb-0">Shared lists and role-based permissions on the Team plan.</p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+
+    <!-- Preview -->
+    <section class="py-5">
+      <div class="container py-5">
+        <div class="row align-items-center g-5">
+          <div class="col-12 col-lg-6 text-white">
+            <h2 class="display-5 mb-3">Built for the way you actually work</h2>
+            <p class="text-white-50 mb-4">
+              No cluttered dashboards, no 30-step onboarding. Open it, add a task, get on with your day.
+              When you're done, tick it off and move it to the completed column to keep the momentum going.
+            </p>
+            <ul class="list-unstyled">
+              <li class="mb-2"><img src="./images/Tick.svg" alt="" width="18" class="me-2">Sort by due date or created
+                date</li>
+              <li class="mb-2"><img src="./images/Tick.svg" alt="" width="18" class="me-2">Edit any task inline</li>
+              <li class="mb-2"><img src="./images/Tick.svg" alt="" width="18" class="me-2">Works on desktop, tablet and
+                mobile</li>
+            </ul>
+            <a href="./dashboard.html" class="btn btn-primary px-4 mt-3">Open the dashboard</a>
+          </div>
+          <div class="col-12 col-lg-6">
+            <img src="./images/Tasks-Screenshot (1).png" alt="BucketLisk dashboard preview"
+              class="img-fluid rounded shadow">
+          </div>
+        </div>
+      </div>
+    </section>
+
+    <!-- How it works -->
+    <section class="py-5">
+      <div class="container py-5">
+        <div class="text-center text-white mb-5">
+          <h2 class="display-5">Get started in 3 steps</h2>
+        </div>
+        <div class="row g-4 text-white">
+          <div class="col-12 col-md-4 text-center">
+            <div class="display-4 text-primary mb-2">1</div>
+            <h3 class="h5">Create a free account</h3>
+            <p class="text-white-50">Sign up in under 30 seconds. No credit card required.</p>
+          </div>
+          <div class="col-12 col-md-4 text-center">
+            <div class="display-4 text-primary mb-2">2</div>
+            <h3 class="h5">Add your tasks</h3>
+            <p class="text-white-50">Brain-dump everything on your plate. Set due dates so nothing slips.</p>
+          </div>
+          <div class="col-12 col-md-4 text-center">
+            <div class="display-4 text-primary mb-2">3</div>
+            <h3 class="h5">Tick them off</h3>
+            <p class="text-white-50">Watch your list shrink. Celebrate the small wins.</p>
+          </div>
+        </div>
+      </div>
+    </section>
+
+    <!-- Integrations -->
+    <section class="py-5">
+      <div class="container py-5 text-center">
+        <h2 class="display-5 text-white mb-3">Plays nicely with the tools you already use</h2>
+        <p class="text-white-50 mb-5">Integrations available on the Team plan.</p>
+        <div class="d-flex justify-content-center align-items-center gap-5 flex-wrap">
+          <img src="./images/Slack.png" alt="Slack" height="60">
+          <img src="./images/Asana.png" alt="Asana" height="60">
+          <img src="./images/Salesforce.png" alt="Salesforce" height="60">
+        </div>
+      </div>
+    </section>
+
+    <!-- Testimonial -->
+    <section class="py-5">
+      <div class="container py-5">
+        <div class="rounded shadow bg-translucent p-4 p-lg-5 col-12 col-lg-8 mx-auto text-white text-center">
+          <p class="fs-4 fst-italic mb-4">
+            "We switched our whole team over in a week. Everyone actually uses it, and that's the first time I've ever
+            said that about a task tool."
+          </p>
+          <p class="mb-0"><strong>Jamie L.</strong></p>
+          <p class="text-white-50 mb-0">Operations Lead, Greenfield Studio</p>
+        </div>
+      </div>
+    </section>
+
+    <!-- Bottom CTA -->
+    <section class="py-5">
+      <div class="container py-5 text-center">
+        <h2 class="display-4 text-white mb-3">Ready to get organised?</h2>
+        <p class="lead text-white-50 mb-4">Free forever for solo users. Upgrade any time.</p>
+        <div class="d-flex justify-content-center align-items-center gap-3 flex-wrap">
+          <a href="./signup.html" class="btn btn-primary btn-lg px-5">Sign up free</a>
+          <a href="./pricing.html" class="btn btn-outline-light btn-lg px-5">View pricing</a>
+        </div>
+      </div>
+    </section>
   </main>
-  <!-- ↑ Page not ready ↑ -->
 
   <!-- ↓ Footer ↓ -->
   <footer>

frontend/js/api.js

@@ -1,170 +1,382 @@
-// GLOBALS
-const $taskForm = document.getElementById('taskForm');
-const $toDoList = document.getElementById('toDoList');
-const $completedList = document.getElementById('completedList');
+/**
+ * api.js
+ *
+ * Powers the Dashboard page. Talks to the Express / Mongoose backend
+ * at http://localhost:3001 to create, read, update and delete tasks.
+ *
+ * Core CRUD (original):
+ *   - displayTasks()       GET    /api/tasks
+ *   - createNewTask()      POST   /api/tasks/todo
+ *   - completeTask()       PATCH  /api/tasks/complete/:id
+ *   - taskNotCompleted()   PATCH  /api/tasks/notComplete/:id
+ *   - deleteTask()         DELETE /api/tasks/delete/:id
+ *   - editTask()           PUT    /api/tasks/update/:id
+ *
+ * Added interactivity:
+ *   - Stats cards: renders live counts of Active, Completed, Overdue
+ *     and Due-Today tasks (see updateStats()).
+ *   - Search filter: an input box filters the rendered task lists by
+ *     title/description on every keystroke, without re-hitting the
+ *     API (see renderTasks()).
+ *   - Quick-pick date buttons: "Today", "Tomorrow" and "Next week"
+ *     populate the due-date field of the new-task form.
+ *
+ * The in-memory `allTasks` array holds the latest fetched list so
+ * search filtering can be recomputed purely on the client side.
+ */
+
+const taskForm = document.getElementById('taskForm');
+const toDoList = document.getElementById('toDoList');
+const completedList = document.getElementById('completedList');
+const toDoEmpty = document.getElementById('toDoEmpty');
+const completedEmpty = document.getElementById('completedEmpty');
+const searchInput = document.getElementById('searchInput');
+const dueDateInput = document.getElementById('dueDate');
+const url = "http://localhost:3001";
+
+// Cache of the most recent /api/tasks response so the search filter
+// can re-render instantly without refetching.
+let allTasks = [];
 
-// RESET FORM
 function resetForm() {
-    $taskForm.reset();
-};
+  taskForm.reset();
+}
+
+function showAlert(message, variant = 'success') {
+  const container = document.getElementById('alertContainer');
+  if (!container) return;
+  const alert = document.createElement('div');
+  alert.className = `alert alert-${variant} alert-dismissible fade show shadow-sm`;
+  alert.role = 'alert';
+  alert.innerHTML = `
+    ${message}
+    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
+  `;
+  container.appendChild(alert);
+  setTimeout(() => bootstrap.Alert.getOrCreateInstance(alert).close(), 3000);
+}
+
+const sortButton = document.getElementById("sortSelect");
+window.addEventListener("DOMContentLoaded", () => {
+  sortButton.value = "default";
+});
+sortButton.addEventListener('change', () => {
+  displayTasks();
+});
+
+// Search filter: re-renders the two lists on every keystroke using
+// the cached `allTasks` array. No API round-trip required.
+if (searchInput) {
+  searchInput.addEventListener('input', () => {
+    renderTasks();
+  });
+}
+
+// Quick-pick date buttons: set the due-date input to today, tomorrow
+// or a week from now. Saves the user from having to open the date
+// picker for the most common options.
+document.querySelectorAll('.quick-date-btn').forEach(btn => {
+  btn.addEventListener('click', () => {
+    const offsetDays = { today: 0, tomorrow: 1, nextWeek: 7 }[btn.dataset.quick] ?? 0;
+    const date = new Date();
+    date.setDate(date.getDate() + offsetDays);
+    dueDateInput.value = date.toISOString().split('T')[0];
+  });
+});
 
-// EVENT LISTENERS
 window.addEventListener("DOMContentLoaded", () => {
   displayTasks();
 });
 
-$taskForm.addEventListener("submit", (event) => {
+
+taskForm.addEventListener("submit", (event) => {
   event.preventDefault();
   createNewTask();
 });
 
-
-[$toDoList, $completedList].forEach(list => {
-    list.addEventListener("click", (event) => {
-        if (
-            event.target.classList.contains("done") ||
-            event.target.classList.contains("notDone")
-        ) {
-            toggleTaskStatus(event.target.dataset.id);
+[toDoList, completedList].forEach(list => {
+  list.addEventListener('click', (event) => {
+    if (event.target.classList.contains("done")) {
+      const taskId = event.target.getAttribute("data-id");
+      completeTask(taskId);
     }
+    else if (event.target.classList.contains("notDone")) {
+      const taskId = event.target.getAttribute("data-id");
+      taskNotCompleted(taskId);
+    }
+
     else if (event.target.classList.contains("delete")) {
-            deleteTask(event.target.dataset.id);
+      const taskId = event.target.getAttribute("data-id");
+      const confirmButton = document.getElementById('confirmDeleteButton');
+      confirmButton.addEventListener('click', async () => {
+        await deleteTask(taskId);
+        bootstrap.Modal.getInstance(document.getElementById('deleteModal')).hide();
+      }, { once: true });
+    }
+    else if (event.target.classList.contains('edit')) {
+      const task = {
+        id: event.target.getAttribute('data-id'),
+        title: event.target.getAttribute('data-title'),
+        description: event.target.getAttribute('data-description'),
+        dueDate: new Date(event.target.getAttribute('data-due-date'))
+      };
+      const modal = {
+        titleInput: document.getElementById('editTaskName'),
+        descriptionInput: document.getElementById('editTaskDescription'),
+        dueDateInput: document.getElementById('editDueDate'),
+        saveButton: document.getElementById('saveButton')
+      };
+      modal.titleInput.value = task.title;
+      modal.descriptionInput.value = task.description;
+      modal.dueDateInput.value = task.dueDate.toISOString().split('T')[0];
+      modal.saveButton.addEventListener('click', async () => {
+        await editTask(task.id);
+        bootstrap.Modal.getInstance(document.getElementById('editModal')).hide();
+      }, { once: true });
     }
   });
 });
 
-// EXAMPLE API
-// async function exampleAPI() {
-//     const response = await fetch("http://localhost:3001/test");
-//     const data = await response.text();
-//     console.log(data);
-// }
-//
-// exampleAPI();
 
-
-// DISPLAY TASKS
 async function displayTasks() {
-
-    const response = await fetch("http://localhost:3001/api/tasks")
-
+  const sortSelect = document.getElementById('sortSelect');
+  const sortBy = sortSelect.value;
+  let query = '';
+  if (sortBy !== 'default') {
+    query = `?sortBy=${sortBy}`;
+  }
+  try {
+    const response = await fetch(`${url}/api/tasks${query}`);
     if (!response.ok) {
       throw new Error(`Failed to get tasks: ${response.status}`);
     }
+    allTasks = await response.json();
+    updateStats(allTasks);
+    renderTasks();
+    resetForm();
+  } catch (error) {
+    console.error("Error: ", error);
+  }
+}
 
-    const data = await response.json();
-
-    try {
-        function formatTask(task) {
+function formatTask(task) {
   const li = document.createElement("li");
-
-            li.classList.add('card', 'p-3', 'mt-2');
-            const done = task.completed
-                ? "text-decoration-line-through opacity-50"
-                : "";
+  li.classList.add("card", "p-3", "shadow-sm", "mt-2");
+  const done = task.completed ? "text-decoration-line-through opacity-50" : "";
   li.innerHTML = `
     <div class="d-flex justify-content-between align-items-start">
       <h4 class="${done} col-11">${task.title}</h4>
-                <button data-id="${task.id}" type="button" class="btn-close delete" aria-label="Close"></button>
+      <button data-id="${task._id}" type="button" class="btn-close delete" data-bs-toggle="modal" data-bs-target="#deleteModal" aria-label="Close"></button>
     </div>
     <p class="${done}">${task.description}</p>
-            <p class="${done}"><strong>Due: </strong>${task.dueDate}</p>
+    <p class="${done}"><strong>Due: </strong>${new Date(task.dueDate).toLocaleDateString()}</p>
     <div class="d-flex justify-content-between align-items-end">
       <div>
-                        ${task.completed
-                    ? `<button data-id="${task.id}" class="btn btn-primary shadow-sm notDone" type="button">Not done</button>`
-                    : `
-                                    <button data-id="${task.id}" class="btn btn-primary shadow-sm edit" type="button">Edit</button>
-                                    <button data-id="${task.id}" class="btn btn-primary shadow-sm done" type="button">Done</button>
+        ${task.completed ?
+      `<button data-id="${task._id}" class="btn btn-primary shadow-sm notDone" type="button">Not done</button>`
+      :
+      `
+            <button data-bs-toggle="modal" data-bs-target="#editModal" data-title="${task.title}" data-description="${task.description}" data-due-date="${task.dueDate}" data-id="${task._id}" class="btn btn-primary shadow-sm edit" type="button">Edit</button>
+            <button data-id="${task._id}" class="btn btn-primary shadow-sm done" type="button">Done</button>
           `
     }
       </div>
-                    <p class="m-0 ${done}"><strong>Created on: </strong>${task.dateCreated}</p>
+      <p class="m-0 ${done}"><strong>Created on: </strong>${new Date(task.dateCreated).toLocaleDateString()}</p>
     </div>
   `;
-
   return li;
-
-        }
-
-        $toDoList.innerHTML = "";
-        $completedList.innerHTML = "";
-
-        const tasks = Array.isArray(data) ? data : [];
-
-        if (!Array.isArray(data)) {
-            console.error("ERROR: Expected an array of tasks from /api/tasks", data);
-        }
-
-        tasks.forEach(task => {
-            const formattedTask = formatTask(task);
-            task.completed
-                ? $completedList.appendChild(formattedTask)
-                : $toDoList.appendChild(formattedTask)
-        })
-        resetForm();
-
-    } catch (error) {
-        console.error(`ERROR: ${error}`);
-    }
-
-
 }
 
+/**
+ * Render the cached task list into the To-Do and Completed columns.
+ * Applies the current search term (if any) as a case-insensitive
+ * match on title or description, and toggles per-column empty-state
+ * messages when nothing matches.
+ */
+function renderTasks() {
+  const term = (searchInput?.value || '').trim().toLowerCase();
+  const filtered = term
+    ? allTasks.filter(t =>
+        t.title.toLowerCase().includes(term) ||
+        t.description.toLowerCase().includes(term))
+    : allTasks;
+
+  toDoList.innerHTML = '';
+  completedList.innerHTML = '';
+
+  let activeCount = 0;
+  let completedCount = 0;
+
+  filtered.forEach(task => {
+    const node = formatTask(task);
+    if (task.completed) {
+      completedList.appendChild(node);
+      completedCount += 1;
+    } else {
+      toDoList.appendChild(node);
+      activeCount += 1;
+    }
+  });
+
+  toDoEmpty?.classList.toggle('d-none', activeCount > 0);
+  completedEmpty?.classList.toggle('d-none', completedCount > 0);
+}
+
+/**
+ * Recompute and display the four dashboard stat cards.
+ *
+ *   Active     - tasks that are not yet completed
+ *   Completed  - tasks marked done
+ *   Overdue    - active tasks whose due date is before today
+ *   Due Today  - active tasks whose due date is today
+ *
+ * Dates are normalised to midnight so the comparison ignores time
+ * of day.
+ */
+function updateStats(tasks) {
+  const today = new Date();
+  today.setHours(0, 0, 0, 0);
+
+  let active = 0, completed = 0, overdue = 0, dueToday = 0;
+
+  tasks.forEach(task => {
+    const due = new Date(task.dueDate);
+    due.setHours(0, 0, 0, 0);
+
+    if (task.completed) {
+      completed += 1;
+    } else {
+      active += 1;
+      if (due.getTime() < today.getTime()) {
+        overdue += 1;
+      } else if (due.getTime() === today.getTime()) {
+        dueToday += 1;
+      }
+    }
+  });
+
+  const set = (id, value) => {
+    const el = document.getElementById(id);
+    if (el) el.textContent = value;
+  };
+  set('statActive', active);
+  set('statCompleted', completed);
+  set('statOverdue', overdue);
+  set('statDueToday', dueToday);
+}
 async function createNewTask() {
+
   const taskDetails = {
-        title: $taskForm.taskName.value.trim(),
-        description: $taskForm.taskDescription.value.trim(),
-        dueDate: $taskForm.dueDate.value,
+    title: taskForm.taskName.value.trim(),
+    description: taskForm.taskDescription.value.trim(),
+    dueDate: taskForm.dueDate.value
   }
   if (!taskDetails.title || !taskDetails.description || !taskDetails.dueDate) {
-        alert("Please fill in all fields");
-        return;
+    return alert("All fields required!");
   }
-
   try {
-        const response = await fetch("http://localhost:3001/api/tasks/todo", {
+    const response = await fetch(`${url}/api/tasks/todo`, {
       method: "POST",
       headers: {
         "Content-Type": "application/json"
       },
       body: JSON.stringify(taskDetails)
     });
-
     if (!response.ok) {
-            throw new Error(`Failed to create task: ${response.status}`);
+      throw new Error(`Failed to post task: ${response.status}`);
     }
-
     const data = await response.json();
-        console.log("Task created:", data);
+    console.log(data);
+    displayTasks();
+  } catch (error) {
+    console.error("Error:", error);
+  }
+}
+async function completeTask(taskId) {
+  try {
+    const response = await fetch(`${url}/api/tasks/complete/${taskId}`, {
+      method: "PATCH",
+      headers: {
+        "Content-Type": "application/json"
+      },
+      body: JSON.stringify({ completed: true })
+    });
+    if (!response.ok) {
+      throw new Error(`Failed to complete task: ${response.status}`);
+    }
+    const data = await response.json();
+    console.log("Task completed:", data);
     displayTasks();
-
-
   }
   catch (error) {
-        console.error(`ERROR: ${error}`);
+    console.error("Error:", error);
   }
-
 };
-
-function toggleTaskStatus(taskId) {
-    const task = tasks.find(task => task.id === Number(taskId));
-
-    if (task) {
-        task.completed = !task.completed;
-        displayTasks();
-    }
-}
-
-function deleteTask(taskId) {
-    const taskIndex = tasks.findIndex(task => task.id == taskId);
-    if (taskIndex !== -1) {
-        tasks.splice(taskIndex, 1);
+async function taskNotCompleted(taskId) {
+  try {
+    const response = await fetch(`${url}/api/tasks/notComplete/${taskId}`, {
+      method: "PATCH",
+      headers: {
+        "Content-Type": "application/json"
+      },
+      body: JSON.stringify({ completed: false })
+    });
+    if (!response.ok) {
+      throw new Error(`Failed to make task incomplete: ${response.status}`);
     }
+    const data = await response.json();
+    console.log("Task not complete:", data);
     displayTasks();
 
-}
+  } catch (error) {
+    console.error("Error:", error);
+  }
+};
+async function deleteTask(taskId) {
+  try {
+    const response = await fetch(`${url}/api/tasks/delete/${taskId}`, {
+      method: "DELETE",
+      headers: {
+        "Content-Type": "application/json"
+      }
+    });
+    if (!response.ok) {
+      throw new Error(`Failed to delete task: ${response.status}`);
+    }
+    const data = await response.json();
+    console.log({ message: "Deleted Task:", Task: data });
+    displayTasks();
+    showAlert('Task deleted successfully.');
 
-function convertDate(dateString) {
-    return new Date(dateString).toLocaleDateString("en-AU");
-}
+  } catch (error) {
+    console.error("Error:", error);
+  }
+};
+async function editTask(taskId) {
+  const updatedDetails = {
+    title: document.getElementById('editTaskName').value.trim(),
+    description: document.getElementById('editTaskDescription').value.trim(),
+    dueDate: document.getElementById('editDueDate').value
+  };
+  if (!updatedDetails.title || !updatedDetails.description || !updatedDetails.dueDate) {
+    return alert("All fields required!");
+  }
+
+  try {
+    const response = await fetch(`${url}/api/tasks/update/${taskId}`, {
+      method: "PUT",
+      headers: {
+        "Content-Type": "application/json"
+      },
+      body: JSON.stringify(updatedDetails)
+    });
+    if (!response.ok) {
+      throw new Error(`Failed to edit task: ${response.status}`);
+    }
+    const data = await response.json();
+    console.log("Edited Task:", data);
+    displayTasks();
+  } catch (error) {
+    console.error("Error:", error);
+  }
+};

frontend/js/features.js

@@ -0,0 +1,48 @@
+/**
+ * features.js
+ *
+ * Powers the Features page.
+ *
+ * Features:
+ *   - Loads the feature list from `./data/features.json` via fetch().
+ *   - Dynamically renders each feature as a Bootstrap card (icon,
+ *     title, description) inside the #featuresContainer grid.
+ *   - Shows an error message if the JSON file cannot be loaded.
+ *
+ * The feature list lives in JSON so that marketing can add, remove
+ * or reorder features without the page template changing.
+ */
+
+const featuresContainer = document.getElementById('featuresContainer');
+
+async function loadFeatures() {
+  try {
+    const response = await fetch('./data/features.json');
+    if (!response.ok) {
+      throw new Error(`Failed to load features: ${response.status}`);
+    }
+    const data = await response.json();
+    renderFeatures(data.features);
+  } catch (error) {
+    console.error('Error:', error);
+    featuresContainer.innerHTML = `<p class="text-white text-center">Unable to load features.</p>`;
+  }
+}
+
+function renderFeatures(features) {
+  featuresContainer.innerHTML = '';
+  features.forEach(f => {
+    const col = document.createElement('div');
+    col.className = 'col-12 col-md-6 col-lg-4 mb-4';
+    col.innerHTML = `
+      <div class="rounded shadow bg-translucent p-4 h-100 text-white">
+        <img src="${f.icon}" alt="" height="48" width="auto" class="mb-3">
+        <h3 class="h5">${f.title}</h3>
+        <p class="text-white-50 mb-0">${f.description}</p>
+      </div>
+    `;
+    featuresContainer.appendChild(col);
+  });
+}
+
+window.addEventListener('DOMContentLoaded', loadFeatures);

frontend/js/pricing.js

@@ -0,0 +1,67 @@
+/**
+ * pricing.js
+ *
+ * Powers the Pricing page.
+ *
+ * Features:
+ *   - Loads the three plan definitions from `./data/pricing.json`
+ *     asynchronously via fetch().
+ *   - Dynamically renders one card per plan, highlighting the
+ *     "featured" plan with a coloured border and a "Most popular"
+ *     badge.
+ *   - Shows a graceful error message if the JSON file cannot be
+ *     loaded.
+ *
+ * Keeping plan data in a separate JSON file means marketing copy and
+ * prices can be updated without touching the page markup.
+ */
+
+const pricingContainer = document.getElementById('pricingContainer');
+
+async function loadPricing() {
+  try {
+    const response = await fetch('./data/pricing.json');
+    if (!response.ok) {
+      throw new Error(`Failed to load pricing: ${response.status}`);
+    }
+    const data = await response.json();
+    renderPlans(data.plans);
+  } catch (error) {
+    console.error('Error:', error);
+    pricingContainer.innerHTML = `<p class="text-white text-center">Unable to load pricing. Please try again later.</p>`;
+  }
+}
+
+function renderPlans(plans) {
+  pricingContainer.innerHTML = '';
+  plans.forEach(plan => {
+    const col = document.createElement('div');
+    col.className = 'col-12 col-md-4 mb-4';
+
+    const featuresHtml = plan.features
+      .map(f => `<li class="mb-2"><img src="./images/Tick.svg" alt="" width="18" class="me-2">${f}</li>`)
+      .join('');
+
+    const highlight = plan.featured ? 'pinkBorder' : '';
+    const badge = plan.featured
+      ? '<span class="badge bg-primary mb-2">Most popular</span>'
+      : '';
+
+    col.innerHTML = `
+      <div class="rounded shadow bg-translucent p-4 h-100 d-flex flex-column ${highlight}">
+        ${badge}
+        <h3 class="text-white">${plan.name}</h3>
+        <p class="text-white-50">${plan.tagline}</p>
+        <div class="mb-3">
+          <span class="display-4 text-white">$${plan.price}</span>
+          <span class="text-white-50 ms-2">${plan.period}</span>
+        </div>
+        <ul class="list-unstyled text-white flex-grow-1">${featuresHtml}</ul>
+        <a href="${plan.href}" class="btn btn-primary mt-3">${plan.cta}</a>
+      </div>
+    `;
+    pricingContainer.appendChild(col);
+  });
+}
+
+window.addEventListener('DOMContentLoaded', loadPricing);

frontend/js/support.js

@@ -0,0 +1,78 @@
+/**
+ * support.js
+ *
+ * Powers the Support page.
+ *
+ * Features:
+ *   1. FAQ accordion
+ *      - Loads Q&A pairs from `./data/faq.json`.
+ *      - Renders each as a Bootstrap accordion item so only one
+ *        answer is open at a time.
+ *
+ *   2. Contact form
+ *      - Validates that all fields have been filled in.
+ *      - Displays an inline success or error alert above the form.
+ *      - Does not currently persist messages; the form is purely a
+ *        frontend demonstration (see README / features notes).
+ */
+
+const faqContainer = document.getElementById('faqContainer');
+const contactForm = document.getElementById('contactForm');
+const contactStatus = document.getElementById('contactStatus');
+
+async function loadFaqs() {
+  try {
+    const response = await fetch('./data/faq.json');
+    if (!response.ok) {
+      throw new Error(`Failed to load FAQs: ${response.status}`);
+    }
+    const data = await response.json();
+    renderFaqs(data.faqs);
+  } catch (error) {
+    console.error('Error:', error);
+    faqContainer.innerHTML = `<p class="text-white text-center">Unable to load FAQs.</p>`;
+  }
+}
+
+function renderFaqs(faqs) {
+  faqContainer.innerHTML = '';
+  faqs.forEach((faq, i) => {
+    const item = document.createElement('div');
+    item.className = 'accordion-item';
+    item.innerHTML = `
+      <h2 class="accordion-header">
+        <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
+          data-bs-target="#faq-${i}" aria-expanded="false" aria-controls="faq-${i}">
+          ${faq.question}
+        </button>
+      </h2>
+      <div id="faq-${i}" class="accordion-collapse collapse" data-bs-parent="#faqContainer">
+        <div class="accordion-body">${faq.answer}</div>
+      </div>
+    `;
+    faqContainer.appendChild(item);
+  });
+}
+
+contactForm.addEventListener('submit', (event) => {
+  event.preventDefault();
+  const name = contactForm.name.value.trim();
+  const email = contactForm.email.value.trim();
+  const message = contactForm.message.value.trim();
+
+  if (!name || !email || !message) {
+    showStatus('Please fill out all fields.', 'danger');
+    return;
+  }
+
+  showStatus('Thanks, your message has been received. We will get back to you shortly.', 'success');
+  contactForm.reset();
+});
+
+function showStatus(message, type) {
+  contactStatus.className = `alert alert-${type}`;
+  contactStatus.textContent = message;
+  contactStatus.classList.remove('d-none');
+}
+
+window.addEventListener('DOMContentLoaded', loadFaqs);

frontend/login.html

@@ -4,7 +4,7 @@
 <head>
   <meta charset="UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>To Do App | Login</title>
+  <title>BusketLisk &#x2022; Login</title>
   <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet"
     integrity="sha384-sRIl4kxILFvY47J16cr9ZwB07vP4J8+LH7qKQnuqkuIAvNWLzeN8tE5YBujZqJLB" crossorigin="anonymous" />
   <link rel="stylesheet" href="./css/styles.css" />
@@ -36,24 +36,32 @@
           <li class="nav-item">
             <a class="nav-link" href="./support.html">Support</a>
           </li>
+          <div class="d-flex gap-2 d-none d-lg-block ms-3">
+            <a class="btn btn-primary" href="./login.html">Login</a>
+            <a class="btn btn-outline-light" href="./signup.html">Signup</a>
+          </div>
         </ul>
       </div>
     </div>
   </nav>
 
-  <!-- ↓ Page not ready ↓ -->
-  <section class="bg-img d-flex justify-content-center align-items-center support py-5">
-    <div class="container text-center text-white py-5">
-      <img src="./images/Construction.svg" alt="Under Construction" height="150px" width="auto" />
-
-      <h2 class="mt-5">Page under construction. Check back later!</h2>
-
-      <div class="mt-5">
-        <a href="./index.html" class="btn btn-primary px-4">Go Home</a>
+  <section class="d-flex justify-content-center flex-column align-items-center bg-img">
+    <div class="rounded shadow bg-translucent p-4">
+      <h2 class="mb-3 text-white">Login</h2>
+      <form id="loginForm">
+        <input id="email" placeholder="Email Address" required type="email" class="mb-3 form-control shadow-sm">
+        <input id="password" placeholder="Password" required type="password" class="form-control shadow-sm">
+        <div class="d-flex justify-content-between align-items-center gap-3 mt-3">
+          <button type="submit" class="btn btn-primary shadow-sm">Login</button>
+          <div class="text-end">
+            <a href="./signup.html">Don't have an account yet?</a>
+            <br>
+            <a href="#">Forgot Password?</a>
           </div>
         </div>
+      </form>
+    </div>
   </section>
-  <!-- ↑ Page not ready ↑ -->
 
   <!-- ↓ Footer ↓ -->
   <footer>

frontend/pricing.html

@@ -4,7 +4,7 @@
 <head>
   <meta charset="UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>To Do App | Pricing</title>
+  <title>BusketLisk &#x2022; Pricing</title>
   <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet"
     integrity="sha384-sRIl4kxILFvY47J16cr9ZwB07vP4J8+LH7qKQnuqkuIAvNWLzeN8tE5YBujZqJLB" crossorigin="anonymous" />
   <link rel="stylesheet" href="./css/styles.css" />
@@ -36,26 +36,28 @@
           <li class="nav-item">
             <a class="nav-link" href="./support.html">Support</a>
           </li>
+          <div class="d-flex gap-2 d-none d-lg-block ms-3">
+            <a class="btn btn-primary" href="./login.html">Login</a>
+            <a class="btn btn-outline-light" href="./signup.html">Signup</a>
+          </div>
         </ul>
       </div>
     </div>
   </nav>
 
-  <!-- ↓ Page not ready ↓ -->
-  <section class="bg-img d-flex justify-content-center align-items-center support py-5">
-    <div class="container text-center text-white py-5">
-      <img src="./images/Construction.svg" alt="Under Construction" height="150px" width="auto" />
+  <section class="bg-img py-5">
+    <div class="container py-5">
+      <div class="text-center text-white mb-5">
+        <h1 class="display-3">Simple, honest pricing</h1>
+        <p class="lead text-white-50">Pick the plan that fits. Upgrade, downgrade or cancel any time.</p>
+      </div>
 
-      <h2 class="mt-5">Page under construction. Check back later!</h2>
-
-      <div class="mt-5">
-        <a href="./index.html" class="btn btn-primary px-4">Go Home</a>
+      <div class="row" id="pricingContainer">
+        <div class="col-12 text-center text-white-50">Loading plans…</div>
       </div>
     </div>
   </section>
-  <!-- ↑ Page not ready ↑ -->
 
-  <!-- ↓ Footer ↓ -->
   <footer>
     <div class="py-5 container">
       <div class="d-flex justify-content-between flex-column gap-5 gap-md-0 flex-md-row align-items-center px-3 mb-5">
@@ -86,6 +88,7 @@
     </div>
   </footer>
 
+  <script src="./js/pricing.js"></script>
   <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js"
     integrity="sha384-FKyoEForCGlyvwx9Hj09JcYn3nv7wiPVlz7YYwJrWVcXK/BmnVDxM+D2scQbITxI"
     crossorigin="anonymous"></script>

frontend/signup.html

@@ -4,7 +4,7 @@
 <head>
   <meta charset="UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>To Do App | Signup</title>
+  <title>BusketLisk &#x2022; Signup</title>
   <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet"
     integrity="sha384-sRIl4kxILFvY47J16cr9ZwB07vP4J8+LH7qKQnuqkuIAvNWLzeN8tE5YBujZqJLB" crossorigin="anonymous" />
   <link rel="stylesheet" href="./css/styles.css" />
@@ -36,24 +36,34 @@
           <li class="nav-item">
             <a class="nav-link" href="./support.html">Support</a>
           </li>
+          <div class="d-flex gap-2 d-none d-lg-block ms-3">
+            <a class="btn btn-primary" href="./login.html">Login</a>
+            <a class="btn btn-outline-light" href="./signup.html">Signup</a>
+          </div>
         </ul>
       </div>
     </div>
   </nav>
 
-  <!-- ↓ Page not ready ↓ -->
-  <section class="bg-img d-flex justify-content-center align-items-center support py-5">
-    <div class="container text-center text-white py-5">
-      <img src="./images/Construction.svg" alt="Under Construction" height="150px" width="auto" />
-
-      <h2 class="mt-5">Page under construction. Check back later!</h2>
-
-      <div class="mt-5">
-        <a href="./index.html" class="btn btn-primary px-4">Go Home</a>
+  <section class="d-flex justify-content-center flex-column align-items-center bg-img">
+    <div class="rounded shadow bg-translucent p-4">
+      <h2 class="mb-3 text-white">Create Account</h2>
+      <form id="signupForm">
+        <input id="firstName" placeholder="First Name" required type="text" class="mb-3 form-control shadow-sm">
+        <input id="lastName" placeholder="Last Name" required type="text" class="mb-3 form-control shadow-sm">
+        <input id="email" placeholder="Email Address" required type="email" class="mb-3 form-control shadow-sm">
+        <input id="password" placeholder="Password" required type="password" class="form-control shadow-sm">
+        <div class="d-flex justify-content-between align-items-center gap-3 mt-3">
+          <button type="submit" class="btn btn-primary shadow-sm">Sign Up</button>
+          <div class="text-end">
+            <a href="./login.html">Already have an account?</a>
+            <br>
+            <a href="./dashboard.html">Try without an account</a>
           </div>
         </div>
+      </form>
+    </div>
   </section>
-  <!-- ↑ Page not ready ↑ -->
 
   <!-- ↓ Footer ↓ -->
   <footer>

frontend/support.html

@@ -4,7 +4,7 @@
 <head>
   <meta charset="UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>To Do App | Support</title>
+  <title>BusketLisk &#x2022; Support</title>
   <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet"
     integrity="sha384-sRIl4kxILFvY47J16cr9ZwB07vP4J8+LH7qKQnuqkuIAvNWLzeN8tE5YBujZqJLB" crossorigin="anonymous" />
   <link rel="stylesheet" href="./css/styles.css" />
@@ -36,26 +36,58 @@
           <li class="nav-item">
             <a class="nav-link active" href="./support.html">Support</a>
           </li>
+          <div class="d-flex gap-2 d-none d-lg-block ms-3">
+            <a class="btn btn-primary" href="./login.html">Login</a>
+            <a class="btn btn-outline-light" href="./signup.html">Signup</a>
+          </div>
         </ul>
       </div>
     </div>
   </nav>
 
-  <!-- ↓ Page not ready ↓ -->
-  <section class="bg-img d-flex justify-content-center align-items-center support py-5">
-    <div class="container text-center text-white py-5">
-      <img src="./images/Construction.svg" alt="Under Construction" height="150px" width="auto" />
+  <section class="bg-img py-5">
+    <div class="container py-5">
+      <div class="text-center text-white mb-5">
+        <h1 class="display-3">How can we help?</h1>
+        <p class="lead text-white-50">Check the FAQ below, or send us a message directly.</p>
+      </div>
 
-      <h2 class="mt-5">Page under construction. Check back later!</h2>
+      <div class="row g-4">
+        <div class="col-12 col-lg-6">
+          <div class="rounded shadow bg-translucent p-4 text-white h-100">
+            <h2 class="h4 mb-4">Frequently asked questions</h2>
+            <div class="accordion" id="faqContainer">
+              <p class="text-white-50">Loading FAQs…</p>
+            </div>
+          </div>
+        </div>
 
-      <div class="mt-5">
-        <a href="./index.html" class="btn btn-primary px-4">Go Home</a>
+        <div class="col-12 col-lg-6">
+          <div class="rounded shadow bg-translucent p-4 text-white h-100">
+            <h2 class="h4 mb-4">Contact us</h2>
+            <div id="contactStatus" class="alert d-none" role="alert"></div>
+            <form id="contactForm">
+              <input name="name" type="text" class="form-control mb-3 shadow-sm" placeholder="Your name" required>
+              <input name="email" type="email" class="form-control mb-3 shadow-sm" placeholder="Your email" required>
+              <textarea name="message" rows="5" class="form-control mb-3 shadow-sm" placeholder="How can we help?"
+                required></textarea>
+              <button type="submit" class="btn btn-primary px-4">Send message</button>
+            </form>
+            <hr class="border-light my-4">
+            <div class="d-flex align-items-center mb-2">
+              <img src="./images/Email.svg" alt="" height="20" class="me-2">
+              <span>support@bucketlisk.example</span>
+            </div>
+            <div class="d-flex align-items-center">
+              <img src="./images/Phone.svg" alt="" height="20" class="me-2">
+              <span>+61 8 0000 0000</span>
+            </div>
+          </div>
+        </div>
       </div>
     </div>
   </section>
-  <!-- ↑ Page not ready ↑ -->
 
-  <!-- ↓ Footer ↓ -->
   <footer>
     <div class="py-5 container">
       <div class="d-flex justify-content-between flex-column gap-5 gap-md-0 flex-md-row align-items-center px-3 mb-5">
@@ -86,6 +118,7 @@
     </div>
   </footer>
 
+  <script src="./js/support.js"></script>
   <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js"
     integrity="sha384-FKyoEForCGlyvwx9Hj09JcYn3nv7wiPVlz7YYwJrWVcXK/BmnVDxM+D2scQbITxI"
     crossorigin="anonymous"></script>

index.js

@@ -1,90 +0,0 @@
-// const { MongoClient, ServerApiVersion } = require('mongodb');
-// const uri = 'mongodb+srv://ugochikay_db_user:bt06DpE6QZqLHZ1x>@cluster0.aqxmamw.mongodb.net/?appName=Cluster0';
-
-//Dependancies
-const express = require("express");
-const cors = require("cors");
-
-const port = 3000;
-const app = express();
-
-//Middleware setup
-app.use(express.json());
-app.use(cors("*")); //change
-
-//API routes
-app.get("/get/example", async (req, res) =>{
-    res.send("Hello this is a Message from Backend")
-})
-
-const tasks = [
-  {
-      id: 1, 
-      completed: false,
-      title:"Wash car",
-      decription: "Make sure I have washed the car well",
-      dueDate: "14/03/2026",
-      dateCreated: new Date(Date.now()).toLocaleString()
-  },
-  {
-      id: 2,
-      completed: true,
-      title: "Audit Report",
-      description: "The Audit Report must be ready by due date",
-      duedate: "16/03/2026",
-      dateCreated: new Date(Date.now()).toLocaleString()
-  },
-  {
-      id: 3,
-      completed: true,
-      title: "Performance Report",
-      description: "The Performance Report must be ready by due date",
-      duedate: "16/03/2026",
-      dateCreated: new Date(Date.now()).toLocaleString()
-  },
-];
-
-//Get all Tasks
-
-app.get("/api/tasks", async (req, res) => {
-    try {
-        res.json(tasks);//Successful, responds to frontend with json list items
-
-    }
-    catch (error){
-        console.error(`Error: ${error}`);//Spits out the message in server console 
-        res.status(500).json({message:"Error grabbing tasks!"});//Responds with error 500 and a JSON mess
-
-    }
-})
-
-// Create a new Task and add it to the tasks array/list
-app.post("/api/tasks/todo", async (req, res) => {
-    try{
-        const {title, description, dueDate} = req.body;
-
-        const newTask = {
-            id: tasks.length + 1,
-            completed: false,
-            title: title,
-            description: description,
-            dueDate: dueDate,
-            dateCreated: new Date(Date.now()).toLocaleDateString("en-AU")
-        };
-        tasks.push(newTask);
-        res.json(newTask);
-
-    }
-    catch (error){
-        console.error(`ERROR: ${error}`);
-        res.status(500).json({message: "Error creating the task"});
-
-    }
-});
-
-
-
-//App startup
-app.listen(port, () => {
-    console.log(`To Do App listening on port ${port}`);
-});