🔍 Product Search & Filter Webpage

A responsive and user-friendly product search interface that fetches product data from FakeStore API and enables real-time filtering based on product title, description, or price. Built with vanilla JavaScript, HTML5, and Tailwind CSS, demonstrating modern web development practices and clean code architecture.

🌟 Features

• Real-time Search Filtering: Instantly filter products as you type
• Responsive Design: Seamlessly adapts to all screen sizes
• Lazy Loading: Images load on-demand for better performance
• Clean UI/UX: Modern, minimalist design with smooth animations
• Error Handling: Robust error management for API requests
• Optimized Performance: Efficient DOM manipulation and event handling

🚀 Live Demo

Check out the live demo: Product Search & Filter Webpage

📸 Screenshots

🛠️ Technologies Used

• HTML5: Semantic markup for better accessibility and SEO
• Tailwind CSS: Utility-first CSS framework for responsive design
• JavaScript (ES6+): Modern JavaScript features for clean, efficient code
• Axios: Promise-based HTTP client for API requests
• FakeStore API: RESTful API for product data

📋 Prerequisites

• Modern web browser (Chrome, Firefox, Safari, Edge)
• Node.js and npm (for local development)
• Basic understanding of HTML, CSS, and JavaScript

🎯 Getting Started

1. Clone the repository:

   git clone https://github.com/VinayNoogler000/Fetch-Product-Search-and-Filter-Webpage.git

2. Navigate to project directory:

   cd Fetch-Product-Search-and-Filter-Webpage

3. Install tailwindcss via npm:

   npm install -D tailwindcss

4. Start the Tailwind's build process to Build the CSS file:

   npx tailwindcss -i src/style.css -o dist/output_v1.css --watch

5. Open index.html in your preferred browser & see the project working live.

💡 Implementation Details

Key Components

1. Search Input

   • Real-time filtering with debounced input handling
   • Clear visual feedback for user interactions
   • Responsive search icon integration

2. Product Display

   • Dynamic product card generation
   • Efficient DOM manipulation
   • Lazy loading for images
   • Responsive grid layout

3. API Integration

   • Asynchronous data fetching
   • Error handling
   • Data caching for better performance

Code Architecture

project-root/
├── index.html          # Main HTML structure
├── app.js             # Core JavaScript functionality
├── style.css          # Tailwind CSS styling
└── README.md          # Project documentation

🎨 UI/UX Features

• Smooth transitions and animations
• Intuitive search interface
• Responsive product cards
• Clear visual hierarchy
• Accessible design elements
• Error messages

📱 Responsive Design

The website is fully responsive across all device sizes:

• Mobile devices (< 460px)
• Tablets (460px - 768px)
• Laptops & Desktops (> 768px)

Key responsive features:

• Fluid typography
• Flexible flex layouts
• Adaptive product card designs
• Mobile-first approach

🔄 API Integration

The project integrates with the free FakeStore API:

• Endpoint: https://fakestoreapi.com/products
• Data format: JSON
• Products include:
  • Title
  • Description
  • Price
  • Image URL

🤝 Contributing

Contributions are welcome! Here's how you can help:

1. Fork the repository
2. Create your feature branch (git checkout -b feature/AmazingFeature)
3. Commit your changes (git commit -m 'Add some AmazingFeature')
4. Push to the branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

📝 License

This project is licensed under the MIT License - see the LICENSE file for details.

📞 Contact Developer & Owner

Vinay Tambey

• Email: Send Email to Vinay
• LinkedIn: Vinay Tambey
• GitHub: @VinayNoogler000
• Twitter/X: @VinayNoogler000

For any queries or suggestions, feel free to reach out through above mentioned links.

🙏 Acknowledgments

• FakeStore API for providing the product data
• Tailwind CSS for the styling framework
• Axios for HTTP requests

📊 Project Status

This project is, currently, not in development by the Owner, but we're always looking to add new features and improvements!

💼 Support

Give a ⭐️ if this project helped you!

---

Made with ❤️ by Vinay Tambey