Personalized Email System - Frontend

A React-based admin interface for managing person data and sending personalized emails through a chat interface.

Features

• Chat Interface: Admin can add person information through natural language chat
• Person Database View: Table display of all persons in the system
• Real-time Communication: Send messages to backend for processing
• Responsive Design: Modern UI with Tailwind CSS

Components

ChatBot.jsx

• Chat-style UI with message input and send functionality
• Displays conversation history with admin and backend messages
• Handles loading states and error messages
• Auto-scrolls to latest messages

MessageBubble.jsx

• Renders individual chat messages
• Different styling for admin vs backend messages
• Shows timestamp for each message

PersonList.jsx

• Displays table of all persons in the database
• Refresh functionality to reload data
• Loading and error states
• Responsive table design

api/api.js

• API functions for backend communication
• sendChatMessage(): POST chat messages to backend
• getPersonList(): GET list of persons from database

Setup

1. Install dependencies:

npm install

2. Start the development server:

npm run dev

3. Make sure your backend server is running on port 3001 (or update the API_BASE_URL in src/api/api.js)

Usage

Chat Interface

1. Navigate to the "Chat Interface" tab
2. Type natural language messages to add person information
3. Example: "Add John Doe, email: john@example.com, age: 30"
4. The backend will process the message and respond

Person Database

1. Navigate to the "Person Database" tab
2. View all persons currently in the system
3. Use the "Refresh" button to reload data
4. Table shows: Name, Email, Age, Phone, Added Date

Backend Integration

The frontend expects the following backend endpoints:

• POST /api/chat - Send chat messages
• GET /api/persons - Get list of persons

Update the API_BASE_URL in src/api/api.js if your backend runs on a different port.

Technologies Used

• React 19
• Tailwind CSS
• Vite
• Fetch API for HTTP requests

Development

• Run npm run dev for development server
• Run npm run build for production build
• Run npm run lint for code linting