What To Wear

The Idea

Picking what to wear sounds trivial until you realize you're standing in front of your closet, unsure whether today is a jacket day. The idea was simple: pull in real weather data and show only the clothing that actually makes sense for the conditions.

How It Works

The app fetches current weather from the OpenWeatherMap API using the user's location. The temperature is mapped to one of three categories — hot, warm, or cold — and the clothing card database is filtered to show only items tagged for that category.

Key Features

Live weather integration — fetches current temperature and conditions from OpenWeatherMap

Clothing card database — each item stores an image, name, and weather category (hot / warm / cold)

Add your own items — a modal form lets users add new clothing pieces and tag them for the appropriate weather

Filtered display — the main view automatically shows only weather-appropriate clothing

Persistent card storage — clothing items are stored and retrieved from a backend database

Technical Highlights

Dual API Architecture

The app coordinates two data sources: the public OpenWeatherMap API for weather and a private clothing database for user items. Both are queried on load and combined in the rendering logic — weather determines which subset of clothing cards to display.

Modal-Driven UX

Adding a new item opens a modal with a form for the item image URL, name, and weather category. This keeps the main view clean while still making the action discoverable. React Router handles navigation between the main wardrobe view and any detail pages.

Component Structure

The app is structured around three main areas:

Header — displays current weather and the add-item button

Card grid — renders filtered clothing items based on current conditions

Modal — form for creating new clothing entries

Use Case

Anyone building out a capsule wardrobe or trying to make mornings less chaotic. The filtering logic means you're never looking at winter coats when it's 85°F outside — only the relevant items surface.

What I Learned

This project was my first time coordinating multiple external APIs in a React app. Managing loading states and error cases for two independent data sources — one public (weather), one private (clothing DB) — required thinking carefully about async flow and how to handle partial failures gracefully.

Project Vlog