Imported from MedAzizAydi080/Automated-CRM (AGENTS.md). Install upstream with npx skills add MedAzizAydi080/Automated-CRM. Copyright stays with the author.

Project Overview

BachBach is a web-based Customer Relationship Management (CRM) system built with React and Supabase. It provides tools for managing contacts, tracking deals, visualizing sales pipelines, and customizing workspace settings.

Key Technologies

• Frontend Framework: React 18 (Vite)
• State Management & Data Fetching: React Query (@tanstack/react-query), Context API
• Routing: React Router v6
• Styling: Styled Components
• Backend / Database: Supabase (PostgreSQL)
• Forms: React Hook Form
• Visualization: Recharts
• Date Handling: date-fns

Building and Running

Prerequisites

• Node.js (LTS version recommended)
• npm

Key Commands

Development Conventions

Architecture

The project follows a feature-based directory structure within src/:

• src/features/: Contains domain-specific logic and components (e.g., auth, contacts, dashboard, deals). Each feature folder typically includes:
  • Components (e.g., ContactForm.jsx)
  • Custom Hooks (e.g., useContacts.js, useCreateContact.js)
• src/pages/: Top-level route components that compose feature components.
• src/ui/: Reusable UI components (e.g., Button, Table, Modal).
• src/services/: API interaction layers. supabase.js initializes the client, and other files (e.g., apiContact.js) handle specific data operations.
• src/context/: Global application state (e.g., AppContext).
• src/styles/: Global styles and theme definitions.

Coding Standards

• Components: Functional components using Hooks.
• Data Fetching: Prefer React Query for server state. Custom hooks (e.g., useContacts) are used to wrap React Query logic.
• Styling: Styled Components are used for component-level styling. GlobalStyles.jsx handles global CSS resets and variables.
• Forms: React Hook Form is used for form state management and validation.

Backend Integration

• Supabase: The client is initialized in src/services/supabase.js.
• API Services: Database operations are encapsulated in src/services/ (e.g., apiContact.js, apiDeal.js).