Feature/project title search

data/projects.json

@@ -221,6 +221,69 @@
   },
   {
     "id": 8,
+
+    "title": "Library Management System",
+    "skills": ["Java"],
+    "level": "Beginner",
+    "interest": "Backend",
+    "time": "Medium",
+    "description": "A Java application that helps manage books, students, and borrowing records in a library. This project teaches object-oriented programming concepts, file handling, and menu-driven application design.",
+    "features": [
+      "Add and remove books",
+      "Issue and return books",
+      "Store student records",
+      "Search books by title or author"
+    ],
+    "tech_stack": ["Java", "OOP", "File Handling"],
+    "roadmap": [
+      "Step 1: Create Book and Student classes",
+      "Step 2: Design the menu-driven interface",
+      "Step 3: Implement add and remove book features",
+      "Step 4: Add issue and return book functionality",
+      "Step 5: Store records using file handling",
+      "Step 6: Implement search functionality",
+      "Step 7: Test the system with sample records"
+    ],
+    "resources": [
+      "Java official docs: https://docs.oracle.com/javase/tutorial",
+      "OOP concepts in Java: https://www.geeksforgeeks.org/object-oriented-programming-oops-concept-in-java",
+      "Java file handling: https://www.w3schools.com/java/java_files.asp"
+    ],
+    "starter_code": "starter_code/library_management.java"
+  },
+  {
+    "id": 9,
+    "title": "Real-Time Chat Application",
+    "skills": ["JavaScript", "Node.js"],
+    "level": "Intermediate",
+    "interest": "Web",
+    "time": "High",
+    "description": "A real-time chat application that allows multiple users to send and receive instant messages using WebSockets. This project introduces backend communication, event handling, and real-time systems.",
+    "features": [
+      "Multiple user chat support",
+      "Real-time messaging",
+      "User join and leave notifications",
+      "Simple responsive chat interface"
+    ],
+    "tech_stack": ["Node.js", "Express.js", "Socket.IO", "HTML", "CSS"],
+    "roadmap": [
+      "Step 1: Initialize the Node.js project",
+      "Step 2: Install Express and Socket.IO",
+      "Step 3: Create the server using Express",
+      "Step 4: Build the frontend chat interface",
+      "Step 5: Implement real-time messaging with Socket.IO",
+      "Step 6: Add user connection notifications",
+      "Step 7: Test the application with multiple users"
+    ],
+    "resources": [
+      "Node.js docs: https://nodejs.org/en/docs",
+      "Socket.IO guide: https://socket.io/docs/v4",
+      "Express.js documentation: https://expressjs.com"
+    ],
+    "starter_code": "starter_code/realtime_chat_app.js"
+  },
+  {
+    "id": 10,
     "title": "Password Strength Checker",
     "skills": ["Python"],
     "level": "Beginner",
@@ -248,5 +311,4 @@
     ],
     "starter_code": "starter_code/password_checker.py"
   }
-]
-
+]

starter_code/library_management.java

@@ -0,0 +1,22 @@
+import java.util.*;
+
+class Book {
+    String title;
+
+    Book(String title) {
+        this.title = title;
+    }
+}
+
+public class LibraryManagement {
+    public static void main(String[] args) {
+        ArrayList<Book> books = new ArrayList<>();
+
+        books.add(new Book("Java Basics"));
+        books.add(new Book("Data Structures"));
+
+        for (Book b : books) {
+            System.out.println(b.title);
+        }
+    }
+}

starter_code/realtime_chat_app.js

@@ -0,0 +1,13 @@
+const users = [];
+
+function joinChat(username) {
+    users.push(username);
+    console.log(`${username} joined the chat`);
+}
+
+function sendMessage(username, message) {
+    console.log(`${username}: ${message}`);
+}
+
+joinChat("Vikas");
+sendMessage("Vikas", "Hello World!");

static/script.js

@@ -60,13 +60,15 @@ if (isIndexPage) {
   var resultsLoadingEl = document.getElementById("results-loading");
   var resultsEmptyEl = document.getElementById("results-empty");
   var emptyMessageEl = document.getElementById("empty-message");
+  var searchContainer = document.getElementById("results-search-container");
   var skillsHidden = document.getElementById("skills");
   var skillsTextInput = document.getElementById("skills-input");
   var chipsSelectedEl = document.getElementById("skill-chips-selected");
   var quickPickChips = document.querySelectorAll(".skill-chip");
 
   // Tracks currently selected skills to prevent duplicates
   var selectedSkills = [];
+  var currentProjects = [];
 
 
   // ----------------------------------------------------------
@@ -479,6 +481,8 @@ if (isIndexPage) {
 
   function renderResults(projects, message) {
     resultsSection.style.display = "block";
+    searchContainer.style.display = projects.length ? "block" : "none";
+    currentProjects = projects;
     resultsLoadingEl.style.display = "none";
     // Clear out any cards from a previous search before showing new ones
     resultsGrid.innerHTML = "";
@@ -567,6 +571,38 @@ if (isIndexPage) {
     return text.length > maxLength ? text.slice(0, maxLength) + "..." : text;
   }
 
+  // ----------------------------------------------------------
+// Project title search
+// ----------------------------------------------------------
+
+var projectSearch = document.getElementById("project-search");
+
+if (projectSearch) {
+  projectSearch.addEventListener("input", function () {
+
+    var searchValue = projectSearch.value.toLowerCase();
+
+    var filteredProjects = currentProjects.filter(function (project) {
+      return project.title.toLowerCase().includes(searchValue);
+    });
+
+    resultsGrid.innerHTML = "";
+
+    if (filteredProjects.length === 0) {
+      resultsGrid.innerHTML = `
+        <div class="empty-search-message">
+          No matching projects found.
+        </div>
+      `;
+      return;
+    }
+
+    filteredProjects.forEach(function (project) {
+      resultsGrid.appendChild(buildProjectCard(project));
+    });
+  });
+}
+
 } // end isIndexPage
 
 

static/style.css

@@ -1968,4 +1968,24 @@ select:focus {
 
 #scroll-top-btn.visible {
     display: flex;
+}
+
+.results-search-container {
+  margin-bottom: 20px;
+}
+
+#project-search {
+  width: 100%;
+  padding: 12px;
+  border-radius: 10px;
+  border: 1px solid #ccc;
+  font-size: 16px;
+}
+
+.empty-search-message {
+  grid-column: 1 / -1;
+  text-align: center;
+  padding: 20px;
+  font-size: 1rem;
+  color: #9ca3af;
 }

templates/index.html

@@ -505,6 +505,14 @@ <h3>No Projects Found</h3>
       </div>
 
       <!-- Cards grid -->
+      <div class="results-search-container" id="results-search-container" style="display:none;">
+        <input
+          type="text"
+          id="project-search"
+          placeholder="Search projects by title..."
+        />
+      </div>
+
       <div class="results-grid" id="results-grid"></div>
     </div>
   </section>