https://github.com/recker-dev/minicrm
https://github.com/recker-dev/minicrm
Last synced: 23 days ago
JSON representation
- Host: GitHub
- URL: https://github.com/recker-dev/minicrm
- Owner: Recker-Dev
- Created: 2025-09-13T11:41:46.000Z (11 months ago)
- Default Branch: main
- Last Pushed: 2025-09-16T07:49:51.000Z (10 months ago)
- Last Synced: 2025-10-19T11:33:56.182Z (9 months ago)
- Language: JavaScript
- Size: 105 KB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Frontend Microservice (CRM Prototype)
[View this repository on GitHub For Local Deployment Guide](https://github.com/Recker-Dev/MiniCRM-Deployment)
## Overview
The **Frontend Microservice** serves as the core interface for the CRM prototype. Its primary goal is to enable users to define campaigns, segment audiences, preview results, and initiate campaigns on a simulated customer database generated by the **Data Ingestion Faker** service.
The frontend is a **single-page application** featuring Google OAuth for authentication and UUID assignment, campaign management, dynamic audience segmentation, and AI-powered features for content and rule optimization.
---
## ⚡ Tech Stack
- **Framework**: Next.js (React + SSR)
- **Styling**: TailwindCSS
- **UI Components**: shadcn/ui + Lucide Icons
- **State Management**: React hooks & Context API
- **Build Tooling**: Vite / Next.js build pipeline
- **Language**: TypeScript / JavaScript (depending on branch)
---
## 📂 Key Features
- Customer & Order dashboards (fetch from backend APIs).
- Campaign creation and preview with AI-assisted segmentation.
- Real-time metrics for campaign performance (success / failure).
- Authentication via UUID / OAuth.
- Rule-builder UI for targeting segments.
---
## 🚀 Getting Started
### 1. Install Dependencies
```bash
npm install
```
### 2. Development Mode
```bash
npm run dev
```
### 3. Production Mode
```bash
npm run build
npm run start
```
## 🌍 Environment Variables
The frontend requires the following environment variables to be set in a `.env.local` file:
```env
PORT=5173
NEXTAUTH_URL=http://localhost:xxxx
NEXT_PUBLIC_BACKEND_URI=http://example.in
NEXT_PUBLIC_AUTH_URI=http://example.in
NEXTAUTH_SECRET=random_long_string
GOOGLE_CLIENT_SECRET=xxxx
GOOGLE_CLIENT_ID=xxxx
```
## Authentication
- **Sign In Button**: Uses **Google OAuth**.
- Purpose:
- Assign a unique **UUID** to each user.
- Authenticate users to ensure only real participants interact with the CRM prototype.
---
## Core CRM Page
The base page allows users to create and manage campaigns.
### 1. Campaign Creation
- **Fields**:
- **Campaign Name**: User-defined identifier for the campaign.
- **Personalized Message**: Supports **dynamic templating** using placeholders:
- `{{name}}` → replaced by customer's name
- `{{city}}` → replaced by customer's city
- **Audience Segmentation**: Uses the **Dynamic Rule Generator**.
### 2. Audience Segmentation
- Supports **complex nested rules** on 4 parameters:
1. `total_spend`
2. `last_order_date`
3. `visits`
4. `city`
- Users can **preview the customer segment**:
- Shows the estimated audience size.
- Provides a detailed list of targeted customers before initiating the campaign.
### 3. Campaign Initiation
- Once the user is satisfied with the segment and message:
- **Preview Campaign**: Displays all relevant customer details.
- **Initiate Campaign**: Sends campaign for execution in the backend (simulated using FakerJS DB).
---
## Navigation & Header Features
- **Header Buttons**:
- **User DB**: Access past campaigns.
- **Start New Campaign**: Opens the campaign creation workflow.
- **History Page**:
- Lists all past campaigns with the following details:
- Campaign Name
- Audience Segment
- Message Sent
- Audience Size
- Status: `Completed` / `Running`
- Metrics: `Success` / `Fail` / `Pending`
- Created On
- Campaign Summary
---
## AI Features
### 1. Personalized Message Suggestions
- Small AI button near the **Personalized Message** field.
- Function:
- Generates **3 top personalized message suggestions** based on:
- Campaign name
- User-provided prompt
- Helps quickly optimize campaign tone and style.
### 2. AI-Assisted Dynamic Rule Builder
- Core MVP feature of the frontend.
- Converts **human queries** into **custom logical rules** for audience segmentation.
- Supports **deep nesting logic**.
- Users can further customize the skeleton rules generated by AI.
### 3. Campaign History AI Features
- **Automatic Campaign Summary**:
- AI summarizes the campaign based on executed data.
- Provides insights such as campaign size, customer engagement, and overall effort.
- **Human-Readable Segment Transformation**:
- Converts complex JSON-based audience segments into **easy-to-read format** for end users.
---
## Notes
- The frontend relies on the **FakerJS-generated database** for campaign testing and segmentation.
- Dynamic templates and AI features are **prototype-level MVP**, but provide a strong foundation for real CRM logic.
- Campaign management is fully integrated with audience segmentation and message personalization, allowing **realistic CRM workflows** even in a simulated environment.