Joyful-steps

Introduction

Joyful-steps is an online platform designed to facilitate the sale of gifts and tea packets. The platform is tailored for the owner, Gabriela Gairn, to manage and post items for sale. This document outlines the system requirements for the Joyful-steps project.

System Overview

Joyful-steps is a web-based application that allows the owner to post and manage products for sale. The platform is designed with a focus on simplicity and ease of use, ensuring that the owner can efficiently manage their inventory and sales.

Functional Requirements

• As the Owner, I should be able to log in to access the owner page.
• As the Owner, I should be able to post new items for sale.
• As the Owner, I should be able to manage existing product listings.

User Personas

• Owner: The primary user of the platform who manages and posts items for sale.

Core User Flows

• Owner logs in -> accesses owner page -> posts new items -> manages existing listings.

Visuals Colors and Theme

• primary: #4A90E2 (a calming blue to reflect trust and reliability)
• primary_light: #A6C8F0 (a lighter tint of the primary color for hover states)
• secondary: #F5A623 (a vibrant orange for emphasis and headlines)
• accent: #50E3C2 (a contrasting mint green for call-to-action buttons)
• highlight: #F8E71C (a warm yellow for notifications and active indicators)
• bg: #FFFFFF (a clean white background for clarity)
• surface: rgba(74, 144, 226, 0.1) (a subtle blue for card backgrounds)
• text: #333333 (a dark gray for primary text)
• text_muted: #777777 (a softer gray for secondary text)
• border: rgba(74, 144, 226, 0.2) (a subtle blue for borders)

Signature Design Concept

The homepage of Joyful-steps will feature an interactive "Gift Carousel" where users can explore featured products. This carousel will be a 3D rotating display of gift items, allowing users to click and drag to view different products. Each product will have a brief description and a "Buy Now" button that pops up when hovered over. The carousel will use @react-three/fiber for 3D rendering and framer-motion for smooth transitions and interactions.

Interaction Model & Motion Direction

The landing page will utilize a "parallax" interaction model, creating a layered depth effect as users scroll. Decorative elements like floating gift icons and tea leaves will move at different speeds to enhance the storytelling experience. Internal pages will maintain a "static" interaction model for clarity and ease of use.

Non-Functional Requirements

• The system should ensure secure access control for the owner's login.
• The platform should be responsive and accessible on various devices and screen sizes.

Tech Stack

• Frontend: React for Web
• Backend: Python with FastAPI
• Database: MySQL or MariaDB, using Alembic for migrations
• Local Orchestration: Docker and docker-compose

Assumptions and Constraints

• The platform is designed primarily for a single user (the owner) to manage product listings.
• The system will not initially support multi-user access or customer accounts.

Glossary

• Owner: The individual managing the Joyful-steps platform and posting items for sale.
• Carousel: A rotating display of items that users can interact with to view different products.