Architecture

Overview

Wardrobe Wizard is a personal wardrobe management system designed to streamline and enhance users' interaction with their clothing collection. The system empowers users to effortlessly curate their virtual "closet" by adding, editing, and removing items while providing specifications such as type, color, style, and size.

The application is an online web app that allows users to mix and match clothing, create outfits, and share their looks with the community. It caters to a diverse range of users like -

Type of users:

1. Fashion Enthusiasts: Users are keenly interested in fashion trends and styles and experimenting with different looks.

2. Personal Stylists: Professional or amateur stylists who use the app to plan outfits for clients or showcase their styling skills.

3. Shopaholics: Users who enjoy shopping use the app to plan and organize their purchases virtually.

4. Social Influencers: Individuals who have a significant social media following and use the app to share their curated outfits with their audience.

5. Closet Organizers: Users who want to manage and organize their wardrobe efficiently, keeping track of clothing items and creating a digital inventory.

6. Trend Seekers: Users who are always on the lookout for the latest fashion trends and use the app for inspiration and trend discovery.

7. Fashion Bloggers: Bloggers and content creators in the fashion industry use the app to create engaging content for their audience.

8. Event Planners: Users prepare for specific events or occasions and use the app to plan and visualize outfits for those events.

9. Community Seekers: Users who appreciate the community aspect of the app, sharing their outfits, and seeking inspiration from others.

10. Budget-Conscious Shoppers: Users who want to plan their outfits and purchases thoughtfully, considering budget constraints and getting the most out of their wardrobe.

11. Travel Enthusiasts: Users who use the app to plan and pack outfits for travel, ensuring they have the proper clothing for different destinations and activities.

Technology Stack

Languages

• HTML
• JavaScript
• CSS
• Python, Node.js (Back End)

Tools

• React (Front End)
• Python, Node.js (Back End)
• Firebase (Database)
• Figma
• GitHub
• APIs

Infrastructure

• Hosting: Azure

Solution Design

High-level Context View

The high-level context diagram illustrates the Wardrobe Wizard system within its environment, showcasing the interactions between the system and external actors such as users and social media platforms. The system is depicted as a single container representing the entire application, interacting with various external entities.

Container Diagram

The container diagram provides a more detailed view of the Wardrobe Wizard system, breaking it down into containers representing different components such as the front end, back end, database, and external APIs. Each container is annotated with its respective technologies and responsibilities, providing clarity on the system's architecture.

Milestones

M1: Start, Users Module (03/05)

• Design database entity
• Create database and entities
• Design screens: sign up, login
• Create user interface for profile creation
• Design home page and menu
• Planning and design of inventory module

M2: Inventory Module (03/26)

• Develop inventory module
• Implement features for managing wardrobe items
• Enhancements and fixes

M3: Inventory Module Fixes and Last Enhancements - Deploy to Azure - CI/CD (04/09)

• Address issues and bugs in the inventory module
• Enhance user experience
• Integrate Calendar
• Deploy to Azure

M4: Bug Fixes - Testing (04/16)

• Integrate social media platforms
• Final deployment to the application to Azure cloud environment
• Finalize presentation materials
• Review architecture and solution design
• Prepare for class presentation

Prepare for Presentation (04/23)

Non-functional Requirements

Quality Attribute	Attribute Refinement	ASR
Security	Confidentiality, sensitive data is not accessible to unauthorized users H/M	The Wardrobe Wizard System must ensure complete protection of data from unauthorized access. All users shall be required to access the system.
Accessibility	Accessibility from local and remote environments H/H	All users must access the system as an online website primarily through desktop computers or laptops.
Architectural requirement/ pattern	Client-server pattern H/H	The System will be implemented as a client-server system. The application should be accessible via web. The web application must be hosted in a cloud environment. Azure as preference.
Performance - Reliability	Capacity and scalability Maximum Simultaneous Users Supported H/H	The system should accommodate a total of 1000 users at peak time simultaneously. The peak time TBD estimated session duration of 10 minutes against the central database at any given time.
Interoperability	Average Latency H/H	The system should provide access to the user’s social media with no more than a 10-second latency. The system must integrate shopping platforms.
Performance	Throughput H/M	The system shall load 95% of pages generated by Wardrobe Wizard System (WWZ) within five seconds over a 20 Mbps or faster internet connection, especially during business hours.
Resource Requirement	Resource Efficiency Score H/M	The client portion shall require 20GB disk space and 4GB RAM or more.
Supportability	Percentage of Compatibility Test Coverage H/M	The systems must be compatible with most popular browsers such as Edge, Chrome, Firefox, Safari, and Opera.
Usability	Proficiency Training H/M	The user interface of the Wardrobe Wizard System shall be designed for ease-of-use and shall be appropriate for a computer-literate user community with no additional training on the System. 93% of user acceptance tests must pass; all security tests must pass.
Usability - Online documentation and help	Proficiency Training H/M	The software shall include a built-in online help system to assist users in understanding the application's functionality, features, and usage. The online help shall be seamlessly accessible from within the application interface.
Availability	Percentage of Scheduled Downtime H/H	The system shall be available 99.9% of the time 24/7.
Performance	MTBF Percentage H/H	Mean Time Between Failures shall exceed 600 hours.
Maintainability - Portability	Average Time to Complete Upgrades H/H	MTTR = 6 hours MAX a year.
Reliability	Error Logging	The system shall detect and log errors by log level: fatal, informational, and warning, and save and display them to the super admin user.

Assumptions

• Wardrobe Wizard will follow a client-server architecture with front and back end components
• The front end is expected to be developed in React, HTML, JavaScript (JS), jQuery, and CSS.
• The back end is expected to be created in Python or Node.js
• The database is expected to leverage Firebase or MongoDB
• Our app will be hosted on AWS or Azure (likely Azure)
• Functional requirements that will be accomplished over the course of the semester include closet curation, outfit generation (+ weather and occasion tracking), wardrobe utilization, and outfit visualization.
• The app is expected to integrate with outside systems to help with outfit generation
• The architecture will address non-functional requirements such usability, security, and accessibility
• The app will include online documentation and help for users