Sortify is a data filtering web app designed to help users find products from a collection based on specific filters such as size, price range, and name. Whether you're browsing through a large e-commerce catalog or working with a dataset, Sortify provides an intuitive interface to narrow down the options and view only what you're interested in. The app's clean and responsive design ensures users can easily sort and filter products on both desktop and mobile devices.
- Filter by Size: Filter products based on size options (e.g., S, M, L, XL).
- Filter by Price Range: Set a custom price range to view products that fall within the budget.
- Filter by Name: Search for products by name or part of a name.
- Multi-Filter Support: Apply multiple filters simultaneously to refine search results.
- Real-Time Filtering: The product display updates in real-time as users adjust the filters.
- Clear Filters: Option to reset all filters and view all products again.
- Fixed Filter Sidebar: The filter options remain fixed on the left side of the screen, offering easy access while browsing.
- The app is fully responsive and adjusts automatically to different screen sizes, ensuring an optimal browsing experience on all devices.
- Minimalistic Layout: The product display area is simple and uncluttered, making it easy to focus on the items that matter.
- Interactive Filters: Filters are designed to be easy to interact with, providing an intuitive user experience.
-
Frontend:
- React.js: Used to build the interactive and dynamic user interface.
- Tailwind CSS: For a responsive and modern design, making it easier to customize the UI.
- JavaScript (ES6): For implementing app logic such as filtering and state management.
-
Backend (Optional - if applicable):
- Node.js: For backend logic if data is fetched dynamically from a database or API.
- Express.js: A minimal web framework for handling API requests.
-
Database (Optional - if applicable):
- MongoDB / MySQL: If your app fetches products from a database.
To set up the project locally:
-
Clone the repository:
git clone https://github.com/username/sortify.git
-
Install dependencies:
cd sortify npm install -
Run the app:
npm start
-
Open the app in your browser at
http://localhost:3000.
This project is licensed under the MIT License - see the LICENSE file for details.
Before cloning, please DM me for access.
Let me know if you need any changes or further additions!