CryptoVault - Next.js Crypto Investment Platform

A modern, full-featured cryptocurrency investment platform built with Next.js, React, and TypeScript. This application showcases a secure, user-friendly interface for managing crypto investments.

Features

• User Authentication: Sign up, login, and account management
• Dashboard: Real-time portfolio overview with charts and statistics
• KYC Verification: Multi-step identity verification process
• Deposit & Withdraw: Easy fund management with multiple crypto options
• Support Center: Ticket submission system and contact methods
• Responsive Design: Mobile-first, fully responsive interface
• Modern UI: Built with Tailwind CSS and Lucide icons
• Local Storage: Demo data persistence using browser storage

Pages

• /landing - Landing page with features and investment plans
• / - Dashboard (requires login)
• /auth/login - Login page with demo login option
• /auth/signup - Sign up page
• /kyc - Multi-step KYC verification
• /deposit - Deposit funds page
• /withdraw - Withdraw funds page
• /support - Support center with ticket system

Getting Started

Prerequisites

• Node.js 18+
• npm or pnpm

Installation

1. Clone the repository or download the files
2. Install dependencies:

npm install
# or
pnpm install

3. Start the development server:

npm run dev
# or
pnpm dev

4. Open http://localhost:3000 in your browser

Demo Login

Click the "Demo Login" button on the login page to explore the platform with sample data.

Demo Credentials:

• Email: john@example.com
• Password: password123

Project Structure

app/
├── page.tsx              # Dashboard
├── landing/page.tsx      # Landing page
├── auth/
│   ├── login/page.tsx   # Loapp/
├── page.tsx              # Dashboard
├── landing/page.tsx      # Landing page
├── auth/
│   ├── login/page.tsx   # Login page
│   └── signup/page.tsx  # Sign up page
├── kyc/page.tsx          # KYC verification
├── deposit/page.tsx      # Deposit page
├── withdraw/page.tsx     # Withdraw page
├── support/page.tsx      # Support center
├── layout.tsx            # Root layout
└── globals.css           # Global stylesgin page
│   └── signup/page.tsx  # Sign up page
├── kyc/page.tsx          # KYC verification
├── deposit/page.tsx      # Deposit page
├── withdraw/page.tsx     # Withdraw page
├── support/page.tsx      # Support center
├── layout.tsx            # Root layout
└── globals.css           # Global styles

Technology Stack

• Framework: Next.js 15 (App Router)
• Language: TypeScript
• Styling: Tailwind CSS
• Charts: Recharts
• Icons: Lucide React
• State Management: React Hooks + localStorage

Features Explained

Authentication

• User signup with validation
• Login with email and password
• Demo mode for quick exploration
• Session management via localStorage

Dashboard

• Portfolio overview with balance, invested amount, and returns
• Interactive balance history chart
• Recent transactions list
• Quick action buttons (Deposit, Withdraw, Invest)
• User settings and logout

KYC Verification

• Multi-step verification process (4 steps)
• Personal information collection
• Address verification
• Document upload simulation
• Review and submission

Transactions

• Deposit funds with multiple crypto options
• Withdraw funds with address verification
• Transaction history tracking
• Minimum and maximum limits

Support

• Contact methods (Email, Telegram, Discord, Live Chat)
• Support ticket submission
• Ticket status tracking

Customization

Colors

The application uses Tailwind CSS with custom colors:

• Primary: emerald-400 / emerald-500
• Dark: slate-900 / slate-950
• Accents: blue-500, purple-500, etc.

Data Storage

Currently uses localStorage for demo purposes. For production, replace with:

• Backend API
• Database (PostgreSQL, MongoDB, etc.)
• Authentication service (Auth.js, Supabase, etc.)

Security Notes

⚠️ This is a demo application. For production use:

• Never store passwords in localStorage
• Implement proper backend authentication
• Use secure password hashing
• Implement rate limiting
• Add CSRF protection
• Use HTTPS only
• Implement proper KYC verification with third-party services

Browser Support

• Chrome/Edge (latest)
• Firefox (latest)
• Safari (latest)
• Mobile browsers

Performance Optimizations

• Image lazy loading
• Code splitting via Next.js
• Optimized re-renders
• Responsive images
• CSS-in-JS optimizations

Future Enhancements

• Real-time price updates
• Advanced portfolio analytics
• Multi-factor authentication
• Email notifications
• Mobile app version
• API integration
• Admin dashboard
• Automated reporting

Support

For questions or issues, please contact support@cryptovault.com

License

This project is created with v0.app and is provided as-is for educational purposes.

Acknowledgments

• Built with Next.js
• Styled with Tailwind CSS
• Icons from Lucide React
• Charts from Recharts