System Requirements Document (SRD)

Project Name: inner-website

1. Introduction

The inner-website project, also branded as JBK Drums Canada, is a web-based tool designed to assist individual customers in calculating the cost of importing products from China to Canada. The website will provide users with the ability to input product details or fetch them via a supplier API, convert prices to Canadian dollars (CAD) with a 100% profit margin added, and calculate shipping costs using Canada Post.

The website will be presented entirely in French to cater to the Canadian Francophone audience, ensuring a localized and user-friendly experience.

This document outlines the system requirements for the development of the inner-website project.

2. System Overview

The inner-website will serve as a practical tool for individuals importing goods from China to Canada. Its primary features include:

• Integration with a supplier API to fetch product details automatically.
• Conversion of product prices to CAD with a 100% profit margin applied.
• Calculation of shipping costs using Canada Post's API.
• A fully French-language interface to cater to the Francophone audience in Canada.

The system will prioritize accuracy, ease of use, and a seamless user experience. It will be accessible via web browsers and optimized for both desktop and mobile devices.

3. Functional Requirements

• As a User, I should be able to input product details manually (price, weight, dimensions).
• As a User, I should be able to fetch product details automatically via a supplier API.
• As a User, I should see the product price converted to CAD with a 100% profit margin added.
• As a User, I should see the shipping cost calculated using Canada Post's API.
• As a User, I should be able to view the entire website in French.
• As a User, I should be able to access the website on both desktop and mobile devices.

4. User Personas

4.1 Individual Importer

• Description: A Canadian individual looking to import products from China for personal use or small-scale resale.
• Goals:
  • Quickly calculate the total cost of importing products.
  • Save time by automating product data entry via a supplier API.
  • Understand the cost breakdown in their local currency (CAD).
  • Access the website in French for ease of use.

5. Visuals Colors and Theme

The visual design of the inner-website will reflect professionalism, trust, and simplicity. Below is the unique color palette for the project:

• Background: #F3F4F6 (Light Gray)
• Surface: #FFFFFF (White)
• Text: #2C2C2C (Dark Charcoal)
• Accent: #0078D4 (Vivid Blue)
• Muted Tones: #A8A8A8 (Soft Gray)

This palette ensures a clean and modern look while maintaining readability and accessibility.

6. Signature Design Concept

The homepage of JBK Drums Canada will feature an interactive "Cost Breakdown Dashboard" as its centerpiece.

Concept Details:

• Visual Layout:
  The dashboard will resemble a dynamic calculator interface with three main sections:

  1. Input Panel: Users can manually enter product details or fetch them via the supplier API.
  2. Cost Breakdown Panel: Displays the price in CAD, profit margin, and shipping cost in real-time.
  3. Summary Panel: A visually engaging summary card with the total cost and a breakdown chart.

• Animations:

  • When users input data, the cost breakdown panel will animate with smooth transitions, highlighting changes in real-time.
  • The summary card will "slide in" from the right with a subtle bounce effect when the calculation is complete.

• Micro-Interactions:

  • Hovering over the breakdown chart will display tooltips with detailed explanations (e.g., "Profit Margin: 100%").
  • Clicking on the supplier API button will trigger a loading animation (e.g., a spinning gear icon).

• Color Shifts:
  The accent color (#0078D4) will subtly pulse during calculations, drawing attention to the active process.

This bold, interactive design will make the website feel modern, engaging, and user-friendly, leaving a lasting impression on visitors.

7. Non-Functional Requirements

• The website must load within 2 seconds on a standard broadband connection.
• The system must support both desktop and mobile browsers (responsive design).
• The website must comply with Canadian accessibility standards (e.g., WCAG 2.1).
• All calculations must be accurate to two decimal places.
• The website must handle up to 1,000 concurrent users without performance degradation.

8. Tech Stack

Frontend

• React for Web

Backend

• Python
• FastAPI

Database

• MySQL (with Alembic for migrations)

APIs

• Canada Post API for shipping cost calculations
• Supplier API for product data retrieval

AI Tools

• GPT 5.4 for user-friendly responses

Local Orchestration

• Docker
• docker-compose

9. Assumptions and Constraints

Assumptions

• Users will primarily access the website from Canada.
• The supplier API will provide accurate and up-to-date product data.
• Canada Post's API will be available and functional at all times.

Constraints

• The website must be fully localized in French.
• The system must adhere to Canadian data privacy laws.

10. Glossary

• CAD: Canadian Dollar, the official currency of Canada.
• Profit Margin: The percentage added to the cost price to determine the selling price.
• Supplier API: An external service providing product details such as price, weight, and dimensions.
• Canada Post API: An external service used to calculate shipping costs from China to Canada.
• WCAG 2.1: Web Content Accessibility Guidelines, a standard for making web content accessible to people with disabilities.