SyncFinance

SyncFinance is a comprehensive, real-time collaborative financial planning application. It allows financial teams, managers, and analysts to work together in shared workspaces, edit financial documents collaboratively, communicate in real-time, and analyze financial data securely.

Features

• Real-Time Collaboration: Edit financial documents simultaneously with your team using Socket.IO.
• Workspaces: Organize your financial plans, documents, and team members into dedicated workspaces.
• Real-Time Chat: Communicate with your team members directly within workspaces and documents.
• Role-Based Access Control (RBAC): Secure access with roles like Admin, Finance Manager, and Viewer.
• Analytics Dashboard: Visualize financial data and metrics using interactive charts (Recharts).
• Audit Logs: Track all critical actions, document edits, and access logs for compliance and security.
• Notifications: Stay updated with real-time alerts about document changes and mentions.

Technology Stack

The project is structured as a monorepo containing the client, server, and shared types.

Frontend (Client)

• Framework: React 19 with Vite
• Styling: TailwindCSS v4
• State Management & Data fetching: React Context / Custom Hooks
• Real-time: Socket.IO Client
• Forms & Validation: Formik & Yup
• Charts: Recharts
• Icons: Lucide React
• Language: TypeScript

Backend (Server)

• Runtime: Node.js
• Framework: Express.js
• Real-time: Socket.IO with Redis Adapter (for horizontal scaling)
• Database: MongoDB (Mongoose ODM)
• Authentication: JWT (JSON Web Tokens) & bcryptjs
• Validation: Zod
• Language: TypeScript

Shared

• Shared TypeScript interfaces and types for seamless client-server communication.

Project Structure

syncfinance/
├── client/              # React frontend application
│   ├── public/          # Static assets
│   └── src/
│       ├── components/  # Reusable UI and page components
│       ├── context/     # Global state context
│       ├── services/    # API and Socket services
│       ├── types/       # Frontend-specific types
│       └── utils/       # Utility functions
├── server/              # Node.js backend application
│   ├── scripts/         # Utility scripts (e2e, smoke tests, etc.)
│   └── src/
│       ├── config/      # Environment and DB configuration
│       ├── controllers/ # Route handlers
│       ├── middleware/  # Express middleware (auth, rate limiting)
│       ├── models/      # Mongoose database schemas
│       ├── routes/      # Express API routes
│       ├── services/    # Business logic
│       ├── socket/      # Socket.IO event handlers
│       └── types/       # Backend-specific types
└── shared/              # Shared resources
    └── types/           # Shared TypeScript interfaces (User, Document, etc.)

Getting Started

Prerequisites

• Node.js (v18 or higher)
• MongoDB (running locally or via MongoDB Atlas)
• Redis (for Socket.IO adapter)

Installation

1. Clone the repository
2. Install dependencies for all parts of the application:

# Install client dependencies
cd client
npm install

# Install server dependencies
cd ../server
npm install

Environment Setup

Create a .env file in both client and server directories based on their respective .env.example files.

Server .env example:

PORT=5000
MONGODB_URI=mongodb://localhost:27017/syncfinance
REDIS_URL=redis://localhost:6379
JWT_SECRET=your_super_secret_jwt_key
CLIENT_URL=http://localhost:5173

Running the Application

Start the Server:

cd server
npm run dev

Start the Client:

cd client
npm run dev

The client will be available at http://localhost:5173 and the server API at http://localhost:5000.

Architecture & Security

System Architecture Flow

flowchart TB
    User((User))
    
    subgraph Frontend [React Client]
        App[Vite + React App]
        State[React Context]
        App --> State
    end
    
    subgraph Backend [Node.js Backend]
        API[Express API]
        Sockets[Socket.IO Server]
    end
    
    subgraph DatabaseLayer [Data Storage]
        Mongo[(MongoDB)]
        Redis[(Redis)]
    end
    
    User -->|Interacts| App
    State <-->|REST HTTP Requests| API
    State <-->|Real-time Events| Sockets
    
    API <-->|CRUD Operations| Mongo
    Sockets <-->|Save/Load Docs| Mongo
    Sockets <-->|Pub/Sub Scaling| Redis

Loading

• Authentication: Stateless JWT-based authentication.
• WebSockets: Real-time events for document updates, cursors, chat, and notifications are handled via Socket.IO.
• Scaling: The server uses ioredis and @socket.io/redis-adapter to allow multiple Node.js instances to share Socket.IO state.
• Security: Includes helmet for HTTP headers, express-rate-limit for rate limiting, and robust input validation using zod.