🚀 ClientPro Database

A Premium Client Database Management System built on Cloudflare's Edge Platform

A modern, full-stack client management platform with advanced analytics, file management, and user administration capabilities. Built for speed, security, and scalability on Cloudflare's global edge network.

✨ Features

🎨 Beautiful User Interface

Stunning gradient-based design (Blue → Purple → Pink)
Smooth animations and hover effects
Fully responsive (mobile, tablet, desktop)
Dark mode ready
Professional modal designs

📊 Advanced Dashboard

Real-time statistics (Total, Active, New, Inactive clients)
Interactive charts with Recharts
- Client Status Distribution (Pie Chart)
- Client Growth Over Time (Line Chart)
- New Clients by Month (Bar Chart)
Quick action cards for easy navigation

📈 Analytics & Reports

Comprehensive analytics dashboard
Time range filtering (3/6/12 months)
Multiple visualization types
- Growth trend analysis
- Status distribution
- Geographic distribution (Top 10 states)
- Monthly acquisition metrics
CSV export functionality
Monthly summary tables with growth calculations

👥 Client Management

Full CRUD operations (Create, Read, Update, Delete)
Advanced search and filtering
- Search by name, phone, email
- Filter by status (Active/Inactive/Archived)
Detailed client view with:
- Complete profile information
- Notes system (add, view, delete)
- File attachments (upload, download, delete)
- Activity timeline
- Quick stats sidebar
CSV import/export
Bulk operations support

📁 File Management

Cloudflare R2 storage integration
Drag-and-drop file upload
Support for multiple file types (PDF, images, documents)
10MB file size limit
File preview and download
Secure file deletion
File metadata tracking

👤 User Management

Role-based access control (Admin/User)
Complete user administration
- Create new users
- Edit user details
- Delete users
- Toggle active/inactive status
User statistics dashboard
Last login tracking
Search and filter capabilities

⚙️ Settings & Preferences

Profile Management
- Update email
- View username and role
Security
- Change password
- Current password verification
- Password strength requirements
Preferences
- Email notifications
- SMS notifications
- Language selection
- Timezone configuration
Database Management
- Database information
- Export/import capabilities
- Data management tools

🔐 Security Features

JWT-based authentication
Bcrypt password hashing
AES-256 SSN encryption
Role-based access control
Secure API endpoints
CORS protection
Input validation
SQL injection prevention

🛠️ Tech Stack

Frontend

Framework: React 18
Build Tool: Vite
Styling: Tailwind CSS
Charts: Recharts
Routing: React Router DOM
HTTP Client: Axios
Notifications: React Hot Toast
Hosting: Cloudflare Pages

Backend

Framework: Hono
Runtime: Cloudflare Workers
Database: Cloudflare D1 (SQLite)
Storage: Cloudflare R2
Authentication: JWT (jose)
Password Hashing: bcryptjs
Encryption: Web Crypto API (AES-256)

DevOps

CLI: Wrangler
Version Control: Git
Hosting: Cloudflare Edge Network
CI/CD: Cloudflare Pages CI

🚀 Quick Start

Prerequisites

Node.js 18+ and npm
Cloudflare account
Wrangler CLI installed (npm install -g wrangler)
Git

Installation

Clone the repository

git clone https://github.com/ghwmelite-dotcom/client-database-system.git
cd client-database-system

Install Frontend Dependencies

cd frontend
npm install

Install Backend Dependencies

cd ../backend
npm install

Configure Environment

# Frontend: Create .env.production
VITE_API_URL=https://your-worker.workers.dev/api

# Backend: Configure wrangler.toml
name = "client-database-api"
compatibility_date = "2024-01-01"

Setup Database

# Create D1 database
wrangler d1 create client-database

# Run migrations
wrangler d1 execute client-database --file=./migrations/0001_initial_schema.sql

Deploy Frontend

cd frontend
npm run build
wrangler pages deploy dist --project-name=client-database

Deploy Backend

cd backend
wrangler deploy

📖 Usage

Default Login Credentials

Username: admin
Password: Admin@123

⚠️ Important: Change the default password immediately after first login!

Creating Your First Client

Navigate to the Clients page
Click "Add New Client"
Fill in the client information
Optionally add initial notes
Click "Save"

Adding Notes to a Client

Open a client's detail page
Navigate to the Notes tab
Enter your note in the text area
Click "Add Note"

Uploading Files

Open a client's detail page
Navigate to the Files tab
Drag and drop files or click to browse
Files are automatically uploaded to Cloudflare R2

Managing Users (Admin Only)

Navigate to the Users page
Click "Add New User"
Fill in user details and select role
Save to create the user

Viewing Analytics

Go to the Analytics page
Select time range (3/6/12 months)
View charts and metrics
Export reports as CSV

📁 Project Structure

client-database-system/
├── frontend/                 # React frontend application
│   ├── src/
│   │   ├── components/      # Reusable React components
│   │   │   ├── Layout.jsx
│   │   │   └── ProtectedRoute.jsx
│   │   ├── context/         # React context providers
│   │   │   └── AuthContext.jsx
│   │   ├── pages/           # Page components
│   │   │   ├── Dashboard.jsx
│   │   │   ├── Clients.jsx
│   │   │   ├── ClientDetail.jsx
│   │   │   ├── Analytics.jsx
│   │   │   ├── Settings.jsx
│   │   │   ├── Users.jsx
│   │   │   └── Login.jsx
│   │   ├── services/        # API service layer
│   │   │   └── api.js
│   │   ├── App.jsx          # Main app component
│   │   └── main.jsx         # Entry point
│   ├── package.json
│   └── vite.config.js
│
├── backend/                  # Cloudflare Workers API
│   ├── src/
│   │   ├── routes/          # API routes
│   │   │   ├── auth.js      # Authentication endpoints
│   │   │   ├── clients.js   # Client CRUD operations
│   │   │   ├── notes.js     # Notes management
│   │   │   ├── files.js     # File upload/download
│   │   │   └── users.js     # User management
│   │   ├── middleware/      # Custom middleware
│   │   │   ├── auth.js      # JWT verification
│   │   │   ├── cors.js      # CORS configuration
│   │   │   └── validation.js # Input validation
│   │   ├── utils/           # Utility functions
│   │   │   ├── auth.js      # Auth helpers
│   │   │   └── encryption.js # Encryption utilities
│   │   └── index.js         # Main worker entry
│   ├── migrations/          # Database migrations
│   ├── wrangler.toml        # Cloudflare configuration
│   └── package.json
│
├── deployment/               # Deployment scripts
│   ├── deploy-frontend.ps1
│   └── deploy-backend.ps1
│
├── DEPLOYMENT_GUIDE.md       # Detailed deployment instructions
├── IMPLEMENTATION_SUMMARY.md # Technical implementation details
├── README_FEATURES.md        # Comprehensive feature list
└── README.md                 # This file

🔌 API Endpoints

Authentication

POST   /api/auth/login       # User login
POST   /api/auth/register    # User registration
GET    /api/auth/me          # Get current user

Clients

GET    /api/clients          # List all clients
GET    /api/clients/:id      # Get client details
POST   /api/clients          # Create new client
PUT    /api/clients/:id      # Update client
DELETE /api/clients/:id      # Delete client
GET    /api/clients/export   # Export clients to CSV
POST   /api/clients/import   # Import clients from CSV

Notes

GET    /api/clients/:id/notes    # List client notes
POST   /api/clients/:id/notes    # Add note to client
DELETE /api/notes/:id            # Delete note

Files

GET    /api/clients/:id/files    # List client files
POST   /api/clients/:id/files    # Upload file
GET    /api/files/:id/download   # Download file
DELETE /api/files/:id            # Delete file

Users (Admin Only)

GET    /api/users               # List all users
POST   /api/users               # Create new user
PUT    /api/users/:id           # Update user
PATCH  /api/users/:id/status    # Toggle user status
DELETE /api/users/:id           # Delete user

🎨 Screenshots

Dashboard

Real-time statistics and interactive charts

Client Management

Advanced search, filtering, and CRUD operations

Analytics

Comprehensive reports and data visualization

Client Detail

Detailed view with notes and file management

Note: Add screenshots to docs/screenshots/ directory

🧪 Testing

Run Frontend Locally

cd frontend
npm run dev

Visit: http://localhost:5173

Run Backend Locally

cd backend
npm run dev

API available at: http://localhost:8787/api

Test API Endpoints

# Login
curl -X POST http://localhost:8787/api/auth/login \
  -H "Content-Type: application/json" \
  -d '{"username":"admin","password":"Admin@123"}'

# Get clients (with token)
curl http://localhost:8787/api/clients \
  -H "Authorization: Bearer YOUR_JWT_TOKEN"

📚 Documentation

Deployment Guide - Step-by-step deployment instructions
Implementation Summary - Technical architecture details
Features Documentation - Comprehensive feature overview
API Reference - Complete API documentation

🔧 Configuration

Frontend Environment Variables

# .env.production
VITE_API_URL=https://your-api.workers.dev/api

Backend Configuration

# wrangler.toml
name = "client-database-api"
main = "src/index.js"
compatibility_date = "2024-01-01"

[[d1_databases]]
binding = "DB"
database_name = "client-database"
database_id = "your-database-id"

[[r2_buckets]]
binding = "FILES"
bucket_name = "client-database-files"

🚀 Deployment

Option 1: Automated Deployment

# Deploy both frontend and backend
.\deployment\deploy-frontend.ps1
.\deployment\deploy-backend.ps1

Option 2: Manual Deployment

# Frontend
cd frontend
npm run build
wrangler pages deploy dist --project-name=client-database

# Backend
cd backend
wrangler deploy

Post-Deployment Checklist

🔐 Security Best Practices

Change Default Credentials
- Update admin password immediately
- Use strong, unique passwords
Environment Variables
- Never commit .env files
- Use Cloudflare secrets for sensitive data
API Security
- All endpoints require authentication
- Role-based access control enforced
- Input validation on all requests
- SQL injection protection
Data Encryption
- SSN fields encrypted with AES-256
- Passwords hashed with bcrypt
- JWT tokens for stateless auth
Regular Updates
- Keep dependencies updated
- Monitor security advisories
- Review access logs

🤝 Contributing

Contributions are welcome! Please follow these guidelines:

Fork the repository
Create a feature branch
```
git checkout -b feature/amazing-feature
```
Commit your changes
```
git commit -m "Add amazing feature"
```
Push to the branch
```
git push origin feature/amazing-feature
```
Open a Pull Request

Code Style

Follow existing code formatting
Use meaningful variable names
Add comments for complex logic
Write clean, maintainable code

Commit Messages

Use conventional commits format
Examples:
- feat: add user export functionality
- fix: resolve login redirect issue
- docs: update API documentation
- style: format code with prettier

📝 License

This project is licensed under the MIT License - see the LICENSE file for details.

👨‍💻 Author

GHWM Elite

GitHub: @ghwmelite-dotcom
Website: ghwmelite.com

🙏 Acknowledgments

Cloudflare - For the amazing edge platform
React - For the powerful UI framework
Hono - For the lightweight web framework
Recharts - For beautiful charts
Tailwind CSS - For utility-first styling

📞 Support

For support, please:

Open an issue on GitHub
Contact: support@ghwmelite.com
Visit: https://ghwmelite.com/support

🗺️ Roadmap

Upcoming Features

📊 Project Stats

🌟 Star History

Built with ❤️ using Cloudflare's Edge Platform

⬆ Back to Top

Name		Name	Last commit message	Last commit date
Latest commit History 6 Commits
backend		backend
deployment		deployment
frontend		frontend
.gitignore		.gitignore
DEPLOYMENT_GUIDE.md		DEPLOYMENT_GUIDE.md
IMPLEMENTATION_SUMMARY.md		IMPLEMENTATION_SUMMARY.md
README.md		README.md
README_FEATURES.md		README_FEATURES.md

ghwmelite-dotcom/client-database-system

Folders and files

Latest commit

History

Repository files navigation