Outfit Matcher Project

Overview

The Outfit Matcher is a web-based application that helps users filter and find outfits based on certain criteria. The app allows users to apply various filters such as event, season, body, and style to narrow down the available outfits. It can be used for fashion-related e-commerce platforms, wardrobe management, or personal style recommendations.

Features

• Outfit Filtering: Allows users to filter outfits based on different attributes like event, season, body type, and style.
• Responsive Design: Optimized for both desktop and mobile devices.
• API Integration: Fetches outfits from the backend using the fetchOutfits function.
• Fallback Handling: Provides fallback images when the API request fails or returns no results.
• Simulated API Delay: Provides a simulated delay for demo purposes to mimic real-world network conditions.

Technology Stack

• Frontend:

  • JavaScript (ES6+)
  • Fetch API for making network requests
  • HTML/CSS for the web interface
  • (Optional) React (if integrated in a React-based project)

• Backend:

  • Java (Servlets)
  • JSON handling using org.json library
  • (Optional) Database (if required for storing outfits data)

• Other Tools:

  • Git/GitHub for version control
  • Postman for testing API endpoints

Setup

Frontend

1. Clone the repository or create a new project folder.
2. Add the fetchOutfits function to your frontend JavaScript.
3. Ensure the fallback.js file is available in the same directory for fallback handling.

Backend

1. Set up a Java web application.
2. Ensure the OutfitFilterUtil class is available to filter the outfits data based on the provided criteria.
3. Expose the filtering functionality via an HTTP POST endpoint (/outfits).

Development

Adding New Filters

To add additional filters (e.g., color, material), follow these steps:

Frontend:

• Add new filter options to the form or filter section.
• Modify the fetchOutfits function to include new filter fields in the request payload.

Backend:

• Update the OutfitFilterUtil class to include logic for handling new filter criteria.
• Modify the containsIgnoreCase method to check if the new filters match the items in the data.

---

Improving the Matching Logic

If you want to add more advanced matching logic:

Partial Matching:

• Update the containsIgnoreCase method to handle partial matches or multi-value comparisons.

AND/OR Logic:

• Modify the backend logic to support AND or OR conditions between filters.

---

Troubleshooting

1. Issue: No outfits returned, only fallback images

Solution:

• Ensure that the filters are correctly set (check for typos or case mismatches between the frontend and backend).
• Verify that the database or data source contains entries that match the filters.

2. Issue: API returns a 500 error

Solution:

• Check the backend logs for stack traces to identify errors in the processing logic.
• Ensure that the incoming data is valid and correctly formatted.

---

License

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