Implement search and filter page

[respp]

📘 Issue: Implement Search & Filter Results Page (/search/page.tsx)

🎯 Objectives

Design and implement a fully functional search results page where users can explore properties based on filters like price, amenities, type, and rating. This page should also include an interactive map showing the locations of properties.

🔍 Technical Steps

1. Create the /search/page.tsx file under the appropriate route in the Next.js app.
2. Implement a pre-filled search bar showing the user's selected location, dates, and guests.
3. Add a sidebar with filters:
   • Price range (e.g., slider)
   • Property type (dropdown or checkboxes)
   • Amenities (wifi, pool, pets, etc.)
   • Rating (stars)
   • Availability calendar (optional)
4. Implement sorting options:
   • Price (low to high, high to low)
   • Rating
   • Distance
   • Newest
5. Create a property card grid to show search results:
   • Title, image, price in USDC, rating, location
   • CTA: "View Details"
6. Implement infinite scroll or lazy loading for better UX.
7. Integrate Mapbox or Google Maps for location-based visual filtering:
   • Show pins for each property
   • Zoom/drag interaction filters visible results
8. Make the layout fully responsive.

✅ Acceptance Criteria

Functionality

• Search page accessible via /search
• Results show based on query params (location, guests, dates)
• Sidebar filters update the grid in real-time (or with Apply button)
• Sorting works and is visible
• Clicking on a property redirects to its detail page
• Map interaction dynamically affects the property list (if enabled)

Security

• Sanitize and validate all search inputs
• Prevent injection or malformed query parameters
• Ensure map data and API keys are securely handled

UX/UI

• Fully responsive layout
• Mobile-first design
• Smooth, subtle animations
• Clear visual hierarchy and consistent spacing
• Dark/Light Mode Support:
  • Font: Quicksand used across all sections
  • In light mode:
    • Background: #CFF0FF
    • Text color: #182A47
    • CTA buttons should contrast well with the background (e.g., deep blue or dark teal)
  • In dark mode:
    • Background: #0B1D39
    • Text color: #C2F2FF
    • Components (search bar, cards, filters) must adapt using dark: variants in Tailwind
  • Theme switching handled via next-themes

Code Quality

• Proper use of TypeScript with strict types
• Use of reusable components (PropertyCard, SearchBar, FilterSidebar)
• Clean separation of concerns: logic vs UI
• Follows ESLint and Prettier rules

🧪 Test Scenarios

• User enters /search?location=BuenosAires&guests=2&dates=... and sees pre-filled fields
• User filters by price and sees grid update
• User selects a property and gets redirected to /properties/:id
• Dark mode renders properly
• Infinite scroll loads more results as user scrolls
• Map interaction updates visible properties

🌎 References

• Airbnb search page UX
• Mapbox GL JS docs
• Tailwind dark mode best practices

🔒 Security Requirements

• Sanitize all query strings and filter inputs
• Limit max results per fetch to avoid DoS
• Secure map API keys via env variables

🛠️ Technologies Used

• Next.js (next)
• TailwindCSS (tailwindcss, @tailwindcss/postcss, tailwind-merge)
• tw-animate-css (extension for animations in TailwindCSS)
• Lucide-react (icons)
• Next-themes (dark/light mode in Next.js)
• Zod (validation)
• @simplewebauthn/browser (WebAuthn authentication)
• @stellar/stellar-sdk (interaction with the Stellar blockchain)
• base64url, bigint-conversion, cbor-x (utilities for handling cryptographic data)
• clsx, class-variance-authority (helpers for conditional CSS classes)
• TypeScript (typescript, React and Node types)
• ESLint (eslint, eslint-config-next, @eslint/eslintrc) (linter for best practices)
• shadcn/ui (UI components built with Tailwind and Radix UI)

---

I’ve attached an example of the expected appearance, followed by a visual guide. This document is not purely textual, suggestions for design improvements and creative input are encouraged and appreciated.

[Lynndabel]

Hello, Is it ok to take on this issue?

[A6dulmalik]

Could I take on this issue? Hello,
I am interested in the issue in view, implementing the search and filter result page. I have carefully reviewed the issue description and the associated guidelines to ensure I have a complete understanding before diving in, and I can deliver.

I look forward to contributing to this project!

Recommended by OnlyDust for high-quality and dependable contributions.

[Miss-nonso]

As a Frontend Developer with strong experience in Next.js, TypeScript, and TailwindCSS, I'm confident in delivering a high-quality, responsive, and performant search experience as described. I've successfully built similar components involving dynamic filters, map integrations (Mapbox), infinite scroll, and reusable design systems using shadcn/ui and next-themes for theme support.

Here’s what I’d focus on:

• Clean, modular architecture with separation of concerns (UI, logic, validation)
• Fully responsive with smooth UX
• Secure handling of query parameters and API keys
• Clear, maintainable code with ESLint + Prettier + strong TypeScript types
• Efficient state and filter management for real-time UI updates

Looking forward to contributing to the project. Please assign it to me.

[Tnath1]

Hi, my name is Jonathan. I am a frontend developer skilled in Next.js, React, TypeScript, TailwindCSS, Mapbox, and state management.

For this task, I will:

-Create /search/page.tsx in the Next.js app with a responsive layout.

-Implement a pre-filled search bar using query params for location, dates, and guests.

-Build a sidebar with filters (price slider, property type, amenities, rating) using reusable components.

-Add sorting options (price, rating, distance, newest) with real-time grid updates.

-Develop a property card grid with title, image, USDC price, rating, location, and "View Details" CTA.

-Integrate Mapbox for interactive property pins with zoom/drag filtering.

-Implement infinite scroll for seamless UX.

-Ensure dark/light mode support with Quicksand font and specified colors.

-Sanitize inputs, secure API keys, and validate queries using Zod.

-Test functionality, responsiveness, and submit clean, typed, ESLint-compliant code.

ETA: 5 days

[Pvsaint]

I'm a frontend and smart contract developer proficient in react, nextjs, cairo, typescript and solidity, I'd love to contribute to this project.

[Rampop01]

I would like to work on this task because i have search and filtered page in almost every project i worked on, i will deliver
Thank you

[feranmiba]

I am interested in solving this issue
Can i be assigned be this ?

[respp]

the issue is yours @Miss-nonso , Please join the Telegram community to understand all its details: t.me/stellarentdevs/1

[respp]

any updates on the issue? @Miss-nonso

[Miss-nonso]

any updates on the issue? @Miss-nonso

Had some technical issues but it's resolved now. You'll get a PR pretty soon