Frontend Microservice (CRM Prototype)

View this repository on GitHub For Local Deployment Guide

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

npm install

2. Development Mode

npm run dev

3. Production Mode

npm run build
npm run start

🌍 Environment Variables

The frontend requires the following environment variables to be set in a .env.local file:

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.