StakeFlow - Premium Investment Platform

A unified dashboard application for managing user investments, stakes, deposits, and withdrawals with separate admin and user portals.

Features

User Portal

• Dashboard: Overview of balance, active stakes, and recent transactions
• Deposits: Track deposit history and current deposits
• Stakes: Create and manage investment stakes with real-time tracking
• Withdrawals: Initiate and monitor withdrawal requests
• Transactions: Complete transaction history with detailed information
• Account Management: Update profile and account settings

Admin Portal

• Users Management: View all users with advanced filtering and search
• User Details: Premium detailed view of individual users including:
  • User profile information and account overview
  • Financial metrics (current balance, total deposited, active stakes, expected returns)
  • Complete deposit history with status tracking
  • Active and completed stakes with maturity progress tracking
  • Withdrawal history
  • Full transaction log with type indicators
  • Action buttons for export, edit, messaging, and access management
• Dashboard Analytics: Overview of platform statistics
• Notifications: System notifications and alerts
• Results: Daily results and performance metrics
• Stake Management: Monitor all platform stakes
• Transaction Monitoring: Track all platform transactions

Architecture

This is a unified application combining user and admin portals with shared design system and code patterns.

Project Structure

src/
├── components/
│   ├── admin/              # Admin-specific components
│   │   ├── UserDetailsModal.tsx
│   │   └── UserDetailsPage/  # Premium user details components
│   │       ├── UserHeader.tsx
│   │       ├── BalanceCard.tsx
│   │       ├── DepositsList.tsx
│   │       ├── StakesList.tsx
│   │       ├── WithdrawalsList.tsx
│   │       ├── TransactionsList.tsx
│   │       ├── ActionButtons.tsx
│   │       └── index.tsx
│   ├── layout/            # Layout components
│   └── ui/                # Reusable UI components
├── pages/
│   ├── admin/             # Admin pages
│   └── [User pages]       # User portal pages
├── lib/
│   ├── storage.ts         # Unified data management
│   └── utils.ts          # Utility functions
└── App.tsx               # Routing configuration

Design System

Color Palette:

• Primary: hsl(160 84% 39%) - Teal/Green
• Accent: hsl(45 93% 58%) - Gold/Yellow
• Success: hsl(160 84% 39%)
• Warning: hsl(45 93% 58%)

Components:

• .stat-card - Highlighted information cards
• .glass-card - Glass-morphism cards
• .btn-primary - Primary action buttons
• .badge-* - Status badges (success, pending, warning)
• .progress-bar - Progress indicators

Animations:

• Fade-in transitions on component mount
• Slide-in animations for list items
• Scale animations for interactive elements
• Staggered delays for child elements

Getting Started

Prerequisites

• Node.js 18+ or Bun
• npm or bun package manager
• MongoDB (local or Atlas)

Frontend Setup

1. Install frontend dependencies: npm install
2. Create .env from .env.example and set: VITE_API_URL=http://localhost:4000/api Optional for LAN access without hardcoding an IP: VITE_API_PROTOCOL=http VITE_API_PORT=4000
3. Start frontend: npm run dev

The frontend opens at http://localhost:8080.

Backend Setup (MongoDB)

1. Install backend dependencies: npm --prefix backend install
2. Create backend/.env from backend/.env.example.
3. Set required variables: MONGODB_URI, JWT_SECRET, ADMIN_EMAIL, ADMIN_PASSWORD Optional for network access: HOST=0.0.0.0 CORS_ORIGINS=* (or a comma-separated allow-list like http://192.168.1.10:8080,http://localhost:8080)
4. Seed admin account: npm run seed:backend
5. Start backend: npm run dev:backend

Backend runs at http://localhost:4000 with API base http://localhost:4000/api.

Technologies Used

This project is built with:

• React 18.3.1 - UI framework
• TypeScript - Type-safe development
• Vite - Fast build tool and dev server
• TailwindCSS - Utility-first CSS framework
• Framer Motion - Animation library
• React Router v6 - Client-side routing
• Radix UI / shadcn-ui - Accessible UI components
• React Query - Data management
• Lucide React - Icon library

Authentication

User Login

• Email and password-based authentication
• New user registration available
• Session persistence via localStorage

Admin Login

• Separate admin authentication endpoint
• Admin credentials validated against admin user database
• Secure admin session management

Demo Credentials

User Account:

• Email: user@stakeflow.com
• Password: user123

Admin Account:

• Email: admin@stakeflow.com
• Password: admin123

Data Management

All application data is managed through a unified storage.ts layer that provides:

• User Management: Authentication, profiles, and account data
• Financial Data: Deposits, stakes, withdrawals, and transactions
• Analytics: User statistics and platform-wide metrics
• Mock Data: Pre-populated data for testing and development

Data persists to localStorage for development and can be integrated with a backend API.

MongoDB backend implementation is now available in backend/ with:

• JWT authentication (/api/auth/register, /api/auth/login)
• User profile and summary endpoints (/api/users/*)
• Finance flows for deposits, stakes, withdrawals, and transactions (/api/finance/*)
• Admin analytics and management endpoints (/api/admin/*)

Frontend can use src/lib/api.ts to consume these endpoints during migration from localStorage.

Development

Component Development

Components follow a modular, reusable pattern with:

• TypeScript interfaces for prop types
• Framer Motion for animations
• TailwindCSS for styling
• Design system compliance

Adding New Components

1. Create component in appropriate folder (ui/, admin/, or layout/)
2. Define TypeScript interfaces for props
3. Export component as default or named export
4. Apply design system classes and animations
5. Add component to relevant pages

License

This project is built with Lovable. See LICENSE file for more details.

Support

For issues, feature requests, or questions, please open an issue in the repository.