CRM System Frontend

A modern, responsive, and enterprise-grade CRM frontend application built with Next.js 15. Designed to provide a seamless user experience for managing customers, sales pipelines, messaging, and team collaboration.

Tech Stack

• Framework: Next.js 16 (App Router)
• Language: TypeScript
• Styling: Tailwind CSS 4
• UI Components: Shadcn UI (Radix UI) + Lucide Icons
• State Management:
  • Server State: TanStack Query (React Query) v5
  • Client State: Zustand
• Forms: React Hook Form + Zod
• Real-time: Socket.IO Client
• Date Handling: date-fns
• HTTP Client: Axios
• Notifications: Sonner

Features

🔐 Authentication & Security

• Secure Login & Registration flows
• Two-Factor Authentication (2FA) support
• OAuth integration (Google, Facebook)
• Password recovery & reset
• Protected routes and role-based access control

🏢 Dashboard & Analytics

• Interactive analytics dashboards
• Real-time business performance metrics
• Visual charts and data representation
• Customizable widgets

👥 Customer Management

• Advanced data tables with filtering, sorting, and pagination
• Detailed customer profiles
• Customer segmentation interface
• Activity timeline and history
• Tag management

💬 Unified Messaging Center

• Omnichannel Inbox: Unified interface for Telegram, Viber, Instagram, and Facebook Messenger
• Real-time message updates
• Rich media support (Images, Files)
• Message status indicators (Sent, Delivered, Read)

🎯 Sales Pipeline

• Interactive Kanban board for deal management
• Drag-and-drop interface
• Customizable pipeline stages
• Deal details and activity tracking
• Currency formatting and value calculation

📧 Email Campaigns

• Campaign creation wizard
• Template management
• Audience selection and segmentation
• Campaign performance tracking

💼 Team Collaboration

• Internal team chat interface
• Real-time notifications
• Team member management settings
• Role assignment interface

Prerequisites

• Node.js 20+
• npm, yarn, or pnpm

Getting Started

1. Clone and install dependencies

npm install
# or
yarn install
# or
pnpm install

2. Configure environment

Create .env.local file in the root directory:

# --------------------------------------------------------
# API Configuration
# --------------------------------------------------------
NEXT_PUBLIC_API_URL=http://localhost:8080/api
NEXT_PUBLIC_SOCKET_URL=http://localhost:8080

# --------------------------------------------------------
# Application Settings
# --------------------------------------------------------
NEXT_PUBLIC_APP_URL=http://localhost:3000

3. Start the application

npm run dev
# or
yarn dev

The application will be available at http://localhost:3000

Scripts

Command	Description
npm run dev	Run in development mode
npm run build	Build for production
npm run start	Run production build
npm run lint	Run ESLint

Project Structure

This project follows a feature-based architecture pattern for better scalability and maintainability.

src/
├── app/                 # Next.js App Router pages & layouts
│   ├── (auth)/          # Authentication routes
│   ├── dashboard/       # Protected dashboard routes
│   └── system/          # System pages
├── components/          # Shared UI components
│   ├── ui/              # Shadcn UI primitives
│   ├── forms/           # Shared form components
│   ├── layouts/         # Layout components (Sidebar, Header)
│   └── shared/          # Common shared components
├── features/            # Feature-specific code
│   ├── auth/            # Auth feature (components, hooks, api)
│   ├── analytics/       # Analytics feature
│   ├── campaigns/       # Email campaigns
│   ├── chat/            # Internal & External chat
│   ├── customers/       # Customer management
│   ├── deals/           # Sales pipeline & deals
│   ├── inbox/           # Unified messaging inbox
│   └── ...
├── hooks/               # Global custom hooks
├── lib/                 # Utilities and libraries
│   ├── api/             # API client & endpoints
│   ├── constants/       # Global constants
│   ├── validations/     # Zod schemas
│   └── utils.ts         # Utility functions
├── stores/              # Global Zustand stores
└── types/               # TypeScript type definitions

Key Architectural Patterns

Feature-Based Architecture

Each feature (e.g., auth, customers, deals) is self-contained in src/features/ containing its own:

• api/: API calls specific to the feature
• components/: Feature-specific UI components
• hooks/: Feature-specific logic

Data Fetching

• We use TanStack Query for server state management, caching, and synchronization.
• Axios is used as the HTTP client with interceptors for token management.

Forms

• React Hook Form is used for form state management.
• Zod is used for schema validation and type inference.

Styling

• Tailwind CSS for utility-first styling.
• Shadcn UI for accessible, customizable components.
• CSS Variables for theming (light/dark mode).

License

Private / Unlicensed