Skip to content

Latest commit

 

History

History
184 lines (122 loc) · 6.07 KB

README.md

File metadata and controls

184 lines (122 loc) · 6.07 KB

🔍 Product Search & Filter Webpage

License: MIT GitHub issues GitHub stars HTML5 TailwindCSS JavaScript

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

Product Search & Filter Banner

🛠️ 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

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

🙏 Acknowledgments

📊 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