earthy-tools System Requirements Document

Introduction

The purpose of this document is to outline the system requirements for the "earthy-tools" project, a website designed for MTB Landscaping. The site will provide tools for clients to contact the business, write ratings, view an interactive gallery of past work, and book appointments. The design will feature a professional green color scheme to align with the landscaping theme.

System Overview

The "earthy-tools" project aims to create a user-friendly website for MTB Landscaping, focusing on client engagement and service accessibility. The website will include interactive features such as a gallery, contact tools, ratings, and appointment booking, all within a cohesive and professional green-themed design.

Functional Requirements

• As a Client, I should be able to contact the business through the website.
• As a Client, I should be able to write and submit ratings for the services.
• As a Client, I should be able to view an interactive gallery of past landscaping work.
• As a Client, I should be able to book appointments online.

User Personas

• Client: The primary user of the website, accessing features such as contact tools, ratings, interactive gallery, and appointment booking.

Visuals Colors and Theme

The website will feature a professional green color scheme with various shades to create a fresh and cohesive look. The following design tokens are defined:

• primary: #2E8B57 (Sea Green)
• primary_light: #66CDAA (Medium Aquamarine)
• secondary: #556B2F (Dark Olive Green)
• accent: #8FBC8F (Dark Sea Green)
• highlight: #9ACD32 (Yellow Green)
• bg: #F0FFF0 (Honeydew)
• surface: rgba(46, 139, 87, 0.8) (Sea Green with transparency)
• text: #2F4F4F (Dark Slate Gray)
• text_muted: #708090 (Slate Gray)
• border: rgba(107, 142, 35, 0.2) (Olive Drab with transparency)

Signature Design Concept

The homepage will feature an interactive 3D landscape model using @react-three/fiber and @react-three/drei. Users can navigate through a virtual garden where each section of the garden represents different services offered by MTB Landscaping. As users hover over different areas, they will see pop-up information and images of past projects. The interactive gallery will allow users to click on different plants and landscape features to see detailed images and descriptions. This immersive experience will engage users and provide a unique way to explore the services offered.

Interaction Model & Motion Direction

The landing page will use a "parallax" interaction model to create a layered depth effect as users scroll through the site. This will include decorative layers such as atmospheric plant animations and distant landscape shapes that translate at different speeds. The real content will scroll naturally, providing a visually rich first impression. Internal pages will maintain a "static" interaction model for clarity and ease of use.

Non-Functional Requirements

• The website must be responsive and accessible on various devices and screen sizes.
• The system should ensure data security and privacy for all client interactions.
• The website should load within 3 seconds on standard broadband connections.

Tech Stack

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

Assumptions and Constraints

• All users will access the website as clients, with no distinct user roles such as admin.
• The website will primarily serve clients in the US, adhering to US time zones and currency formats.
• The design will focus on a professional appearance with a green color scheme.

Glossary

• Client: A user accessing the website to interact with MTB Landscaping services.
• Interactive Gallery: A dynamic display of images and information about past landscaping projects.
• Parallax: A scrolling technique that creates a sense of depth by moving background and foreground elements at different speeds.