Heartship

Introduction

Heartship is a project focused on creating a website for selling custom printed products such as photo frames, cups, and pillows. The aim is to provide a platform where users can easily personalize and purchase unique gifts. This document outlines the system requirements necessary to build a comprehensive and user-friendly website for Heartship.

System Overview

The Heartship website will serve as an e-commerce platform for personalized products. It will cater to both individual customers and businesses, offering features such as a product catalog, a custom design tool for uploading photos, secure payment options, and an intuitive checkout process. The website will be designed to handle different user types and provide a seamless shopping experience.

Functional Requirements

• As a User, I should be able to browse the product catalog.
• As a User, I should be able to upload photos to customize products.
• As a User, I should be able to add products to a shopping cart.
• As a User, I should be able to securely checkout and make payments.
• As a User, I should be able to track my order status.
• As a Business, I should be able to place bulk orders with different pricing tiers.

User Personas

• Individual Customer: Interested in purchasing personalized gifts for friends and family.
• Business Customer: Looking to order bulk personalized products for corporate events or resale.

Visuals Colors and Theme

• primary: #1E3A8A (Deep Blue)
• primary_light: #3B82F6 (Light Blue)
• secondary: #F59E0B (Amber)
• accent: #EF4444 (Vibrant Red)
• highlight: #FBBF24 (Gold)
• bg: #F3F4F6 (Light Gray)
• surface: rgba(255, 255, 255, 0.8) (White)
• text: #111827 (Dark Gray)
• text_muted: #6B7280 (Muted Gray)
• border: rgba(209, 213, 219, 0.2) (Light Gray)

Signature Design Concept

The Heartship homepage will feature an interactive "Photo Gallery Carousel" where users can drag and drop their photos onto a rotating 3D carousel of product mockups. This carousel will allow users to see their photos instantly applied to different products like frames, cups, and pillows. The carousel will be built using @react-three/fiber for 3D rendering and framer-motion for smooth transitions and animations. Users can click on a product to zoom in and customize further, creating an engaging and interactive experience right from the landing page.

Interaction Model & Motion Direction

The landing page will utilize a "parallax" interaction model to create a sense of depth and engagement. As users scroll, different layers of content will move at varying speeds, providing a dynamic and immersive experience. This will be complemented by animated elements such as hover transitions and spring physics on interactive components, enhancing the overall user experience.

Non-Functional Requirements

• The website must be responsive and accessible on all devices.
• It should support high traffic volumes, especially during peak shopping seasons.
• Ensure data security and privacy for all transactions and user information.

Tech Stack

• Frontend: React for Web
• Backend: Python, FastAPI
• Database: MySQL or MariaDB, use alembic for migrations
• AI Models: GPT 5.4 for user-friendly responses
• Local Orchestration: Docker, docker-compose
• Server-side Orchestration: Kubernetes

Assumptions and Constraints

• The website will primarily target the Indian market, considering local currency and timezone settings.
• The system should be scalable to accommodate future growth and additional features.
• Integration with popular payment gateways is assumed for secure transactions.

Glossary

• Carousel: A rotating set of images or products that users can interact with.
• Parallax: An effect where background images move slower than foreground images, creating a sense of depth.
• 3D Rendering: The process of creating three-dimensional images on a screen.
• AI Models: Artificial intelligence algorithms used to enhance user interaction and experience.