Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/Avendaosander/Plataforma-social/llms.txt

Use this file to discover all available pages before exploring further.

The search page at /home/search is the primary discovery surface on Plataforma Social. It renders the same CardPost grid as the main feed but layers on a text search bar and a collapsible filter sidebar so users can narrow results by technology, category, and rating. All search state lives in the URL — queries and filters are encoded as query parameters, making every search result shareable and bookmarkable with a direct link. Both the home feed (/home) and the search page (/home/search) share the same navigation pattern: the user types into an InputWithIcon field and submits to push a ?query= parameter onto /home/search. 
// frontend/app/home/search/page.tsx
function Search() {
  const [searchText, setSearchText] = useState('')
  const [isFilterActive, setIsFilterActive] = useState(false)
  const router = useRouter();

  const handleFilterState = () => {
    setIsFilterActive(!isFilterActive)
  }

  const handleSubmit = () => {
    router.push(`/home/search?query=${encodeURIComponent(searchText)}`);
  }

  return (
    <>
      <section className='flex flex-col items-center w-full gap-5'>
        <InputWithIcon
          type='text'
          placeholder='Buscar'
          value={searchText}
          onChange={e => setSearchText(e.target.value)}
          endContent={<SearchIcon className='size-5' />}
          onSubmit={handleSubmit}
        />
        <CardPost/>
        <CardPost/>
        <CardPost/>
        <CardPost/>
      </section>
      {/* filter sidebar — see Filter Sidebar section below */}
    </>
  )
}
The encodeURIComponent call ensures that spaces and special characters in the search text are safely encoded as URL components (e.g., "Button React" becomes Button%20React).

​
Technology Filter via CardPost Tags

Every CardPost card displays its tech-stack tags as clickable pill buttons. Each tag is a <Link> that navigates directly to /home/search?tech=<technology>, bypassing the search bar entirely: 
// frontend/app/components/ui/CardPost.tsx
<Link href={'/home/search?tech=tecnologia'}>
  <Button
    variant='flat'
    color='secondary'
    shape='full'
    size='sm'
    marginX='none'
    className='px-3 py-0.5'
  >
    Tecnologia
  </Button>
</Link>
This means a user who spots an interesting React component can click its React tag to see all React components on the platform without typing anything in the search bar.

​
Filter Sidebar

The search page has a fixed right-side panel (right-0, full screen height) that contains a Filtrar button at the top and a Crear button at the bottom.

​
Toggling the Filter Panel

The Filtrar button toggles isFilterActive state. When active, the panel expands to w-[250px] with a bg-seagreen-900 background and reveals the filter controls. The button color also switches from primary to secondary to reflect the active state: 
// frontend/app/home/search/page.tsx
const [isFilterActive, setIsFilterActive] = useState(false)

const handleFilterState = () => {
  setIsFilterActive(!isFilterActive)
}

<Button
  className='px-3'
  color={`${isFilterActive ? 'secondary' : 'primary'}`}
  startContent={<PlusIcon />}
  onClick={handleFilterState}
>
  Filtrar
</Button>

<div className={`${isFilterActive
  ? 'w-[250px] h-full flex flex-col items-center bg-seagreen-900 rounded-l-xl text-white p-3 gap-5'
  : ''
}`}>
  {isFilterActive && (
    <>
      <p className="text-lg font-medium">Tecnologias</p>
      <select name="tech" id="tech" defaultValue={'default'}
        className="bg-storm-50 px-3 py-1 rounded-lg ring-1 ring-seagreen-950 text-seagreen-950 outline-none w-full">
        <option value="default" disabled>-- Selecione --</option>
        <option value="React">React</option>
      </select>
      <p className="text-lg font-medium">Categorias</p>
      <p className="text-lg font-medium">Clasificacion</p>
    </>
  )}
</div>

​
Filter Panel Contents

When the panel is open, three filter sections are displayed:
Section labelControlNotes
Tecnologias<select> dropdownOptions include React (and others); defaults to -- Selecione --
CategoriasLabel onlyCategory filter UI (in development)
ClasificacionLabel onlyRating filter UI (in development)
Filter selections and text queries work together — the ?query= and ?tech= parameters can both be present in the URL simultaneously. GraphQL queries on the backend receive both values and apply them as compound filters.
Here is a quick reference for all URL-driven navigation patterns used across the search feature: 
// Text search — from the InputWithIcon bar on /home or /home/search
router.push(`/home/search?query=${encodeURIComponent(searchText)}`)

// Technology filter — from a CardPost tech tag
<Link href={'/home/search?tech=tecnologia'}>
  <Button>Tecnologia</Button>
</Link>

// Technology filter — from the sidebar select dropdown
// Selecting "React" navigates to: /home/search?tech=React

​
Additional Feed Views

Beyond the main feed and search results, the Navbar links to two more curated feeds:

Populares — /home/trending

Accessible from the Populares Navbar link (TrendingIcon). Shows components ranked by engagement — a discovery surface for the highest-rated or most-commented posts on the platform.

Siguiendo — /home/followers

Accessible from the Siguiendo Navbar link (UserCheck icon). Shows only posts from users you follow, creating a personalized feed of trusted contributors.
All three feeds — /home, /home/trending, and /home/followers — render CardPost components and share the same interaction patterns (follow, rate, comment, share, bookmark). The only difference is the GraphQL query used to fetch and sort the posts.

Build docs developers (and LLMs) love

Get started for freeTalk to us