Overview

WhatToWear is a full-stack application that helps users decide what to wear each day by combining live weather data and a personal wardrobe inventory. The backend (Express) aggregates weather feeds, manages user wardrobes, and returns outfit suggestions. The frontend (React/Vite) provides an intuitive UI for managing clothing items, viewing daily suggestions, and saving favorites.

Key Features

• Weather-Aware Recommendations: Fetches local weather (temperature, precipitation, wind) and recommends outfits suitable for current conditions and forecasts.
• Wardrobe Inventory: Users upload or create clothing items with attributes (type, layers, warmth, colors, images). Items are stored in the user profile and can be tagged.
• Outfit Builder & History: Saved outfit combinations and history let users reuse looks and refine recommendations over time.
• Lightweight API Layer: Server aggregates third-party weather APIs, normalizes responses, and applies caching to limit external calls.
• Dockerized & CI/CD Ready: Containerized backend and frontend with GitHub Actions for automated builds and deployment.

Technologies Used

• Backend: Node.js, Express
• Frontend: React (Vite)
• External APIs: OpenWeatherMap (or alternate provider)
• Data Storage: MongoDB (Mongoose) for users and wardrobe
• Caching: Redis or in-memory TTL cache for weather and recommendation results
• Auth: JWT for session handling and protected user resources
• Deployment: Google Cloud, optional Nginx reverse proxy + Certbot for SSL
• Utilities: multer / cloud storage for item images, axios for HTTP, cron jobs for scheduled syncs

Challenges and Learnings

• Data Modeling for Clothing: Designing a flexible schema for clothing attributes (layering, warmth, formality, color) was key to meaningful recommendations.
• Normalization of External Data: Weather providers use different structures; an adapter layer simplifies downstream logic.
• Caching & Rate Limits: Implemented short TTLs and request coalescing to avoid exceeding external API rate limits while keeping suggestions fresh.
• Image Handling: Optimizing upload, storage, and delivery of item photos improved UX and reduced bandwidth.

Outcome

• A coherent MVP that suggests context-appropriate outfits, enables wardrobe management, and integrates with external data sources.
• Backend endpoints for wardrobe CRUD, suggestion generation, and user preferences are available and ready for frontend consumption.
• The system is containerized and prepared for deployment; frontend can run as a static site while the API runs in a Docker container on a VM.
• Domain: https://wtwrkedycat.baselinux.net
• Frontend repo: https://github.com/kedycatsudo/se_project_react

Deployment & Next Steps

• Point a domain or free DNS to your VM and create an A record for the API host.
• Use Nginx as a reverse proxy and obtain SSL certificates via Certbot to enable HTTPS.
• Harden the VM (SSH keys, disable root login, enable UFW for 22/80/443).
• Store API keys and secrets in CI/CD secrets or a secrets manager; use environment variables at runtime.
• Add Redis for stable caching if scaling, and enable structured logging and monitoring.
• Improve personalization with lightweight ML models or heuristics, add image auto-tagging (color, type), and implement offline-first frontend caching for reliability.
• Offer social sharing and exportable outfit plans as future features.

This MDX entry documents the WhatToWear project, highlighting architecture, core features, implementation notes, and actionable next steps to take the MVP toward production readiness.