WTWR: Weather-Based Wardrobe Recommender — Frontend

A responsive React application that recommends outfits based on real-time weather conditions and user preferences.

Demo

Watch the full walkthrough here:
https://drive.google.com/file/d/1t3nKE09WM2USEuP8KLYoDGpm5oVzsi8M/view?usp=sharing

Overview

WTWR (“What To Wear?”) is a full-stack MERN application that helps users decide what to wear based on the current weather in their location.
The frontend provides a clean, intuitive interface for browsing recommended outfits, managing wardrobe items, and interacting with user-specific content.

This frontend is deployed on Vercel and communicates with a Node/Express backend hosted on Render.

Features

• Real-time weather for your location (via the browser), falling back to Tempe, AZ if location is unavailable
• Outfit recommendations filtered by the current temperature (hot / warm / cold)
• Personal home page: logged-in users see their own wardrobe, visitors see a default one
• Fahrenheit / Celsius toggle
• User authentication (signup/login) and profile editing (name and avatar)
• Full wardrobe management
  • Add clothing items
  • Delete clothing items
  • Like/unlike items
• Clear error messages and loading states in forms (e.g. wrong password, server waking up)
• Modals close with the Escape key, the close button, or a click outside
• Responsive UI built with React
• Automatic default wardrobe population for new users
• Clean, modern component architecture

Tech Stack

• React
• JavaScript
• Vite
• CSS
• Fetch API
• Vercel Deployment
• OpenWeather API
• JWT Authentication

Live Deployment

Frontend (Vercel):
https://se-project-react-blue.vercel.app/

Backend (Render):
https://se-project-express-vfq4.onrender.com

Project Structure

src/
  components/   # one folder per component (JSX + CSS)
  contexts/     # current user and temperature unit
  hooks/        # useForm
  utils/        # API, auth, and weather helpers
  assets/       # images
  main.jsx

Installation & Setup

1. Clone the repo
2. Install dependencies

   npm install
   

3. Set the backend URL in .env (or .env.local to override it locally)

   VITE_API_URL=http://localhost:3001
   

4. Start the development server (opens at http://localhost:3000)

   npm run dev
   

Backend Repository

https://github.com/xfactor107/se_project_express

Author

Developed by Alejandro Jimenez