Architecture Overview

Cropr is built with a modern, scalable architecture designed to aggregate multiple DeFi protocols across multiple blockchains into a unified platform.

System Architecture

┌─────────────────────────────────────────────┐
│                  Frontend                    │
│  React + TypeScript + Vite + Redux Toolkit   │
│  wagmi + viem + ConnectKit                   │
├─────────────────────────────────────────────┤
│              WebSocket (Socket.io)            │
├─────────────────┬───────────────────────────┤
│                 │                             │
│    REST API     │      Real-time Events       │
│                 │                             │
├─────────────────┴───────────────────────────┤
│                  Backend                     │
│        NestJS + TypeScript + Prisma          │
├──────┬──────┬──────┬──────┬──────┬──────────┤
│ DEX  │Lend  │Stake │Bridge│Vaults│Portfolio  │
│Module│Module│Module│Module│Module│Module     │
├──────┴──────┴──────┴──────┴──────┴──────────┤
│            Data Layer                        │
│  PostgreSQL (Prisma) + Redis (Cache)         │
├─────────────────────────────────────────────┤
│          External Integrations               │
│  Blockchain RPCs │ DeFi Protocols │ APIs     │
│  (ethers/viem)   │ (SDK/contracts)│ (CoinGecko│
│                  │               │  Alchemy)  │
└─────────────────────────────────────────────┘

Frontend Architecture

Technology Stack

Technology	Purpose
React 18	UI framework
TypeScript	Type safety
Vite	Build tool with HMR
Redux Toolkit	Global state management
RTK Query	API data fetching and caching
wagmi	React hooks for Ethereum
viem	Ethereum client library
ConnectKit	Wallet connection UI
Material-UI	Component library
TailwindCSS	Utility-first styling
Socket.io	Real-time WebSocket communication
Recharts	Data visualization
Lightweight Charts	TradingView-style financial charts

State Management

The frontend uses Redux Toolkit with the following slices:

Slice	Responsibility
AuthSlice	Authentication tokens and user details
UserSlice	User preferences and token selections
AppSlice	Global alerts and loading states
WalletDataSlice	Portfolio data, wallets, positions
TokenDataSlice	Token lists and balances
TransactionSlice	Transaction history
PoolSlice	Liquidity protocol selection
ExchangeSlice	CEX exchange data

Provider Hierarchy

MoonPayProvider
  └── GoogleOAuthProvider
       └── ThemeProvider (MUI)
            └── Web3Provider (wagmi + ConnectKit)
                 └── SocketProvider (WebSocket)
                      └── NetworkSwitchProvider
                           └── App Components

Performance Optimizations

• Code splitting — Lazy loading of route components
• Prefetching — Page chunks prefetched after initial load
• RTK Query caching — 5-minute cache for most API data
• Debouncing — 500ms debounce for user inputs
• Vendor chunking — Separate chunks for React, MUI, Web3, Charts

Backend Architecture

Technology Stack

Technology	Purpose
NestJS	Server framework (modular architecture)
TypeScript	Type safety
Prisma	ORM for database operations
PostgreSQL	Primary database (2 schemas)
Redis	Caching layer (Keyv)
Socket.io	WebSocket server
ethers.js / viem	Blockchain interactions
Swagger	API documentation
Winston	Logging with daily rotation

Module Structure

The backend follows NestJS modular architecture:

Module	Responsibility
Auth	Google OAuth, JWT authentication
Portfolio	Portfolio analytics and metrics
Token	Token management and balances
DEX	DEX trading, liquidity, pool data
Lending	Lending protocol integration
Stake	Staking operations
Bridge	Cross-chain bridging
Vaults	Vault management
Exchange	CEX integration
Referral	Referral system
Database	Prisma service and data access
Cron	Scheduled tasks and data sync
Admin Dashboard	Admin panel functionality

Database Architecture

Cropr uses two PostgreSQL databases:

Main Database (schema.prisma):

• User accounts and wallets
• Transaction records
• DeFi positions (LP, lending, staking)
• Referral data
• Admin accounts

Common Database (common.schema.prisma):

• Token market data and prices
• DEX pool data and cache
• CoinGecko address mappings
• Exchange metadata

Caching Strategy

• Redis for hot data (token prices, pool lists, quotes)
• Database fallback when cache misses occur
• TTL-based expiration for time-sensitive data
• Tag-based invalidation on the frontend via RTK Query

Real-Time Communication

WebSocket (Socket.io) powers:

• Live balance updates after transactions
• Portfolio value changes
• Position sync events
• Data refresh triggers

Security Architecture

Layer	Mechanism
Authentication	Google OAuth 2.0 + JWT tokens
Session Management	Device/IP tracking, session validation
API Security	Helmet headers, CORS, rate limiting (100 req/min)
Data Validation	class-validator DTOs, Joi schema validation
Frontend Security	CSP headers, anti-clickjacking, XSS protection
Password Security	bcrypt hashing, 2FA (TOTP) for admin