📈 100 Strategies Hub - Interactive Trading Canvas

An interactive, high-performance digital canvas designed for traders to explore, learn, and master 100 professional trading strategies. This application provides a zoomable, categorized overview of various trading methodologies ranging from Price Action to complex Order Flow analysis.

TRY IT NOW :

https://aistudio.google.com/apps/drive/19kPO7s0sHIV-dn-MR9wtEAodybHT8Kx0?showAssistant=true&showPreview=true

🌟 Key Features

• Zoomable Infinite Canvas: Navigate 100 strategies using a fluid, scaleable interface with mouse wheel zoom support (Ctrl + Scroll).
• Comprehensive Database: Detailed logic for 100 strategies across 7 core disciplines:
  • Price Action & Market Structure
  • Wyckoff Theory
  • Elliott Wave Principle
  • ICT (Inner Circle Trader) / Smart Money Concepts (SMC)
  • Volume Profile & Market Profile
  • Order Flow & Tape Reading
  • Systematic & Indicator-based Strategies
• Dynamic Search & Filter: Real-time filtering by category, name, or strategy ID.
• Deep-Dive Strategy Modals: Each strategy includes:
  • Core Principle & Description
  • A+ High Probability Setup conditions
  • Precise Entry & Exit Criteria
  • Risk Management guidelines
• Visual Intelligence: Integrated Google Custom Search Engine (CSE) that automatically pulls real-world chart examples for every strategy.
• Bilingual Support: Full toggle support between English (Default) and Vietnamese.
• Interactive Glossary: A searchable knowledge base of over 50+ professional trading terms with hover-tooltips integrated directly into strategy descriptions.
• Responsive Dark Mode UI: Optimized for long-session research with a premium, low-strain aesthetic.

🛠️ Tech Stack

• Frontend: React 19 (Functional Components, Hooks)
• Styling: Tailwind CSS
• Icons: Lucide React
• Data Architecture: Static TypeScript-driven database with dynamic detail generation.
• External Integration: Google Custom Search Engine (CSE) API.
• Deployment: Optimized for static hosting (Vercel, Netlify, GitHub Pages).

📂 Project Structure

├── components/
│   ├── CanvasBoard.tsx    # The main interactive zoomable grid
│   ├── Sidebar.tsx        # Navigation and category filtering
│   ├── StrategyModal.tsx  # Detailed strategy view with CSE integration
│   └── GlossaryView.tsx   # Searchable dictionary of trading terms
├── services/
│   └── geminiService.ts   # Placeholder for future AI extensions
├── staticData.ts          # Strategy content and Glossary definitions
├── constants.ts           # Strategy list and UI color mappings
├── types.ts               # TypeScript interfaces and Enums
├── App.tsx                # Main application logic and state
├── index.tsx              # React entry point
└── index.html             # HTML entry and Import Map configuration

🚀 Getting Started

As this project uses modern ES Modules via Import Maps, it can run directly in a browser without a heavy build step, or be deployed to any static hosting service.

Local Development

1. Clone the repository:

   git clone https://github.com/your-username/100-strategies-hub.git
   cd 100-strategies-hub

2. Serve the files: You can use any static server (e.g., npx serve, Python http.server, or Live Server in VS Code).

   npx serve .

3. Open in Browser: Navigate to http://localhost:3000.

📖 Usage Guide

• Navigation: Click and drag to scroll, or use the scrollbars. Use Ctrl + Mouse Wheel to zoom in/out of the canvas.
• Filtering: Use the sidebar to focus on a specific school of trading (e.g., "Order Flow").
• Learning: Click on any strategy card to open the detailed logic. Hover over highlighted blue terms to see their definitions instantly.
• Research: In the strategy modal, the "Visual Examples" section will automatically load chart patterns related to that specific strategy.

🤝 Contributing

Contributions are welcome! If you have suggestions for new strategies or improvements to the descriptions:

1. Fork the Project.
2. Create your Feature Branch (git checkout -b feature/AmazingFeature).
3. Commit your Changes (git commit -m 'Add some AmazingFeature').
4. Push to the Branch (git push origin feature/AmazingFeature).
5. Open a Pull Request.

📝 License

Distributed under Apache License 2.0. See LICENSE for more information.

---

Disclaimer: Trading involves significant risk. This application is for educational purposes only and does not constitute financial advice.

Developed with ❤️ for the trading community. Powered by fcalgobot.com.