ClientFlow CRM

ClientFlow is a full-stack CRM application built with the MERN stack for managing contacts, follow-ups, notes, and account data in one focused workspace.

The app helps small teams and solo operators keep client records organized, spot missing contact details, track open tasks, and preserve a clear activity history for each relationship. It includes secure authentication, protected user data, responsive dashboards, CSV contact import/export, and account management tools.

📸 Screenshots

Signin

Register

Contacts

Dashboard

New Contact

Edit Contact

Contact Profile

Profile Settings

Tech Stack

Frontend

• React
• React Router
• TanStack Query (React Query)
• React Hook Form
• Zod
• Tailwind CSS

Backend

• Node.js
• Express.js
• MongoDB
• Mongoose
• JWT (authentication with HTTP-only cookies)

Tools

• Axios
• Vercel (deployment)

Setup Instructions

1. Clone the repository

git clone https://github.com/rawdaymohamed/ClientFlow.git
cd ClientFlow

2. Backend Setup

cd server
npm install

Create a .env file in the server directory with the following content:

PORT=5000MONGO_URI=your_mongodb_connection_stringJWT_SECRET=your_secretCLIENT_URL=http://localhost:5173

Start the backend server:

npm start

3. Frontend Setup

cd ../client
npm install

Create a .env file in the client directory with the following content:

VITE_API_BASE_URL=http://localhost:5000/api

Start the frontend development server:

npm run dev

4. Access the Application

Open your browser and navigate to http://localhost:5173 to access the ClientFlow CRM application.

Features

• Secure user registration, login, logout, and session handling with JWT stored in HTTP-only cookies
• Protected dashboard, contacts, contact detail, edit, and settings routes
• Contact CRUD for creating, viewing, editing, and deleting client records
• Search, filter, sort, and pagination support for the contact database
• CSV contact import and export for moving client data in and out of the CRM
• Dashboard metrics for total contacts, recent records, completed contact details, and open follow-ups
• Contact profile pages with email, phone, company details, quick mail/call links, notes, tasks, and activity history
• Contact notes for capturing relationship context and removing outdated notes
• Follow-up task management with due dates, open/completed status updates, and deletion
• Activity timeline that records key contact, note, task, and import events
• Account settings for profile updates, password changes, JSON data export, and account deletion
• Light/dark theme toggle with saved user preference
• Responsive UI built with Tailwind CSS for desktop and mobile workflows
• Client-side form validation with Zod and React Hook Form
• API caching and mutation handling with TanStack Query
• Toast feedback for important actions such as imports, exports, profile updates, and errors

Future Improvements

• Add role-based access control (admin vs user)
• Add lead pipeline stages and deal tracking
• Add reminders or notification scheduling for upcoming follow-ups
• Add richer analytics for activity, task completion, and contact quality
• Add team collaboration features such as shared contacts and assignments
• Add automated tests for API routes, validation, and critical frontend flows
• Deploy full stack with a production database, custom domain, and monitoring