Build an Outfit Planner App

You know that moment where you're standing in front of your closet, late for brunch, staring at a pile of clothes like "I literally have nothing to wear" even though you have 47 tops? Let's fix that. With code.

We're building an app where you can:

Add clothing items with categories (tops, bottoms, shoes, accessories)
Tag them by color, season, and vibe
Create and save outfit combos
Get random outfit suggestions when you're feeling indecisive

💡 Pro tip

Want to see the finished app first? Try the live demo and come back to learn how it works!

What We're Building

1// Our app will have:
2// 1. A closet — your full wardrobe, categorized
3// 2. An outfit builder — drag items together
4// 3. A 'surprise me' button — random outfit generator
5
6// Here's what a clothing item looks like:
7const item = {
8id: 1,
9name: 'Oversized blazer',
10category: 'outerwear',    // tops, bottoms, shoes, outerwear, accessories
11color: 'black',
12season: ['fall', 'spring'],
13vibe: ['office', 'date night', 'brunch'],
14image: '/closet/black-blazer.jpg'
15};

💬 Denise says

This is genuinely how I got excited about coding. I was bored by tutorial apps that tracked "users" and "posts." But an app that helps me get dressed? NOW we're talking. The best way to learn is to build something you'll actually use.

Step 1: Set Up Your Closet Data

First, let's create the structure for your wardrobe:

1// closet-data.js — your wardrobe lives here!
2
3const closet = [
4{
5id: 1,
6name: 'White crop top',
7category: 'tops',
8color: 'white',
9season: ['summer', 'spring'],
10vibe: ['casual', 'brunch', 'beach'],
11},
12{
13id: 2,
14name: 'High-waisted jeans',
15category: 'bottoms',
16color: 'blue',
17season: ['all'],
18vibe: ['casual', 'brunch', 'shopping'],
19},
20{
21id: 3,
22name: 'White Air Forces',
23category: 'shoes',
24color: 'white',
25season: ['all'],
26vibe: ['casual', 'shopping', 'concert'],
27},
28{
29id: 4,
30name: 'Gold hoop earrings',
31category: 'accessories',
32color: 'gold',
33season: ['all'],
34vibe: ['brunch', 'date night', 'going out'],
35},
36{
37id: 5,
38name: 'Black mini skirt',
39category: 'bottoms',
40color: 'black',
41season: ['summer', 'spring'],
42vibe: ['date night', 'going out', 'concert'],
43},
44];

Step 2: Filter Your Closet

Now let's write functions to search your closet:

1// Get all items in a category
2function getByCategory(category) {
3return closet.filter(item => item.category === category);
4}
5
6// Get items that match a vibe
7function getByVibe(vibe) {
8return closet.filter(item => item.vibe.includes(vibe));
9}
10
11// Get items for a specific season
12function getBySeason(season) {
13return closet.filter(item =>
14item.season.includes(season) || item.season.includes('all')
15);
16}
17
18// Combine filters — 'show me casual tops for summer'
19function filterCloset(category, vibe, season) {
20return closet.filter(item =>
21item.category === category &&
22item.vibe.includes(vibe) &&
23(item.season.includes(season) || item.season.includes('all'))
24);
25}
26
27// Try it!
28console.log(getByVibe('date night'));
29// Returns: Black mini skirt, Gold hoop earrings

Step 3: Random Outfit Generator

The best part — a "surprise me" button:

1// Pick a random item from a list
2function pickRandom(items) {
3const index = Math.floor(Math.random() * items.length);
4return items[index];
5}
6
7// Generate a complete random outfit
8function surpriseMe(vibe) {
9const tops = getByCategory('tops');
10const bottoms = getByCategory('bottoms');
11const shoes = getByCategory('shoes');
12const accessories = getByCategory('accessories');
13
14// If a vibe is specified, filter by it
15const filteredTops = vibe ? tops.filter(t => t.vibe.includes(vibe)) : tops;
16const filteredBottoms = vibe ? bottoms.filter(b => b.vibe.includes(vibe)) : bottoms;
17const filteredShoes = vibe ? shoes.filter(s => s.vibe.includes(vibe)) : shoes;
18const filteredAccs = vibe ? accessories.filter(a => a.vibe.includes(vibe)) : accessories;
19
20return {
21top: pickRandom(filteredTops),
22bottom: pickRandom(filteredBottoms),
23shoes: pickRandom(filteredShoes),
24accessory: pickRandom(filteredAccs),
25};
26}
27
28// Generate a date night outfit:
29const outfit = surpriseMe('date night');
30console.log('Top:', outfit.top?.name);
31console.log('Bottom:', outfit.bottom?.name);
32console.log('Shoes:', outfit.shoes?.name);
33console.log('Accessory:', outfit.accessory?.name);

Step 4: Build the UI with React

Here's a simple React component for displaying your closet:

1import { useState } from 'react';
2
3function ClosetApp() {
4const [activeVibe, setActiveVibe] = useState('all');
5const [outfit, setOutfit] = useState(null);
6
7const vibes = ['all', 'casual', 'brunch', 'date night', 'going out'];
8
9const displayedItems = activeVibe === 'all'
10? closet
11: closet.filter(item => item.vibe.includes(activeVibe));
12
13return (
14<div className='app'>
15<h1>My Closet</h1>
16
17{/* Vibe filter buttons */}
18<div className='vibes'>
19{vibes.map(vibe => (
20<button
21key={vibe}
22onClick={() => setActiveVibe(vibe)}
23className={activeVibe === vibe ? 'active' : ''}
24>
25{vibe}
26</button>
27))}
28</div>
29
30{/* Surprise me button */}
31<button onClick={() => setOutfit(surpriseMe(
32activeVibe === 'all' ? null : activeVibe
33))}>
34Surprise Me!
35</button>
36
37{/* Show generated outfit */}
38{outfit && (
39<div className='outfit-result'>
40<h2>Your Outfit:</h2>
41<p>Top: {outfit.top?.name}</p>
42<p>Bottom: {outfit.bottom?.name}</p>
43<p>Shoes: {outfit.shoes?.name}</p>
44<p>Accessory: {outfit.accessory?.name}</p>
45</div>
46)}
47
48{/* Closet grid */}
49<div className='closet-grid'>
50{displayedItems.map(item => (
51<div key={item.id} className='closet-card'>
52<span className='category-tag'>{item.category}</span>
53<h3>{item.name}</h3>
54<p>{item.vibe.join(', ')}</p>
55</div>
56))}
57</div>
58</div>
59);
60}

💡 Pro tip

Want to add photos? You can use your phone to snap quick pics of each item, save them in a /public/closet/ folder, and add an image field to each item. Then display them with an img tag in the cards. Your app starts looking like a real fashion app!

Level Up Ideas

Once you've got the basics working, try adding:

Photo upload — snap pics of your clothes and display them
Saved outfits — save combos you love (use localStorage)
Weather integration — use a weather API to suggest season-appropriate outfits
Color matching — suggest items that go well together based on color theory
Wear tracking — log which outfits you've worn so you don't repeat

💬 Denise says

You just planned out a legit app. Not a boring to-do list — an app that helps you get dressed. This is the kind of project that makes your portfolio stand out AND that you'll actually enjoy building. Every feature you add teaches you something new: photos teach you file handling, weather teaches you APIs, saving outfits teaches you data persistence. Learning by building stuff you care about is literally the cheat code.