Charmeey_DeFi_FullStack — DeFi Portfolio Dashboard

Your DeFi portfolio, intelligently managed.

Charmeey_DeFi_FullStack is a premium, production-quality DeFi portfolio management web application designed to combine the visual sophistication of private banking and modern fintech with the power and terminology of professional Web3 protocols.

---

🎨 Design Direction

Charmeey_DeFi_FullStack avoids typical Web3 tropes (excessive neon, giant logos, purple gradients, 3D coins) in favor of:

• Dark premium interface with deep charcoal/near-black backgrounds (#0a0f18 / ink-950).
• Off-white typography and restrained, purposeful accent colors.
• Thin borders, soft shadows, and generous spacing.
• Institutional-grade polish suitable for a professional SaaS case study.

---

✨ Key Features & Screens

1. Dashboard: Real-time portfolio summary ($284,920.48), 24h change, total earned, average APY, interactive portfolio performance chart (1D–All timeframes), asset allocation donut chart, active DeFi positions, and recent transaction activity.
2. Portfolio: Comprehensive multi-tab asset tracker (Crypto, Stablecoins, DeFi positions) with search and filtering.
3. Asset Details: Deep-dive analytics for individual tokens (price history charts, balance, average buy price, unrealized P&L, and quick actions).
4. Token Swap: Polished DEX swap interface with exchange rate calculations, price impact, network fees, slippage settings, review confirmation modal, and success states.
5. Staking: ETH staking hero card, active staking position, validator metrics, historical APY chart, and rewards tracking.
6. Lending & Borrowing: Supply and borrow markets with utilization rates, collateral management, and health factor visualization.
7. Yield Opportunities (Earn): Yield discovery across top protocols (Aave, Uniswap, Charmeey_DeFi_FullStack Vaults) with TVL and risk ratings.
8. Risk Analysis: Dedicated risk scoring (28/100 Low Risk) with breakdown across market, liquidity, smart contract, and concentration risks, plus automated portfolio insights.
9. Transaction History: Professional transaction log with search and multi-faceted filters (Type, Network, Status, Date).
10. Wallet Connection: Multi-wallet modal (MetaMask, Coinbase Wallet, WalletConnect) plus Demo Mode for full application exploration without requiring wallet credentials.
11. Settings: Account preferences, appearance themes, fiat currency selector, notification toggles, 2FA security settings, and connected wallets.

---

🛠️ Technology Stack

• Framework: React 18 + Vite
• Language: TypeScript (Strict mode)
• Styling: Tailwind CSS (with custom utility classes and design tokens)
• Charts: Recharts
• Icons: Lucide React

---

🚀 Getting Started

Prerequisites

Ensure you have Node.js (v18 or higher recommended) and npm installed on your machine.

Installation & Running

1. Install dependencies:

   npm install

2. Run the development server:

   npm run dev

3. Open your browser and navigate to: http://localhost:5173

Other Available Scripts

• Build for production:

  npm run build

• Type check:

  npm run typecheck

• Lint code:

  npm run lint

---

🚀 Running the backend without Docker

Prerequisites: Node.js ≥ 20.12 and a locally running PostgreSQL 13+ (install it natively or use any managed instance — the API needs no other services).

1. Create the database role (one-time; the hyphen means the name must be quoted). DeFi-Nexora below is the user, password and database name from server/.env:

   psql -U postgres -c "CREATE USER \"DeFi-Nexora\" WITH PASSWORD 'DeFi-Nexora';"

   Using a managed cloud Postgres (Neon, Supabase, RDS)? Skip this step — just set DATABASE_URL and DATABASE_SSL=true in server/.env.

2. Configure the backend:

   copy server\.env.example server\.env

   Make sure server/.env has DATABASE_URL=postgres://DeFi-Nexora:DeFi-Nexora@localhost:5432/DeFi-Nexora and a JWT_SECRET of at least 32 characters.

3. Install dependencies:

   npm install
   npm run server:install

4. Start the backend. It auto-creates the database, runs migrations and seeds reference data on first boot:

   npm run dev:server

5. Verify it's up: open http://localhost:4000/health.

6. Run the frontend (separate terminal):

   npm run dev

   Then open http://localhost:5173 and connect a wallet.

Manual database setup (optional — the server does this automatically): npm run db:setup runs migrations + seed; npm run db:reset drops and re-seeds. If you prefer Docker just for Postgres: npm run db:up (docker compose up -d postgres).

---

Backend & wallet connection

• Wallet discovery (EIP-6963 + legacy injected providers), connect, session restore and account/chain handling live in src/lib/wallet.ts and src/context/AppContext.tsx.
• The PostgreSQL-backed API is in server/. Copy .env.example to .env; leave VITE_API_URL empty to keep running on local mock data.
• WalletConnect needs a free project id in VITE_WALLETCONNECT_PROJECT_ID.

---

🐙 Using GitHub

To collaborate, contribute, or manage this repository via GitHub:

1. Clone the Repository:

   git clone https://github.com/charmeey/Charmeey_DeFi_FullStack.git
   cd Charmeey_DeFi_FullStack

2. Branching Strategy:

   • main: Production-ready code.
   • Feature branches: feature/your-feature-name or fix/issue-description.

3. Submitting Pull Requests:

   • Push your feature branch to your fork or origin.
   • Open a Pull Request against main with a clear description of changes.

4. Reporting Issues:

   • Use the GitHub Issues tab to report bugs, request features, or ask questions.