mint-catlogo

Introduction

The "mint-catlogo" project aims to create a professional website for motorcycle parts and workshop services. Inspired by platforms like Auto-Doc Moto and Eurobikes, the site will function as a catalog where users can add parts to a cart to request a final quote, rather than allowing direct purchases.

System Overview

The system is designed to cater to both B2C (motorcycle owners) and B2B (independent workshops) users, providing a reliable and technically sound platform for browsing and requesting quotes for motorcycle parts. The website will feature a "Moto-Finder" tool for intuitive part selection and a "My Garage" feature for personalized user experiences.

Functional Requirements

• As a User, I should be able to create an account to view my quote history and the status of each quote.
• As a User, I should be able to save my motorcycle details in "My Garage" for quick access.
• As a User, I should be able to use the "Moto-Finder" to select parts based on my motorcycle's make, displacement, model, and year.
• As an Admin, I should be able to receive quote requests and respond with the final price and payment or scheduling links.
• As an Admin, I should be able to update the status of a quote (e.g., 'Pending', 'Sent', 'Parts Ordered') for the user to view.

User Personas

• Motorcycle Owner (B2C): Individuals looking for specific parts for their motorcycles, seeking technical reliability and compatibility assurance.
• Independent Workshop (B2B): Businesses that require a professional platform to quote parts for their clients, focusing on accuracy and efficiency.

Visuals Colors and Theme

• primary: #1A1A1A (Anthracite Gray)
• primary_light: #2C2C2C (Lighter Gray)
• secondary: #FF4500 (Vibrant Orange)
• accent: #DC143C (Crimson Red)
• highlight: #FFD700 (Gold)
• bg: #1A1A1A (Dark Background)
• surface: rgba(255, 255, 255, 0.9) (Light Card Background)
• text: #FFFFFF (White)
• text_muted: #B0B0B0 (Muted Gray)
• border: rgba(255, 69, 0, 0.2) (Subtle Orange Border)

Signature Design Concept

The homepage will feature an interactive "Moto-Finder" tool that uses cascading dropdowns for selecting motorcycle parts. As users select the make, displacement, and model, the dropdowns unlock sequentially, guiding them intuitively through the process. The page will dynamically update to showcase featured products based on the selected motorcycle in "My Garage". This interactive experience will be enhanced with smooth transitions using framer-motion for dropdown animations and gsap for scroll-triggered effects.

Interaction Model & Motion Direction

The landing page will employ a "parallax" interaction model, creating a layered depth effect as users scroll. The "Moto-Finder" will have animated dropdowns that expand and contract smoothly, providing a polished and engaging user experience. Internal pages like the dashboard and profile will use a "static" model for clarity and ease of use.

Non-Functional Requirements

• The website must be mobile-first, ensuring seamless navigation on smartphones.
• The system should support high-resolution images for product listings.
• The admin panel must be secure and easy to use for updating quote statuses.

Tech Stack

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

Assumptions and Constraints

• The system will initially not include a complex loyalty program.
• Users will need to create an account to access the "My Garage" and quote history features.
• The system will be designed to handle a moderate volume of users and data.

Glossary

• OEM Reference: Original Equipment Manufacturer reference number for parts.
• Moto-Finder: A tool for selecting motorcycle parts based on specific criteria.
• My Garage: A feature allowing users to save their motorcycle details for easy access.

Database Schema

The database will include tables for Users, Motorcycles, Parts, Quotes, and Compatibility. Each part will have an 'OEM Reference' field to ensure precise quoting. The Compatibility table will link parts to specific motorcycle makes, models, and years.

HTML and Tailwind CSS for Moto-Finder

<div class="moto-finder bg-primary p-4 rounded-lg">
  <h2 class="text-white text-lg mb-4">Moto-Finder</h2>
  <div class="dropdown mb-2">
    <label class="text-muted">Marca</label>
    <select class="w-full p-2 bg-surface text-text">
      <option>Selecione a Marca</option>
      <!-- Options dynamically populated -->
    </select>
  </div>
  <div class="dropdown mb-2">
    <label class="text-muted">Cilindrada</label>
    <select class="w-full p-2 bg-surface text-text" disabled>
      <option>Selecione a Cilindrada</option>
      <!-- Options dynamically populated -->
    </select>
  </div>
  <div class="dropdown mb-2">
    <label class="text-muted">Modelo</label>
    <select class="w-full p-2 bg-surface text-text" disabled>
      <option>Selecione o Modelo</option>
      <!-- Options dynamically populated -->
    </select>
  </div>
  <div class="dropdown mb-2">
    <label class="text-muted">Ano</label>
    <select class="w-full p-2 bg-surface text-text" disabled>
      <option>Selecione o Ano</option>
      <!-- Options dynamically populated -->
    </select>
  </div>
</div>

This setup ensures an intuitive and engaging user experience, guiding users through the selection process with ease.