cosmic-quickcraft

byKimetsu

Create a full-stack-ready React Native (or Flutter/Next.js) mobile-first web application called "QuickCraft". The app combines the ultra-fast delivery model of Blinkit with a highly customized marketplace for intricate Aari (Maggam) embroidery work. Please include the following screens and functionalities with a clean, modern, and luxury-meets-convenience UI (deep maroons/golds for the artisan section, clean greens/whites for the grocery section). ### 1. Dual-Purpose Homepage - Top Banner: Toggle between "Instant Delivery (10 Mins)" and "Custom Aari Studio". - Instant Delivery Section: Categories for Grocery, General Store, and Toys with a standard grid layout, "Add to Cart" buttons, and a persistent floating cart. - Custom Aari Studio Section: High-quality visual cards showcasing traditional embroidery categories (Blouses, Lehengas, Kurtis, Patches). ### 2. The Interactive Aari Customization Screen When a user clicks on an Aari work category, open a multi-step customization wizard: - Step 1: Material & Color. Visual swatches for fabric type (Raw Silk, Georgette, Velvet) and a color picker. - Step 2: Design Selection. A grid of embroidery templates (Heavy Bridal, Minimalistic, Floral, Geometric) AND a drag-and-drop file uploader for custom reference images. - Step 3: Work Intensity Scale. A slider to select work density (Light, Medium, Heavy Zardosi) that dynamically updates an estimated price formula. - Step 4: Sizing & Fitting. Two options: "Fill Measurement Form" (Bust, Waist, Sleeves fields) or a button for "Schedule Pickup for Fitting Garment". ### 3. Smart Cart & Checkout - Split Cart System: Visually separate "Instant Items" (deliverable in 10 mins) from "Custom Orders" (estimated delivery: 5-7 days). - Standard checkout flow with address selection and mock payment gateway integration. ### 4. Dual-Track Order Status Screen - For Grocery/Toys: A live map tracker showing the delivery rider's progress. - For Aari Work: A vertical stepper showing production milestones: [Order Placed -> Design Confirmed -> Artisan Stitching -> Quality Check -> Dispatched]. Ensure the UI is highly responsive, visually premium, uses Tailwind CSS for styling, and includes smooth state transitions between the customization steps.

LandingCheckoutLogin
Landing

Comments (0)

No comments yet. Be the first!

System Requirements

System Requirement Document
Page 1 of 5

cosmic-quickcraft System Requirements Document

1. Introduction

Welcome to the System Requirements Document for "cosmic-quickcraft." This document outlines the requirements for developing a mobile-first web application that combines ultra-fast delivery with a customized marketplace for intricate Aari embroidery work. The application aims to provide a seamless and luxurious user experience, blending convenience with high-quality craftsmanship.

2. System Overview

The "cosmic-quickcraft" application is designed to cater to two primary user needs: instant delivery of everyday items and a bespoke Aari embroidery customization service. The application will feature a dual-purpose homepage, an interactive customization wizard for Aari work, a smart cart and checkout system, and a dual-track order status screen. The UI will be responsive and visually premium, utilizing Tailwind CSS for styling and smooth state transitions.

Page 2 of 5

3. Functional Requirements

  • As a User, I should be able to toggle between "Instant Delivery" and "Custom Aari Studio" on the homepage.
  • As a User, I should be able to view categories for Grocery, General Store, and Toys with an "Add to Cart" option.
  • As a User, I should be able to explore high-quality visual cards for traditional embroidery categories.
  • As a User, I should be able to customize Aari work through a multi-step wizard.
  • As a User, I should be able to select material, color, design, and work intensity for Aari customization.
  • As a User, I should be able to fill out a measurement form or schedule a pickup for fitting garments.
  • As a User, I should be able to use a split cart system for instant items and custom orders.
  • As a User, I should be able to track grocery/toy deliveries via a live map.
  • As a User, I should be able to track Aari work progress through a vertical stepper.

4. User Personas

  • Instant Delivery Shopper: Users looking for quick delivery of groceries, general store items, and toys.
  • Aari Enthusiast: Users interested in customizing and purchasing intricate Aari embroidery work.
  • Admin: Users managing the application, overseeing orders, and ensuring smooth operations.
Page 3 of 5

5. Visuals Colors and Theme

  • primary: #8B0000 (Deep Maroon)
  • primary_light: #CD5C5C (Indian Red)
  • secondary: #228B22 (Forest Green)
  • accent: #FFD700 (Gold)
  • highlight: #FFA500 (Orange)
  • bg: #FFFFFF (White)
  • surface: rgba(255, 248, 220, 0.8) (Cornsilk)
  • text: #000000 (Black)
  • text_muted: #696969 (Dim Gray)
  • border: rgba(139, 0, 0, 0.2) (Deep Maroon)

6. Signature Design Concept

The homepage of "cosmic-quickcraft" will feature an interactive galaxy map where each star represents a feature or section of the application. Users can click on a star to open a task card, drag to rotate the cluster, and hover to highlight connections. This concept will be brought to life using @react-three/fiber and @react-three/drei for 3D interactions, creating an immersive and engaging first impression. The galaxy map will dynamically shift colors based on the user's interaction, providing a unique and memorable experience.

Page 4 of 5

7. Interaction Model & Motion Direction

The landing page will utilize a "parallax" interaction model, creating a layered depth effect via scroll. Decorative layers will translate at different speeds, while real content remains in the normal flow. This approach is ideal for storytelling and visually rich first impressions. Internal pages, such as dashboards and settings, will adopt a "static" model to prioritize layout clarity and reading speed.

8. Non-Functional Requirements

  • The application must be highly responsive and optimized for mobile devices.
  • It should support smooth transitions and animations for an engaging user experience.
  • The system should handle high traffic and concurrent users efficiently.
  • Data security and user privacy must be ensured at all times.

9. Tech Stack

  • Frontend: React Native for mobile app
  • Backend: Python, FastAPI
  • Database: MySQL or MariaDB, with alembic for migrations
  • AI Models: GPT 5.4 for user-friendly responses
  • AI Tools: Litellm for LLM Routing, Langchain
  • Local Orchestration: Docker, docker-compose
  • Server-side Orchestration: Kubernetes
Page 5 of 5

10. Assumptions and Constraints

  • The application will primarily target users in India, considering local preferences and requirements.
  • The system will support both English and regional languages for broader accessibility.
  • The application will comply with local regulations and data protection laws.

11. Glossary

  • Aari Work: A type of embroidery that involves intricate needlework, often used in traditional Indian garments.
  • Instant Delivery: A service model that promises delivery of items within a short time frame, typically 10 minutes.
  • Customization Wizard: A step-by-step guide that allows users to personalize their orders, particularly for Aari embroidery.
  • Split Cart System: A shopping cart feature that separates items based on delivery timelines or categories.

This document provides a comprehensive overview of the requirements and design for "cosmic-quickcraft," ensuring a seamless development process and a successful application launch.

Landing design preview
Landing: View Homepage
Home: Toggle Aari Studio
Home: Browse Embroidery Cards
Customize: Select Material Color
Customize: Choose Design
Customize: Set Work Intensity
Customize: Fill Measurements
Cart: View Custom Order
Checkout: Select Address
Checkout: Make Payment
OrderStatus: Track Stepper
Customize: Schedule Fitting Pickup