🌟 Vriddhi Alpha Finder - React Frontend

A sophisticated React frontend application that replicates the Vriddhi Streamlit application functionality with modern UI/UX, built with React 18, TypeScript, and Tailwind CSS.

🚀 Features

Core Investment Features

• Investment Parameter Controls: Monthly investment amount (min ₹50,000), investment horizon selection (1-5 years)
• Investment Summary Display: Sidebar with key metrics and calculations
• Educational Disclaimers: Comprehensive disclaimer sections with risk warnings
• Portfolio Results Display: Stock selection rationale, sector breakdown, optimization results
• Comprehensive Visualizations: 6 chart types showing growth projections, sector allocation, year-over-year breakdown
• Dual Portfolio Views: Fractional shares vs whole shares comparison
• Professional Layout: Clean, wide layout with responsive design

Technical Features

• Modern React Architecture: React 18 with TypeScript and Vite for fast development
• State Management: Zustand for lightweight, efficient state management
• Form Validation: React Hook Form + Zod for robust form handling
• Charts & Visualizations: Chart.js with react-chartjs-2 for interactive charts
• UI Components: Shadcn/ui + Tailwind CSS for modern, accessible design
• API Integration: Axios for backend communication with error handling
• Responsive Design: Mobile-first approach with desktop optimization
• Error Handling: Comprehensive error boundaries and user feedback

📊 Charts & Visualizations

1. Investment Growth Projection (Line chart with fill areas)
2. Sector Allocation (Doughnut chart with detailed breakdowns)
3. Portfolio Performance Comparison (Horizontal bar chart)
4. Year-over-Year Growth (Stacked bar chart with statistics)
5. Monthly Investment vs Value (Multi-dataset line chart)

🛠️ Technology Stack

Frontend

• React 18 - Latest React with concurrent features
• TypeScript - Type safety and better developer experience
• Vite - Fast build tool and development server
• Tailwind CSS - Utility-first CSS framework
• Shadcn/ui - Modern, accessible UI components

Charts & Data Visualization

• Chart.js - Flexible charting library
• react-chartjs-2 - React wrapper for Chart.js

State Management & Forms

• Zustand - Lightweight state management
• React Hook Form - Performant form handling
• Zod - Schema validation

Routing & Navigation

• React Router v6 - Client-side routing
• React Query - Server state management

🚀 Quick Start

Prerequisites

• Node.js 18+ and npm/yarn
• Git

Installation

1. Clone the repository

   git clone <repository-url>
   cd vriddhi-react-frontend

2. Install dependencies

   npm install
   # or
   yarn install

3. Set up environment variables

   cp .env.example .env

   Edit .env file:

   VITE_API_BASE_URL=http://localhost:8000
   VITE_APP_NAME=Vriddhi Alpha Finder
   VITE_APP_VERSION=1.0.0-beta

4. Start development server

   npm run dev
   # or
   yarn dev

5. Open in browser

   http://localhost:3000
   

Build for Production

# Build the application
npm run build

# Preview the build
npm run preview

📁 Project Structure

src/
├── components/           # Reusable UI components
│   ├── ui/              # Shadcn/ui base components
│   ├── layout/          # Layout components (Header, Footer, Sidebar)
│   ├── forms/           # Form components
│   └── charts/          # Chart components
├── pages/               # Page components
│   ├── Home.tsx         # Landing page with investment form
│   ├── Portfolio.tsx    # Portfolio allocation view
│   ├── Analysis.tsx     # Investment analysis with charts
│   └── About.tsx        # About page with educational content
├── hooks/               # Custom React hooks
├── services/            # API services and external integrations
├── store/               # Zustand state management
├── types/               # TypeScript type definitions
├── lib/                 # Utility functions
└── styles/              # Global styles and Tailwind config

🎨 Key Components

Forms

• InvestmentForm: Main investment parameter input with validation
• Form validation using React Hook Form + Zod schema

Charts

• InvestmentGrowthChart: Line chart showing portfolio growth over time
• SectorAllocationChart: Doughnut chart for sector diversification
• YearlyBreakdownChart: Bar chart for year-wise analysis
• PortfolioAllocationChart: Horizontal bar chart for stock allocation

Layout

• Header: Navigation with responsive mobile menu
• Sidebar: Investment summary and results overview
• Footer: Educational disclaimers and app information

Pages

• Home: Investment form and feature overview
• Portfolio: Detailed portfolio allocation and comparison
• Analysis: Comprehensive growth analysis with charts
• About: Educational content and technical details

🔗 API Integration

The frontend integrates with a FastAPI backend through:

• Investment Analysis: POST /api/analyze - Main portfolio optimization
• Stock Universe: GET /api/stocks/universe - Stock data information
• Health Check: GET /api/health - Backend service status

Mock Data

The application includes comprehensive mock data for development and testing when the backend is not available.

📱 Responsive Design

• Mobile-first approach with progressive enhancement
• Breakpoints: sm (640px), md (768px), lg (1024px), xl (1280px)
• Touch-friendly interfaces with appropriate sizing
• Flexible layouts using CSS Grid and Flexbox
• Accessible design following WCAG guidelines

🚀 Deployment

Vercel Deployment (Recommended)

1. Connect repository to Vercel
2. Set environment variables in Vercel dashboard:

   VITE_API_BASE_URL=https://your-backend-api.com
   VITE_APP_ENVIRONMENT=production
   

3. Deploy automatically on push to main branch

Manual Deployment

# Build the application
npm run build

# Upload dist/ directory to your hosting provider
# Configure web server to serve index.html for all routes

🔧 Configuration

Environment Variables

• VITE_API_BASE_URL - Backend API URL
• VITE_APP_NAME - Application name
• VITE_APP_VERSION - Application version
• VITE_APP_ENVIRONMENT - Environment (development/production)

Build Configuration

• Vite config in vite.config.ts
• TypeScript config in tsconfig.json
• Tailwind config in tailwind.config.js
• PostCSS config in postcss.config.js

🧪 Development

Code Quality

• TypeScript for type safety
• ESLint for code linting
• Prettier for code formatting (optional)

Development Commands

# Start development server
npm run dev

# Build for production
npm run build

# Preview production build
npm run preview

# Type checking
npm run type-check

# Lint code
npm run lint

⚠️ Important Disclaimers

EDUCATIONAL PURPOSE ONLY: This application is designed for educational purposes and is in BETA testing. DO NOT use for actual investment decisions.

• Uses simulated data and theoretical models
• Not reviewed by financial professionals
• Does not constitute financial advice
• Should not replace consultation with qualified financial advisors

📝 License

This project is for educational purposes. Please consult the appropriate license file for usage rights.

🤝 Contributing

This is an educational project. Please ensure any contributions maintain the educational nature and include appropriate disclaimers.

📞 Support

For educational use and technical questions related to the implementation, please refer to the documentation and code comments.

---

Built with ❤️ using React, TypeScript, and modern web technologies for educational purposes.