🚀 InvestWise - Premium Investment Portfolio App

A modern, professional investment portfolio management application built with Next.js 15, featuring real-time market data, AI-powered insights, and premium UX design.

✨ Features

🎯 Core Functionality

• Portfolio Management - Track stocks, ETFs, and crypto with real-time prices
• AI Advisor - Get personalized investment recommendations
• Tax Center - Optimize your tax strategy
• Goal Planning - Set and track financial goals
• Real-time Market Data - Live prices from Alpha Vantage & CoinGecko APIs

🎨 Premium Design

• Glassmorphism UI - Modern backdrop blur effects
• Dark Mode - Elegant dark theme by default
• Smooth Animations - Framer Motion powered interactions
• Responsive Design - Works perfectly on all devices
• Hover Effects - Interactive scale transformations

🔧 Technical Features

• Real-time Updates - Live portfolio values and market data
• Smart Number Formatting - Intelligent K/M/B abbreviations
• CRUD Operations - Full portfolio management capabilities
• Form Validation - User-friendly input validation
• Modal System - Clean editing and confirmation dialogs

🚀 Getting Started

Prerequisites

• Node.js 18+
• npm or yarn

Installation

# Clone the repository
git clone https://github.com/matuskalis/investwise.git
cd investwise

# Install dependencies
npm install

# Set up environment variables (see API Setup below)
cp .env.example .env.local

# Run the development server
npm run dev

Open http://localhost:3000 to view the app.

🔑 API Setup

Real-time Market Data

InvestWise uses two APIs for live market data:

1. Alpha Vantage (Stocks)

• Get free API key: https://www.alphavantage.co/support/#api-key
• Rate limit: 5 requests per minute (free tier)
• Features: Real-time stock quotes, market data

2. CoinGecko (Cryptocurrency)

• No API key required (free tier)
• Rate limit: 50 calls per minute
• Features: Crypto prices, market caps, volume

Environment Variables

Create a .env.local file in the root directory:

# Market Data API Keys
NEXT_PUBLIC_ALPHA_VANTAGE_API_KEY=your_api_key_here

# Note: CoinGecko doesn't require an API key

Demo Mode

If you don't have an API key, the app will run in demo mode with simulated market data. You can toggle between demo and live data using the Market Data Status panel.

🏗️ Project Structure

src/
├── app/                    # Next.js App Router
│   ├── investwise/        # Main app routes
│   │   ├── dashboard/     # Portfolio overview
│   │   ├── portfolio/     # Holdings management
│   │   ├── ai-advisor/    # AI recommendations
│   │   ├── tax-center/    # Tax optimization
│   │   ├── goals/         # Goal planning
│   │   └── settings/      # User preferences
├── components/            # Reusable UI components
│   ├── ui/               # Base UI components
│   ├── modals/           # Modal dialogs
│   └── charts/           # Data visualization
├── hooks/                # Custom React hooks
├── services/             # API services
└── utils/                # Utility functions

🎨 Design System

Color Palette

• Primary: Blue gradient (from-blue-400 to-purple-400)
• Success: Green (text-green-400)
• Warning: Yellow (text-yellow-400)
• Error: Red (text-red-400)
• Neutral: Gray scale (text-gray-400)

Typography

• Headings: Large, bold fonts with gradient text
• Body: Clean, readable text with proper hierarchy
• Numbers: Smart formatting (1K, 1M, 1B)

Components

• Cards: Glassmorphism with backdrop blur
• Buttons: Hover effects with scale transformations
• Tables: Clean, organized data presentation
• Modals: Smooth animations and backdrop blur

🔄 Real-time Features

Market Data Updates

• Automatic refresh: Every 30 seconds
• Manual refresh: Click refresh button
• Live/Demo toggle: Switch between real and simulated data
• Cache system: Efficient API usage with 1-minute caching

Portfolio Calculations

• Real-time values: Live portfolio worth
• Gain/Loss tracking: Current profit/loss calculations
• Sector allocation: Dynamic sector weight updates
• Performance metrics: Live performance tracking

🚀 Deployment

Vercel (Recommended)

# Install Vercel CLI
npm i -g vercel

# Deploy
vercel

Other Platforms

• Netlify: Supports Next.js out of the box
• Railway: Easy deployment with database support
• AWS: Full control over infrastructure

📱 Mobile Support

• Responsive design for all screen sizes
• Touch-friendly interactions
• Mobile-optimized navigation
• Progressive Web App ready

🔒 Security

• Environment variables for sensitive data
• API rate limiting to prevent abuse
• Input validation on all forms
• Secure API calls with proper error handling

🤝 Contributing

1. Fork the repository
2. Create a feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

🙏 Acknowledgments

• Design Inspiration: Cursor.com, Dyson, 8sleep
• Icons: Lucide React
• Animations: Framer Motion
• Styling: Tailwind CSS
• Market Data: Alpha Vantage, CoinGecko

📞 Support

• Issues: GitHub Issues
• Discussions: GitHub Discussions
• Email: [Your Email]

---

Built with ❤️ using Next.js 15, TypeScript, and Tailwind CSS