Overview
A premium client portal and project management platform built for a marketing & software development agency. Features real-time Chatwoot CRM widget integration, custom project dashboards, and automated Cashfree payment gateway webhook processing.
The Problem
Agency client coordination, milestone invoice verification, and task tracking are traditionally manual, slow, and prone to communication gaps across emails, bank receipts, and support channels.
Research Method
Designed real-time iframe postMessage protocols to link active user profiles within Chatwoot sidebars. Optimized Lighthouse audits (PageSpeed) to score 100/100 in contrast ratios and screen-reader accessibility.
Architecture
Monolithic Next.js client-facing web app using PostgreSQL. The payment gateway triggers one-time checkout links via REST APIs, while a webhook listener intercepts payment events, verifies signatures, and updates database records.
Security & Auth
NextAuth.js session-based OAuth authentication paired with cryptographically verified webhook event signatures.
Performance Stats
Sitemap render speed: <50ms. PageSpeed Lighthouse audit score: 98+ Accessibility & SEO performance rating.
Database Design
CREATE TABLE projects (id SERIAL PRIMARY KEY, title VARCHAR(255), client_id INT REFERENCES users(id)); CREATE TABLE milestones (id SERIAL PRIMARY KEY, project_id INT, amount DECIMAL, status VARCHAR(50)); CREATE TABLE tasks (id SERIAL PRIMARY KEY, title VARCHAR(255), status VARCHAR(50));
API Routing Map
- →POST /api/payments/cashfree/create - Initializes a dynamic payment link session for a milestone
- →POST /api/webhooks/cashfree - Receives and verifies payment gateway notifications to auto-release milestones
- →GET /api/projects - Queries active campaigns, checklists, and chat logs for the client dashboard
Code Pipeline
// Generates dynamic Cashfree payment order link for client milestones
async function createMilestonePaymentLink(orderId, amount, customerEmail) {
const response = await fetch("https://api.cashfree.com/pg/orders", {
method: "POST",
headers: {
"x-client-id": process.env.CASHFREE_APP_ID,
"x-client-secret": process.env.CASHFREE_SECRET_KEY,
"x-api-version": "2023-08-01",
"Content-Type": "application/json"
},
body: JSON.stringify({
order_id: orderId,
order_amount: amount,
order_currency: "INR",
customer_details: { customer_id: customerEmail, customer_email: customerEmail }
})
});
return response.json();
}Infrastructure & Deploy
Dockerized containerized deployment orchestrated through Dokploy on a virtual private server (VPS).
Future Roadmap
- ✔Integrate end-to-end encrypted file lockers for secure client deliverable uploads
- ✔Add multi-regional localization options for automated invoice tax compilation