README.md

May 6, 2026 · View on GitHub

Evo CRM Frontend

Modern web interface for the Evo CRM Community — built with React, TypeScript and Vite.

Website · Documentation · Community · Support

About

Evo CRM Frontend is the web interface of the Evo CRM Community — a modern React application providing the full user experience for conversations, contacts, agents, channels, automations, reports, and settings.

Built with React 19, TypeScript, Vite, TailwindCSS 4 and an in-house design system, it delivers a fast, accessible, dark-mode-first experience aligned with the Evo CRM visual identity.

Part of the Evo CRM Community

Evo CRM Frontend is part of the Evo CRM Community ecosystem maintained by Evolution Foundation. To use the full stack, clone the umbrella repository with submodules:

git clone --recurse-submodules git@github.com:evolution-foundation/evo-crm-community.git

The Community Edition is single-tenant by design — one account, no multi-tenancy overhead, no super-admin, no billing or plans. All limits are removed and features are unlocked by default.

Tech Stack

Component	Technology
Framework	React 19
Language	TypeScript
Build	Vite
Routing	React Router 7
Styling	TailwindCSS 4
Design system	`@evoapi/design-system`
Forms	React Hook Form + Zod
HTTP	Axios
WebSocket	ActionCable
State	Zustand
i18n	i18next
Dates	date-fns

Quick Start

Prerequisites

Node.js 18+
pnpm 8+
Evo CRM Backend (evo-ai-crm-community) running

Installation

git clone git@github.com:evolution-foundation/evo-ai-frontend-community.git
cd evo-ai-frontend-community

# Install dependencies
pnpm install

# Configure environment
cp .env.example .env.local
# Edit .env.local with your settings

Set the API URL in .env.local:

VITE_API_URL=http://localhost:3000

Running

pnpm run dev          # Dev server with hot reload
pnpm run build        # Production build
pnpm run preview      # Preview the production build

The development server runs on http://localhost:5173.

Available Scripts

Script	Description
`pnpm run dev`	Development server with hot reload
`pnpm run build`	Production build
`pnpm run preview`	Preview production build
`pnpm run test`	Run tests with Vitest
`pnpm run test:watch`	Tests in watch mode
`pnpm run test:coverage`	Tests with coverage report
`pnpm run eslint`	Run ESLint
`pnpm run eslint:fix`	Auto-fix ESLint issues

Architecture

Project structure

src/
├── assets/           # Static resources (images, icons)
├── components/       # Reusable components
│   ├── base/         # Custom components (badges, buttons)
│   ├── layout/       # Headers, sidebars, notifications
│   └── ui/           # Design system primitives
├── contexts/         # React contexts (auth, notifications, theme)
├── hooks/            # Custom hooks
├── pages/            # Page components organized by domain
│   ├── Auth/         # Login, registration, recovery
│   ├── Customer/     # Contacts, conversations
│   ├── Admin/        # Administrative area
│   └── Settings/     # System settings
├── routes/           # Route configuration
├── services/         # API services by feature
├── styles/           # Global styles
├── types/            # TypeScript types
├── utils/            # Utilities
└── constants/        # Constants and configuration

Path aliases

Configured in TypeScript and Vite for clean imports:

import { Button } from '@/components/ui/Button';
import { useAuth } from '@/contexts/AuthContext';

Aliases: @/components, @/contexts, @/hooks, @/services, @/pages, @/types, @/utils, @/styles, @/assets.

For full code conventions, see CONTRIBUTING.md.

Features

Bearer token authentication integrated with evo-auth-service-community
Real-time WebSocket notifications via ActionCable
Dark/light theme with full design system
Internationalization (i18n) — EN, PT-BR
Conversations and chat with WhatsApp, Email, Web Widget channels
Contacts management with filters, search and infinite scroll
Channels configuration (WhatsApp, Email, SMS, etc.)
Reports and analytics dashboards
Toast notifications and loading states
Responsive layout with collapsible sidebar

Documentation

Resource	Link
Website	evolutionfoundation.com.br
Documentation	docs.evolutionfoundation.com.br
Community	evolutionfoundation.com.br/community
Changelog	CHANGELOG.md
Contributing	CONTRIBUTING.md
Security	SECURITY.md