Added Search Bar in Navigation (with Mock Data)

[Prachi0306]

User description

Description

I’ve added a search bar at the top-right corner of the navigation and used mockProjects for filtering. The search works in real-time for title, category, level, and tags with a clear button and responsive glassmorphism design. Fully tested and ready to connect with Supabase later.

Screenshots

Testing

1. Verified real-time search and clear button
2. Checked responsiveness on desktop & mobile
3. No console errors or performance issues

Notes

Currently using mock data; ready to connect to Supabase once environment variables are set.

---

PR Type

Enhancement

---

Description

• Implemented real-time search functionality with filtering across project title, category, level, and tags

• Created mock projects dataset with 8 sample projects for development and testing

• Redesigned navigation bar with integrated search input and glassmorphism styling

• Added empty state UI with clear messaging when no search results are found

• Temporarily disabled Supabase client to allow local development with mock data

---

Diagram Walkthrough

flowchart LR
  A["Mock Projects Data"] -->|"Filter by query"| B["Search Logic"]
  B -->|"Display results"| C["Dashboard Grid"]
  D["Navbar Component"] -->|"Capture input"| B
  B -->|"Show/hide"| E["Empty State UI"]
  C -->|"Render filtered"| F["Project Cards"]

Loading

File Walkthrough

	Relevant files
Enhancement	mockProjects.ts Mock projects dataset creation                                                      src/data/mockProjects.ts Created new mock projects dataset with 8 sample projects Each project includes title, category, level, price, rating, reviews, delivery time, tags, and badge Provides realistic test data for development before Supabase integration +95/-0    page.tsx Integrate search and mock projects into dashboard                src/app/dashboard/page.tsx Added search state management with searchQuery and setSearchQuery Integrated mock projects data into the projects list Implemented filtering logic across title, category, level, and tags Added empty state UI with search icon and clear button when no results found Updated navbar to pass search props for real-time filtering Added search results counter display Enhanced project cards with fallback emoji icons for mock projects +149/-188 nav.tsx Redesign navbar with integrated search bar                              src/components/nav.tsx Completely redesigned navbar component with modern glassmorphism styling Added search input field with real-time filtering capability Implemented responsive design with separate mobile and desktop layouts Added search icon and clear button (X) for search input Replaced previous complex navbar structure with simplified custom implementation Added mobile menu toggle and search toggle functionality Accepts searchQuery and setSearchQuery props for parent component integration +160/-101
Configuration changes	supabaseclient.ts Temporarily disable Supabase for development                          src/lib/supabaseclient.ts Commented out Supabase client initialization code Added explanatory comments about temporary disabling for local development Exported null mock export to prevent import errors Includes TODO note to re-enable when environment variables are set +11/-1
Bug fix	button.tsx Fix use client directive typo                                                        src/components/button.tsx Fixed typo in 'use client' directive (changed from d 'use client' to 'use client') +1/-1

---

[vercel]

@Prachi0306 is attempting to deploy a commit to the agastya's projects Team on Vercel.

A member of the Team first needs to authorize it.

[qodo-free-for-open-source-projects]

PR Compliance Guide 🔍

Below is a summary of compliance checks for this PR:

Security Compliance
⚪	Disabled client null export Description: Exporting supabase = null can cause runtime errors where methods like supabase.auth are called, potentially breaking auth flows and exposing unauthenticated pages unintentionally. supabaseclient.ts [16-17] Referred Code // Mock export for development - prevents errors when Supabase is imported elsewhere export const supabase = null;
Ticket Compliance
⚪	🎫 No ticket provided Create ticket/issue
Codebase Duplication Compliance
⚪	Codebase context is not defined Follow the guide to enable codebase context checks.
Custom Compliance
🟢	Generic: Meaningful Naming and Self-Documenting Code Objective: Ensure all identifiers clearly express their purpose and intent, making code self-documenting Status: Passed
	Generic: Secure Error Handling Objective: To prevent the leakage of sensitive system information through error messages while providing sufficient detail for internal debugging. Status: Passed
	Generic: Secure Logging Practices Objective: To ensure logs are useful for debugging and auditing without exposing sensitive information like PII, PHI, or cardholder data. Status: Passed
⚪	Generic: Comprehensive Audit Trails Objective: To create a detailed and reliable record of critical system actions for security analysis and compliance. Status: No audit logging: New user-facing actions like search filtering and navigation button clicks were added without any audit or analytics logging to trace critical interactions or outcomes. Referred Code const filteredProjects = allProjects.filter((project) => { if (!searchQuery.trim()) return true; const query = searchQuery.toLowerCase(); return ( project.title.toLowerCase().includes(query) || project.category.toLowerCase().includes(query) || project.level.toLowerCase().includes(query) || project.tags.some((tag) => tag.toLowerCase().includes(query)) ); }); const stats = [ { number: "0%", label: "Plagiarism" }, { number: "5K+", label: "Projects Delivered" }, { number: "98%", label: "Success Rate" }, { number: "24/7", label: "Support" }, ]; const categories = ["Assignments", "Projects", "Presentations", "Termwork"]; return ( ... (clipped 153 lines)
	Generic: Robust Error Handling and Edge Case Management Objective: Ensure comprehensive error handling that provides meaningful context and graceful degradation Status: Missing input guards: The search input and clear actions lack explicit error handling or validation for unexpected values which may cause runtime issues in edge cases. Referred Code {setSearchQuery && ( <div className="relative ml-4"> <div className="relative"> <input type="text" placeholder="Search projects..." value={searchQuery} onChange={(e) => setSearchQuery(e.target.value)} className="w-64 px-4 py-2 pl-10 bg-white/10 backdrop-blur-sm border border-white/20 rounded-full text-white placeholder-white/50 focus:outline-none focus:border-blue-400 focus:ring-2 focus:ring-blue-400/50 transition-all" /> {/* Search Icon */} <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-white/50" /> {/* Clear Button */} {searchQuery && ( <button onClick={clearSearch} ... (clipped 10 lines)
	Generic: Security-First Input Validation and Data Handling Objective: Ensure all data inputs are validated, sanitized, and handled securely to prevent vulnerabilities Status: Unvalidated input: The free-form searchQuery from the navbar is used to filter without explicit sanitization or normalization which could risk injection or unexpected behavior if later used in backend queries. Referred Code const filteredProjects = allProjects.filter((project) => { if (!searchQuery.trim()) return true; const query = searchQuery.toLowerCase(); return ( project.title.toLowerCase().includes(query) || project.category.toLowerCase().includes(query) || project.level.toLowerCase().includes(query) || project.tags.some((tag) => tag.toLowerCase().includes(query)) ); });
Update

Compliance status legend

🟢 - Fully Compliant
🟡 - Partial Compliant
🔴 - Not Compliant
⚪ - Requires Further Human Verification
🏷️ - Compliance label

[qodo-free-for-open-source-projects]

PR Code Suggestions ✨

Explore these optional code suggestions:

Category	Suggestion	Impact
High-level	Implement search via database queries The current search logic filters a static project list on the client. This should be refactored to query the database directly, which is a scalable approach that avoids fetching all records and improves performance. Examples: src/app/dashboard/page.tsx [148-157] const filteredProjects = allProjects.filter((project) => { if (!searchQuery.trim()) return true; const query = searchQuery.toLowerCase(); return ( project.title.toLowerCase().includes(query) || project.category.toLowerCase().includes(query) || project.level.toLowerCase().includes(query) || project.tags.some((tag) => tag.toLowerCase().includes(query)) ); }); Solution Walkthrough: Before: // src/app/dashboard/page.tsx const allProjects = [...hardcodedProjects, ...MOCK_PROJECTS]; const AcademicHub = () => { const [searchQuery, setSearchQuery] = useState(""); const filteredProjects = allProjects.filter((project) => { if (!searchQuery.trim()) return true; const query = searchQuery.toLowerCase(); return ( project.title.toLowerCase().includes(query) || project.category.toLowerCase().includes(query) || project.level.toLowerCase().includes(query) || project.tags.some((tag) => tag.toLowerCase().includes(query)) ); }); // ... render filteredProjects }; After: // src/app/dashboard/page.tsx const AcademicHub = () => { const [searchQuery, setSearchQuery] = useState(""); const [projects, setProjects] = useState([]); useEffect(() => { const fetchProjects = async () => { // This is a conceptual example of a Supabase query. // The actual implementation would use Supabase's JS client. let query = supabase.from('projects').select('*'); if (searchQuery) { query = query.or( `title.ilike.%${searchQuery}%,` + `category.ilike.%${searchQuery}%,` + `level.ilike.%${searchQuery}%` // Tag search is more complex and might require a different approach ); } const { data } = await query; setProjects(data || []); }; fetchProjects(); }, [searchQuery]); // Re-fetches data when search query changes. // ... render projects }; Suggestion importance[1-10]: 9 __ Why: This suggestion correctly identifies a critical architectural flaw; the client-side filtering approach is not scalable and will fail in a production environment with a real database, making it a crucial point to address before the feature is truly "ready to connect to Supabase".	High
General	Optimize search by reducing redundant operations Optimize the search filter by converting the searchQuery to lowercase and trimming it once, outside the filter loop, to avoid redundant operations on each iteration. src/app/dashboard/page.tsx [148-157] +const query = searchQuery.toLowerCase().trim(); const filteredProjects = allProjects.filter((project) => { - if (!searchQuery.trim()) return true; - const query = searchQuery.toLowerCase(); + if (!query) return true; return ( project.title.toLowerCase().includes(query) || project.category.toLowerCase().includes(query) || project.level.toLowerCase().includes(query) || project.tags.some((tag) => tag.toLowerCase().includes(query)) ); }); Apply / Chat Suggestion importance[1-10]: 6 __ Why: This is a valid performance optimization that avoids redundant toLowerCase() and trim() calls within the loop, making the filtering logic more efficient.	Low
	Simplify object creation using spread Refactor the MOCK_PROJECTS mapping to use the spread syntax (...project) for creating new project objects. This will make the code more concise and easier to maintain. src/app/dashboard/page.tsx [130-145] ...MOCK_PROJECTS.map((project, index) => ({ - id: index + 5, - title: project.title, - category: project.category, - level: project.level, - rating: project.rating, - reviews: project.reviews, + ...project, + id: index + 5, // Keep this to avoid ID conflicts with hardcoded projects duration: project.deliveryTime, - price: project.price, originalPrice: project.price * 2, tag: project.badge || "Available", tagColor: project.badge === "Best Seller" ? "bg-amber-500" : project.badge === "New" ? "bg-emerald-500" : project.badge === "Popular" ? "bg-blue-500" : "bg-gray-500", - tags: project.tags, })) [To ensure code accuracy, apply this suggestion manually] Suggestion importance[1-10]: 5 __ Why: The suggestion correctly identifies that using the spread operator (...) improves code conciseness and maintainability by reducing manual property mapping.	Low
	Remove redundant conditional check Simplify the clearSearch function by removing the redundant if (setSearchQuery) check and using optional chaining (setSearchQuery?.("")) instead. src/components/nav.tsx [12-20] const Navbar = ({ searchQuery = "", setSearchQuery }: NavbarProps) => { const [isOpen, setIsOpen] = useState(false); const [showSearch, setShowSearch] = useState(false); const clearSearch = () => { - if (setSearchQuery) { - setSearchQuery(""); - } + setSearchQuery?.(""); }; Apply / Chat Suggestion importance[1-10]: 4 __ Why: The suggestion correctly identifies that the if (setSearchQuery) check is redundant given the rendering logic. Using optional chaining (?.) is a good simplification.	Low
Update

[Prachi0306]

Hi @kris70lesgo, I've verified and confirmed — no merge conflicts detected. The feature is working as expected and ready for merge.

[Prachi0306]

Hi @kris70lesgo,

Following up on my previous request, could you please review the updates and proceed with the merge once they meet your approval?

[kris70lesgo]

@Prachi0306 u should first create an issue of this then get a assurance from me if this feat is needed or not in open source u cant directly make pr without issues

[Prachi0306]

@kris70lesgo, I had already created issue #87 for this, and it was assigned to me. The work in this PR is based on that issue.

[kris70lesgo]

@Prachi0306 sorry my bad as u didn't mention the issue in pr desc I got confused
I have reviewed can u add the search bar to the older navbar I can see u have created a new navbar but we would like to go with the old one

[Prachi0306]

okay I'll complete it by tomorrow

[Prachi0306]

@kris70lesgo I've done the work, please review it

[kris70lesgo]

@Prachi0306 share the video of it working

[Prachi0306]

AsHelp.-.Google.Chrome.2025-11-02.22-15-20.mp4

@kris70lesgo, I've uploded

[kris70lesgo]

@Prachi0306

can u fix this ui bug and also can u remove the extra assignment u added

[Prachi0306]

is these right ??

[kris70lesgo]

@Prachi0306 yeah nice work can u also rebase the branch ur main branch is 8 commits behind so u have to rebase the pr
and after rebase send me the video of it working

[Prachi0306]

AsHelp.-.Google.Chrome.2025-11-07.00-17-27.-.Trim.mp4

@kris70lesgo, please review.

[kris70lesgo]

@Prachi0306 why the navbar is removed from the homepage ?

[Prachi0306]

@kris70lesgo
Oh sorry, I've done the work now.