Filter Ease

A simple and efficient product filtering system, experiencing the latest technologies, streamlines your search effortlessly.

• Product Filtering

• Tech Stack
• Installation
• Important
• Environment Variables
• Starting the Development Server
• Contributing
• Live Preview

• TypeScript
• Next.js
• Tailwind CSS
• TanStack Query
• Zod
• Cloudflare Vectorize

Make sure you have Node.js installed on your machine.

Clone the repository:

git clone https://github.com/nyintosh/filter-ease.git

Navigate to the project directory:

cd filter-ease

Install dependencies: Run one of the following commands based on your preferred package manager:

• Using npm:

npm install

• Using yarn:

yarn install

• Using pnpm:

pnpm install

Products are stored in a Cloudflare Vectorize index as [color, size, price] vectors, with their details as metadata. Filters run as metadata filters, and sorting by price queries for the vector nearest the lowest or highest price.

To set it up in your own Cloudflare account (all within the free plan):

npm install --global cf && cf auth login
cf vectorize create --name filter-ease --config-dimensions 32 --config-metric euclidean
cf vectorize metadata-index create filter-ease --property-name color --index-type string
cf vectorize metadata-index create filter-ease --property-name size --index-type string
cf vectorize metadata-index create filter-ease --property-name price --index-type number
pnpm db:seed

Copy .env.example to .env and set:

• CLOUDFLARE_ACCOUNT_ID
• CLOUDFLARE_API_TOKEN: an API token with the Vectorize Read permission

To start the development server: Run one of the following commands based on your preferred package manager:

• Using npm:

npm run dev

• Using yarn:

yarn dev

• Using pnpm:

pnpm dev

Open your browser and navigate to http://localhost:3000 to see the app live.

If you want to add additional features and improvements, we welcome contributions! Please follow these guidelines:

• Fork the repository
• Create a new branch
• Make your changes
• Submit a pull request

You can preview the live version of the project at https://filter-ease.vercel.app.