Stylect: Design and Development of a Personal AI-Powered Digital Wardrobe Web Application

Stylect: Design and Development of a Personal AI-Powered Digital Wardrobe Web Application

Musif Shaikh, Absaar Surve, Azam Shaikh, Mukhtar Karbelkar

Students, Dept. of Computer Engineering, Anjuman-I- Islams Abdul Razzaq Kalsekar Polytechnic, Maharashtra, India

Prof. Shah Mohd Sharique

Professor, Dept. of Computer Engineering, Anjuman-I- Islams Abdul Razzaq Kalsekar Polytechnic, Maharashtra, India

Abstract – The increasing complexity of personal wardrobe management has created a need for intelligent digital solutions that assist individuals in organising and utilising their existing clothing. Stylect is a high-fidelity, offline-first React web application designed to serve as a personal AI-powered styling assistant. Unlike e-commerce platforms, Stylect focuses exclusively on helping users digitise, categorise, and style the clothes they already own. The application features a Digital Closet with live camera capture, a drag-and-drop Outfit Builder, and an AI Stylist Chat powered by the Google Gemini Large Language Model (LLM) API. Built on a local-first architecture using IndexedDB via localforage, Stylect runs entirely in the browser without requiring cloud server setup or mandatory internet connectivity for core features. The system employs React 18, Vite, framer-motion for animations, and lucide-react for iconography. This paper presents the design, architecture, features, and implementation of Stylect, demonstrating how modern web technologies combined with AI can deliver a practical and premium wardrobe management experience.

Key Words: Digital Wardrobe, Artificial Intelligence, React, Vite, Google Gemini API, Local-First Architecture, Outfit Management, IndexedDB, Web Application, Fashion Technology

1. INTRODUCTION

   The average person uses only a fraction of the clothes they own, often because they lack an organised, visual overview of their wardrobe. Physical wardrobes are static, cluttered, and offer no intelligent guidance on outfit composition. Existing fashion applications either require purchases from partner retailers or rely on complex cloud infrastructure, making them inaccessible for casual personal use.

   Stylect addresses these gaps by providing a fully local, AI- integrated digital wardrobe that runs in any modern web browser. Users can photograph or upload clothing items, categorise them, build outfits interactively, and consult an AI stylist aware of their actual owned garments. The project was developed as a final-year diploma capstone at Anjuman-I- Islams Abdul Razzaq Kalsekar Polytechnic.

   1. Problem Statement

      Users routinely purchase duplicate clothing due to poor wardrobe visibility. Planning outfits is time-consuming without a visual, searchable digital inventory. Existing wardrobe apps are tied to e-commerce ecosystems or cloud accounts, introducing friction and privacy concerns.

   2. Objectives

      • Build an offline-first digital wardrobe accessible from any browser.

      • Enable clothing item capture via live camera or file upload.

      • Provide an interactive drag-and-drop outfit builder.

      • Integrate a conversational AI stylist aware of the users

        actual wardrobe.

      • Deliver a premium glassmorphism-based UI without heavy third-party libraries.

2. LITERATURE REVIEW

   Several research efforts and commercial products have explored digital wardrobe management. Shin et al. (2020) proposed a clothing recommendation system using convolutional neural networks to classify garments and suggest combinations based on colour harmony rules [1]. However, their system required server-side GPU inference, making it unsuitable for browser deployment.

   Commercial applications such as Cladwell and Smart Closet offer wardrobe digitisation but mandate account creation and cloud storage, raising privacy concerns [2]. Stylect differentiates itself by storing all data locally in the browsers IndexedDB, eliminating server dependency for wardrobe functions entirely.

   Research by Vaccaro et al. (2019) demonstrated that users prefer fashion recommendation systems that accept contextual inputs such as occasion and weather [3]. The integration of large language models (LLMs) for domain-specific recommendation, as surveyed by Zhao et al. (2023), further validates the use of Google Gemini as the AI backbone [4].

3. SYSTEM DESIGN AND ARCHITECTURE

   1. Architecture Overview

      Stylect follows a local-first, single-page application (SPA) architecture. All user data is persisted in the browsers IndexedDB via the localforage abstraction layer. The Google Gemini LLM API is the only external network call, invoked exclusively from the AI Stylist Chat page. The application is structured into four primary pages: Dashboard, Closet, Builder, and Stylist, with React Router managing client-side navigation.

      STYLECT SYSTEM ARCHITECTURE

      This schema enables instant retrieval and filtering without a query language.

      FRONT END (Browser)

      Dashboa rd (Stats & Overview	Closet (Item Catalogu e)
      Builder (Outfit Canvas)	AI Stylist (Chat Page)
      React Router (Client- Side Nav)
      React 18 + Vite SPA framer-motion | lucide-react | Vanilla CSS

      BACK END (Local +

      Cloud)

      localforage (IndexedDB) Wardrobe Items Outfits Images (Base64) Tags Offline No Server Needed

      read / write

      Google Gemini LLM API (External Cloud Service) AI Stylist Chat only Wardrobe context injected in prompt

      API Key HTTPS

      HTML5 Camera API (capture="environmen t") Live photo capture on mobile devices

4. FEATURES AND IMPLEMENTATION

   1. Digital Closet with Live Camera Capture

      The Closet page serves as the primary catalogue of owned garments. Items are displayed in a responsive grid with category filters. When a user taps + Add Item, a dual-pane modal appears offering two capture modes: file upload via standard HTML input, or live camera capture using the HTML5 capture="environment" attribute. This allows mobile users to photograph a garment and have it appear instantly in their digital wardrobe.

   2. Drag-and-Drop Outfit Builder

      The Builder page provides an interactive canvas where users drag clothing items from their closet onto outfit slots to preview combinations visually. Users can save named outfits which are persisted to IndexedDB for future reference. The drag-and-drop mechanics use native HTML5 drag events supplemented by framer-motion animations for smooth visual feedback.

   3. AI Stylist Chat (Google Gemini Integration)

      The Stylist page provides a conversational inerface where users ask context-aware fashion questions such as Im attending a formal dinner, what should I wear? The application bundles the users entire Digital Closet inventory as structured context in the prompt before calling the Gemini API, ensuring the AI only recommends outfits from clothes the user actually owns. Responses are rendered in styled Markdown.

      Fig. 1 Stylect System Architecture

      3.2 Technology Stack

      Component	Technology Used
      Core Framework	React 18 + Vite (Hot Module Replacement)
      Styling	Vanilla CSS with custom CSS variables
      Local Database	localforage (IndexedDB wrapper)
      Animations	framer-motion
      Icons	lucide-react
      AI Integration	Google Gemini LLM API
      Camera Capture	HTML5 capture="environment" attribute
      Build Tool	Vite with ESLint

      Table -1: Technology Stack of Stylect

      3.3 Data Model

      Each clothing item is stored as a JSON object containing: id (UUID), name, category (Tops/Bottoms/Outerwear/Footwear/Accessories), colour, tags, dateAdded, and imageData (Base64 encoded string). Outfits are stored as arrays of item IDs with a saved name and timestamp.

   4. Design Philosophy

      Stylect employs a Cinematic Dark Mode aesthetic with pure black (#000000) backgrounds and deep zinc (#09090b) surfaces. Glassmorphism is achieved via backdrop-filter: blur(24px) on low-opacity panels. Interactive elements use a green emerald accent colour. All buttons include transform: scale() press animations, accessibility focus rings, and proper disabled states.

5. RESULTS AND DISCUSSION

   Test Case	Expected	Result
   Add item via camera	Item saved to closet	Pass
   Add item via file upload	Item saved to closet	Pass
   Filter by category	Correct items shown	Pass
   Drag-and-drop outfit build	Items snap to slots	Pass
   Save outfit	Outfit persisted	Pass

   Stylect was tested across Google Chrome, Microsoft Edge, and Mozilla Firefox on desktop and mobile devices. Core wardrobe functions performed without errors on all platforms. IndexedDB persistence was confirmed: wardrobe data survived page reloads and browser restarts. The AI Stylist Chat produced contextually relevant suggestions in all test scenarios. Average Gemini API response time was under 3 seconds on broadband.

   Data after page reload

   AI Chat – formal occasion

   AI Chat – casual query

   Wardrobe intact

   Owned-item outfit suggested

   Relevant recommendations

   Pass Pass Pass

   [Photo]

   to the design and implementation of the Digital Closet module of the Stylect application.

   Azam Shaikh

   Final-year student pursuing Diploma in Computer Engineering at Anjuman-I-Islams Abdul Razzaq Kalsekar Polytechnic, Maharashtra, India. Contributed to the Drag-and-Drop Outfit Builder module and testing of the Stylect application.

   Stylect

   Table -2: Functional Test Results

6. CONCLUSIONS

successfully demonstrates that a high-fidelity, AI-

Mukhtar Karbelkar

Final-year student pursuing Diploma in Computer Engineering at Anjuman-I-Islams Abdul Razzaq Kalsekar Polytechnic, Maharashtra, India. Contributed

integrated digital wardrobe can be built entirely with client-side web technologies, requiring no backend server or cloud database. The local-first architecture using IndexedDB ensures user data privacy and offline availability. The Google Gemini LLM integration enables context-aware, wardrobe-specific styling advice that is personalised and practically useful.

Future enhancements include weather-based outfit recommendations, colour harmony analysis using computer vision, wardrobe analytics (cost-per-wear, frequency tracking), and PWA installation for a native mobile experience. Stylect

to the AI Stylist Chat integration and Google Gemini API prompt engineering in the Stylect project.

Prof. Shah Mohd Sharique

Professor, Dept. of Computer Engineering, Anjuman-I- Islams Abdul Razzaq Kalsekar Polytechnic, Maharashtra, India. Guided and mentored the student team throughout the frontend and UI/UX designer, development, and documentation of the Stylect final- year capstone project.

validates the viability of premium, production-quality

applications built by small teams using modern open-source tooling.

ACKNOWLEDGEMENT

The authors express sincere gratitude to their mentor Prof. Shah Mohd Sharique, Department of Computer Engineering, Anjuman-I-Islams Abdul Razzaq Kalsekar Polytechnic, for his invaluable guidance, support, and encouragement throughout the design, development, and documentation of the Stylect project.

REFERENCES

1. J. Shin, S. Kim, and H. Park, "A Deep Learning-Based Clothing Recommendation System Using Convolutional Neural Networks," IEEE Access, vol. 8, pp. 112340-112351, 2020.

2. Cladwell Inc., "Cladwell – Capsule Wardrobe App," [Online]. Available: https://cladwell.com. [Accessed: Mar. 2026].

3. K. Vaccaro, K. Shivakumar, Z. Ding, K. Karahalios, and R. Kumar, "The Elements of Fashion Style," in Proc. 32nd ACM UIST, New Orleans, 2019,

   pp. 749-760.

4. W. X. Zhao et al., "A Survey of Large Language Models," arXiv preprint arXiv:2303.18223, 2023.

5. Mozilla Developer Network, "IndexedDB API," [Online]. Available:

   https://developer.mozilla.org/en-US/docs/Web/API/IndexedDB_API. [Accessed: Mar. 2026].

6. Google AI, "Gemini API Documentation," [Online]. Available:

https://ai.google.dev. [Accessed: Mar. 2026].

BIOGRAPHIES

Musif Shaikh Final-year student pursuing Diploma in Computer Engineering at Anjuman-I-Islams Abdul Razzaq Kalsekar Polytechnic, Maharashtra, India. His

interests include web development, artificial intelligence, and human-computer interaction. Led the development of Stylect, integrating React 18, local- first architecture, and Google Gemini AI.

Absaar Surve

Final-year student pursuing Diploma in Computer Engineering at Anjuman-I-Islams Abdul Razzaq Kalsekar Polytechnic, Maharashtra, India. Contributed