System Requirements Document (SRD) for Stone-Website

1. Introduction

The Stone-Website project is an e-commerce platform designed for JBK Drums Canada, a music equipment retailer. The website will focus on converting prices to Canadian currency with a 100% profit margin, integrating a Canada Post shipping cost calculator, and providing a seamless shopping experience in French. The platform will be mobile-friendly, category-driven, and optimized for guest checkout.

2. System Overview

The Stone-Website will:

• Convert product prices from USD (or other currencies) to CAD with a 100% profit margin.
• Integrate a Canada Post shipping cost calculator to provide accurate shipping rates based on postal codes, package dimensions, and weight.
• Showcase a product catalog with categories such as Drum Kits, Cymbals, and Accessories.
• Support bilingual functionality, with French as the primary language.
• Offer a responsive, mobile-friendly design.
• Enable online purchasing with payment gateways like Stripe or PayPal.
• Simplify the checkout process with no user authentication required.

3. Functional Requirements

• As a User, I should be able to view product prices converted to CAD with a 100% profit margin.
• As a User, I should be able to calculate shipping costs using the Canada Post API by entering my postal code, package dimensions, and weight.
• As a User, I should be able to browse products by categories such as Drum Kits, Cymbals, Snare Drums, Hardware, and Accessories.
• As a User, I should be able to view detailed product descriptions, dimensions, and images.
• As a User, I should be able to add products to my cart and proceed to checkout.
• As a User, I should be able to complete my purchase using payment gateways like Stripe or PayPal.
• As a User, I should be able to view the website in French.

4. User Personas

4.1 Guest User

• Can browse products by category.
• Can view product details, including price breakdowns and shipping costs.
• Can add products to the cart and complete purchases without creating an account.

5. Visuals Colors and Theme

Color Palette

The design will follow the visual tone of the provided reference image, emphasizing a professional yet vibrant aesthetic:

• Background: #F4F4F4 (Light Gray)
• Surface: #FFFFFF (White)
• Text: #333333 (Dark Gray)
• Accent: #FFD700 (Gold)
• Muted: #B0B0B0 (Muted Gray)

6. Signature Design Concept

The homepage will feature a dynamic product showcase inspired by the reference image. Key elements include:

• Interactive Product Display: A carousel of high-quality cymbal and drum kit images with hover effects that reveal product details (e.g., dimensions, weight, and price breakdown).
• Price Breakdown Animation: When a user hovers over a product, an animation will display the original price, profit margin, and final CAD price in a visually engaging way.
• Integrated Shipping Calculator: A sticky widget on the side of the page allows users to calculate shipping costs in real-time without leaving the product page.
• Category Navigation: A bold, colorful menu with icons representing each category (e.g., drum kits, cymbals) for easy navigation.
• French Localization: All text and labels will be in French, with an elegant font that complements the professional tone of the site.

7. Non-Functional Requirements

• The website must load within 3 seconds on both desktop and mobile devices.
• The platform must be fully responsive and accessible on all screen sizes.
• The Canada Post API integration must provide accurate shipping rates in real-time.
• The website must comply with Canadian e-commerce regulations, including tax calculations.

8. Tech Stack

Frontend

• React for Web

Backend

• Python
• FastAPI

Database

• MySQL with Alembic for migrations

Payment Gateway

• Stripe or PayPal

API Integration

• Canada Post API for shipping cost calculations

Deployment

• Docker and Docker-Compose for local orchestration
• Kubernetes for server-side orchestration

9. Assumptions and Constraints

• The website will not require user authentication; all purchases will be made via guest checkout.
• The Canada Post API will be available and functional for real-time shipping calculations.
• The platform will primarily target Canadian customers and operate in French.

10. Glossary

• CAD: Canadian Dollar.
• Canada Post API: An API provided by Canada Post to calculate shipping costs.
• Profit Margin: The percentage added to the original price to determine the retail price.
• Responsive Design: A design approach that ensures the website is usable on devices of all sizes.
• Bilingual Support: The ability to display content in multiple languages, primarily French for this project.