spexyeyes System Requirements Document

Introduction

The purpose of this document is to outline the system requirements for the "spexyeyes" project, an e-commerce platform dedicated to selling eyewear. The platform aims to provide a seamless shopping experience similar to existing eyewear e-commerce sites, with additional features tailored to enhance user engagement and satisfaction.

System Overview

The "spexyeyes" platform will be an e-commerce website designed to offer a wide range of eyewear products. It will include features such as virtual try-ons, frame and lens selection, prescription sharing, and a comprehensive checkout process. The platform will cater to users in India, considering local preferences and requirements.

Functional Requirements

• As a User, I should be able to browse a wide selection of eyewear products.
• As a User, I should be able to use a virtual try-on feature to see how different frames look on me.
• As a User, I should be able to select frames and lenses from multiple options available under specific categories.
• As a User, I should be able to share my prescription over WhatsApp or type in the numbers on the website.
• As a User, I should be able to view the combined costing of selected frames and lenses before checkout.
• As a User, I should be able to complete the purchase through a secure checkout process.

User Personas

• Guest User: Can browse products and use the virtual try-on feature but cannot make purchases without creating an account.
• Registered User: Can browse products, use the virtual try-on feature, select frames and lenses, share prescriptions, and complete purchases.
• Admin: Manages product listings, user accounts, and oversees the order fulfillment process.

Core User Flows

• Guest User browses products -> uses virtual try-on -> registers to purchase -> selects frames and lenses -> shares prescription -> completes checkout.
• Registered User logs in -> selects frames and lenses -> uses virtual try-on -> shares prescription -> completes checkout.
• Admin logs in -> updates product listings -> manages user accounts -> oversees order fulfillment.

Visuals Colors and Theme

• primary: #1A73E8 (a deep blue for brand identity)
• primary_light: #E8F0FE (a light blue for hover states)
• secondary: #FF6F61 (a coral hue for emphasis and links)
• accent: #FFD700 (a vibrant gold for CTAs and active states)
• highlight: #FFA500 (a warm orange for notifications and active indicators)
• bg: #FFFFFF (a clean white for the page background)
• surface: rgba(250, 250, 250, 0.8) (a soft gray for card/panel backgrounds)
• text: #333333 (a dark gray for primary text)
• text_muted: #777777 (a muted gray for secondary text)
• border: rgba(200, 200, 200, 0.5) (a subtle gray for borders)

Signature Design Concept

The homepage of "spexyeyes" will feature an interactive 3D carousel of eyewear products using @react-three/fiber. Users can rotate the carousel to explore different frames, with each frame dynamically enlarging as it comes into focus. Hovering over a frame will trigger a quick virtual try-on preview, using framer-motion for smooth transitions. The background will subtly shift colors based on the time of day, creating an immersive shopping experience.

Interaction Model & Motion Direction

The landing page will utilize a "parallax" interaction model, with layered depth effects as users scroll. Decorative elements such as floating eyewear icons and atmospheric blobs will move at different speeds to create a sense of depth. The main content will scroll naturally, ensuring a visually rich first impression while maintaining usability.

Non-Functional Requirements

• The website must load within 3 seconds on a standard broadband connection.
• The platform should be accessible and usable on both desktop and mobile devices.
• Data security and user privacy must be ensured, complying with local regulations.

Tech Stack

• Frontend: React for Web
• Backend: Python, FastAPI
• Database: MySQL or MariaDB, using alembic for migrations
• AI Models: Google Nano banana for image generation
• Local Orchestration: Docker, docker-compose
• Server-side Orchestration: Kubernetes

Assumptions and Constraints

• The platform will primarily serve users in India, considering local currency and timezone.
• The virtual try-on feature will require access to the user's camera.
• Integration with WhatsApp for prescription sharing will be implemented.

Glossary

• Virtual Try-On: A feature allowing users to see how eyewear looks on them using augmented reality.
• CTA: Call to Action, an element designed to prompt an immediate response or encourage a sale.
• Parallax: An effect where background images move slower than foreground images, creating an illusion of depth.