Full Stack CRM Template

Overview

CRM TemplateKit is a full-featured Customer Relationship Management application built with React, TypeScript, Vite, and Tailwind CSS v4. It provides a complete frontend and backend solution for managing customer data, sales pipelines, and business activities. The application integrates with the TetreesAI CRM backend API and uses JWT-based authentication for secure access.

---

Features

Module	Description
Dashboard	Stats overview, recent activities, pipeline summary
Accounts	Company records with full CRUD, search, and pagination
Contacts	People records linked to accounts
Leads	Prospect tracking with status and source management
Opportunities	Deal pipeline with stages and value tracking
Tasks	To-do items with priority, due dates, and status
Activities	Calls, emails, meetings, and task logs
Notes	Free-form notes linked to contacts and accounts

---

Tech Stack

Technology	Version	Purpose
React	19	UI framework
TypeScript	5.6	Type safety
Vite	6	Build tool & dev server
Tailwind CSS	v4	Utility-first styling
React Router DOM	7.14	Client-side routing (HashRouter)

---

Project Structure

src/
├── components/          # Shared UI components
│   ├── Badge.tsx
│   ├── ConfirmDialog.tsx
│   ├── EmptyState.tsx
│   ├── Modal.tsx
│   ├── Pagination.tsx
│   ├── ProfileModal.tsx
│   ├── SearchInput.tsx
│   ├── Spinner.tsx
│   └── Toast.tsx
├── contexts/
│   └── AuthContext.tsx  # Authentication state & JWT management
├── lib/
│   └── api.ts           # API client with fetchWithRetry
├── pages/
│   ├── AccountsPage.tsx
│   ├── ActivitiesPage.tsx
│   ├── ContactsPage.tsx
│   ├── Dashboard.tsx
│   ├── LeadsPage.tsx
│   ├── LoginPage.tsx
│   ├── NotesPage.tsx
│   ├── OpportunitiesPage.tsx
│   └── TasksPage.tsx
├── types/
│   └── index.ts         # Shared TypeScript interfaces
├── App.tsx              # Router + layout
├── main.tsx
└── index.css            # Tailwind v4 entry

---

Setup & Installation

Prerequisites

• Node.js 18+
• npm 9+

Install & Run

# Install dependencies
npm install

# Start development server (http://localhost:5173)
npm run dev

# Build for production
npm run build

# Preview production build
npm run preview

# Type checking
npm run typecheck

# Linting
npm run lint
npm run lint:fix

---

Environment Variables

Create a .env file in the frontend root:

VITE_API_BASE_URL=https://back.tetrees.ai/api/sandbox-bridge/sandbox-67144be58b726336cccf230b0eb5ee93

The VITE_ prefix is required for Vite to expose variables to the browser. All API calls are prefixed with this base URL.

---

Demo Credentials

Field	Value
Email	admin@example.com
Password	password123

---

API Endpoints

Base Configuration

• Base Path: /api/v1
• Response Format: { "data": <payload> } or { "data": [...], "meta": { "page": 1, "limit": 20, "total": 100, "total_pages": 5 } }

Authentication Endpoints

Method	Path	Description
POST	/api/v1/auth/login	Login, returns JWT token
POST	/api/v1/auth/register	Register new user + org
GET	/api/v1/auth/me	Get current user profile
PUT	/api/v1/auth/me	Update profile

Resource Endpoints

Resource	Base Path
Accounts	/api/v1/accounts
Contacts	/api/v1/contacts
Leads	/api/v1/leads
Opportunities	/api/v1/opportunities
Activities	/api/v1/activities
Tasks	/api/v1/tasks
Notes	/api/v1/notes
Dashboard	/api/v1/dashboard

Standard CRUD Operations

All resource endpoints support:

• GET /resource — List with pagination & search (?page=1&limit=20&search=...)
• POST /resource — Create new record
• GET /resource/:id — Retrieve by ID
• PUT /resource/:id — Update record
• DELETE /resource/:id — Soft delete record

---

Authentication Flow

1. User submits login form → POST /api/v1/auth/login
2. JWT token stored in localStorage under key crm_token
3. All subsequent requests include Authorization: Bearer <token> header
4. On app load, GET /api/v1/auth/me validates the stored token
5. Logout clears the token and redirects to /login

---

Key Components

AuthContext

Manages authentication state, JWT token storage, and user profile. Provides useAuth() hook for accessing auth state across the application.

API Client (lib/api.ts)

Centralized API client with automatic retry logic, JWT header injection, and error handling.

Shared UI Components

• Badge: Status/category badges
• Modal: Reusable modal dialogs
• Pagination: List pagination controls
• SearchInput: Debounced search field
• Spinner: Loading indicator
• Toast: Notification system
• ConfirmDialog: Confirmation prompts
• EmptyState: Empty list states