Overview

Weather-Based Outfit Recommender is a responsive and interactive React + TypeScript application that helps users decide what to wear based on the current weather of a searched city. It provides weather details from OpenWeatherMap and displays outfit suggestions based on temperature and conditions.

The app also stores and displays the last 5 searched cities using Redux Toolkit, offers smooth animations, and supports both light and dark themes for better user experience.

Key Features

• 🌤️ Live Weather: Real-time weather data fetched from OpenWeatherMap API.
• 👕 Outfit Recommendations: Intelligent suggestions based on temperature and conditions.
• 📍 Search History: Stores last 5 searched cities using Redux Toolkit.
• 🌙 Dark/Light Mode: Theme toggle implemented using Tailwind CSS.
• ✨ Animations: Smooth transitions and visual feedback using Framer Motion.
• 📱 Responsive Design: Optimized for mobile and desktop devices.

Tech Stack

• Frontend: React.js, Next.js, TypeScript
• State Management: Redux Toolkit
• Styling: Tailwind CSS
• Animations: Framer Motion
• Icons: Lucide Icons
• API: OpenWeatherMap

Challenges & Solutions

• ✅ Search Optimization: Implemented debounce and state separation to ensure efficient API calls.
• ✅ Theme Toggle: Leveraged Tailwind’s dark mode classes to provide seamless UI switching.
• ✅ Redux Store: Designed a lightweight and persistent recent city search feature using Redux Toolkit.