Brokit - Trading Platform

A modern, responsive trading platform clone inspired by Brokit, featuring a comprehensive dashboard for stock trading, portfolio management, and real-time market data visualization.

🚀 Features

• Landing Page: Professional marketing website with multiple sections
• Trading Dashboard: Real-time portfolio tracking and order management
• Stock Management: Buy/sell orders, holdings, and watchlist
• Data Visualization: Interactive charts and graphs for market analysis
• Responsive Design: Mobile-first approach with modern UI/UX
• Real-time Updates: Live data integration for market information

🛠️ Technologies Used

Frontend

• React 18/19 - Modern React with hooks and functional components
• React Router - Client-side routing and navigation
• Material-UI (MUI) - Professional UI component library
• Chart.js - Interactive data visualization
• Axios - HTTP client for API communication

Development Tools

• Create React App - Modern React development setup
• ESLint - Code quality and consistency
• CSS3 - Modern styling with responsive design

📁 Project Structure

├── frontend/                 # Main landing page application
│   ├── src/
│   │   ├── landing_page/    # Landing page components
│   │   │   ├── home/        # Homepage components
│   │   │   ├── about/       # About page
│   │   │   ├── products/    # Products showcase
│   │   │   ├── pricing/     # Pricing plans
│   │   │   ├── support/     # Support page
│   │   │   ├── signup/      # User registration
│   │   │   ├── Navbar.js    # Navigation component
│   │   │   └── Footer.js    # Footer component
│   │   └── index.js         # Main entry point
│   └── package.json
├── dashboard/                # Trading dashboard application
│   ├── src/
│   │   ├── components/      # Dashboard components
│   │   │   ├── Dashboard.js # Main dashboard layout
│   │   │   ├── Holdings.js  # Portfolio holdings
│   │   │   ├── WatchList.js # Stock watchlist
│   │   │   ├── Orders.js    # Order management
│   │   │   ├── Positions.js # Position tracking
│   │   │   ├── Funds.js     # Fund management
│   │   │   └── Charts/      # Data visualization
│   │   └── index.js         # Dashboard entry point
│   └── package.json
└── README.md

🚀 Installation

Prerequisites

• Node.js (v16 or higher)
• npm or yarn package manager

📖 Usage

Landing Page

• Navigate through different sections using the navigation menu
• View company information, products, and pricing
• Access signup and support pages
• Responsive design works on all device sizes

Trading Dashboard

• Holdings: View current portfolio positions and P&L
• Watchlist: Monitor selected stocks
• Orders: Place and manage buy/sell orders
• Positions: Track open positions and their status
• Funds: Monitor available balance and transactions
• Charts: Visualize market data and trends

🔧 Configuration

Environment Variables

Create .env files in both frontend/ and dashboard/ directories:

REACT_APP_API_URL=http://localhost:3002
REACT_APP_ENVIRONMENT=development

API Configuration

The application expects a backend API running on port 3002. Ensure your backend service is configured accordingly.

🧪 Testing

Run tests for both applications:

# Frontend tests
cd frontend
npm test

# Dashboard tests
cd dashboard
npm test

📦 Building for Production

# Frontend build
cd frontend
npm run build

# Dashboard build
cd dashboard
npm run build

🤝 Contributing

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

Code Style Guidelines

• Use functional components with hooks
• Follow React best practices
• Maintain consistent naming conventions
• Add meaningful comments for complex logic
• Ensure responsive design principles

📄 License

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

🙏 Acknowledgments

• Built with modern React ecosystem
• Uses Material-UI for professional UI components
• Chart.js for data visualization

📞 Support

For support and questions:

• Create an issue in the GitHub repository
• Check the documentation in the codebase
• Review the component structure for implementation details

---

Note: This is a clone/demo project for educational purposes. It does not provide real trading functionality and should not be used for actual financial transactions.