🗺️ TradeMap

AI-Powered Trading Education Platform

Learn. Navigate. Practice. Trade Smarter.

A structured learning platform for aspiring traders in the Philippines.

Stocks 🇵🇭 • Forex 💱 • Crypto ₿

💡 What is TradeMap?

TradeMap is an AI-powered trading education platform designed to help aspiring traders learn through structured, visual, and personalized learning paths.

Instead of overwhelming beginners with scattered tutorials and information, TradeMap transforms trading education into an interactive roadmap.

                 ┌─────────────────┐
                 │   START HERE    │
                 └────────┬────────┘
                          │
                          ▼
                 ┌─────────────────┐
                 │ Trading Basics  │
                 └────────┬────────┘
                          │
              ┌───────────┼───────────┐
              ▼           ▼           ▼
           🇵🇭 PSE       💱 Forex     ₿ Crypto
              │           │           │
              └───────────┼───────────┘
                          ▼
                 ┌─────────────────┐
                 │ Practice & Test │
                 └────────┬────────┘
                          │
                          ▼
                 ┌─────────────────┐
                 │   Keep Growing  │
                 └─────────────────┘

The goal is simple:

Turn trading education into a journey users can actually follow.

✨ Features

🗺️ Interactive Trading Roadmaps

Explore structured learning paths for different markets.

🇵🇭 Philippine Stocks (PSE)
💱 Forex
₿ Cryptocurrency
Visual node-based learning paths
Beginner → Intermediate → Advanced progression
Module completion tracking
Interactive roadmap navigation

Powered by ReactFlow.

🤖 AI-Powered Learning Recommendations

TradeMap uses onboarding information and learning progress to provide personalized recommendations.

The system can help answer:

"What should I learn next?"
        ↓
Analyze Progress
        ↓
Evaluate Learning Path
        ↓
Identify Knowledge Gaps
        ↓
Generate Recommendation
        ↓
Recommended Next Module

Instead of giving every learner the same curriculum, TradeMap aims to provide a more personalized learning experience.

📈 Progress Tracking

Track your learning journey through:

Completed modules
Learning progress
Current roadmap position
Learning streaks
Recommended next steps
Overall learning statistics

Example

PSE Trading Roadmap

████████████░░░░░░░░  60%

Completed: 12 / 20 Modules

🔥 7 Day Learning Streak

Next:
└── Risk Management

📚 Resource Library

A curated collection of learning materials organized around the user's trading journey.

Resources can include:

🎥 Videos
📖 Articles
🎓 Courses
🛠️ Trading tools
📊 Educational references
🔗 External resources

👤 Personalized Dashboard

The dashboard gives users a central view of their learning activity.

┌──────────────────────────────────────────┐
│                DASHBOARD                 │
├──────────────────────────────────────────┤
│                                          │
│  👋 Welcome Back!                        │
│                                          │
│  Progress             🔥 Streak          │
│     60%                 7 Days           │
│                                          │
│  ──────────────────────────────────────  │
│                                          │
│  Continue Learning                       │
│  ┌────────────────────────────────────┐  │
│  │ Risk Management                    │  │
│  │ ███████████████░░░░░  75%          │  │
│  └────────────────────────────────────┘  │
│                                          │
│  🤖 AI Recommendation                    │
│  "Continue with Risk Management next."  │
│                                          │
└──────────────────────────────────────────┘

🎯 Learning Experience

TradeMap is built around a simple learning cycle:

       DISCOVER
          │
          ▼
       LEARN
          │
          ▼
       PRACTICE
          │
          ▼
        TEST
          │
          ▼
       REVIEW
          │
          ▼
       ADVANCE
          │
          └──────────────► LEARN

This creates a continuous learning loop instead of a static collection of courses.

🧠 AI Learning Flow

┌───────────────────┐
│   Onboarding Quiz │
└─────────┬─────────┘
          │
          ▼
┌───────────────────┐
│ Learner Profile   │
└─────────┬─────────┘
          │
          ▼
┌───────────────────┐
│ Progress Tracking │
└─────────┬─────────┘
          │
          ▼
┌───────────────────┐
│ AI Recommendation │
└─────────┬─────────┘
          │
          ▼
┌───────────────────┐
│ Recommended Path  │
└─────────┬─────────┘
          │
          ▼
┌───────────────────┐
│ Learning Module   │
└───────────────────┘

🛠️ Tech Stack

Frontend

Technology	Purpose
Next.js 14	React framework & application routing
TypeScript	Type-safe development
Tailwind CSS	UI styling
ReactFlow	Interactive roadmap visualization
Framer Motion	UI animations
Lucide React	Interface icons

Backend & Infrastructure

Technology	Purpose
Firebase Authentication	User authentication
Firestore	User data & progress
Firebase Storage	Resource/media storage
Firebase Hosting	Application hosting

🏗️ Architecture

                         ┌────────────────────┐
                         │      TRADEMAP      │
                         └─────────┬──────────┘
                                   │
                                   ▼
                    ┌──────────────────────────┐
                    │       Next.js App        │
                    │                          │
                    │  Pages • Components      │
                    │  Roadmaps • Dashboard    │
                    └────────────┬─────────────┘
                                 │
                  ┌──────────────┼──────────────┐
                  │              │              │
                  ▼              ▼              ▼
            ┌──────────┐   ┌──────────┐   ┌──────────────┐
            │ Firebase │   │ Firestore│   │ AI Engine    │
            │   Auth   │   │ Database │   │              │
            └──────────┘   └──────────┘   └──────────────┘
                  │              │              │
                  └──────────────┼──────────────┘
                                 ▼
                       ┌────────────────────┐
                       │ Personalized      │
                       │ Learning Journey   │
                       └────────────────────┘

📁 Project Structure

trademap/
│
├── src/
│   ├── app/
│   │   ├── page.tsx
│   │   ├── dashboard/
│   │   ├── roadmap/
│   │   ├── resources/
│   │   ├── auth/
│   │   └── onboarding/
│   │
│   ├── components/
│   │   ├── roadmap/
│   │   ├── dashboard/
│   │   ├── navigation/
│   │   ├── auth/
│   │   └── ui/
│   │
│   ├── context/
│   │   └── AuthContext.tsx
│   │
│   ├── lib/
│   │   ├── firebase.ts
│   │   ├── roadmap-data.ts
│   │   └── utils.ts
│   │
│   └── types/
│       └── index.ts
│
├── public/
│   ├── images/
│   └── icons/
│
├── .env.local.example
├── next.config.js
├── tailwind.config.ts
├── tsconfig.json
└── package.json

🚦 Getting Started

Prerequisites

Make sure you have:

Node.js 18+
npm
A Firebase project

Installation

Clone the repository:

git clone https://github.com/YOUR_USERNAME/trademap.git

cd trademap

Install dependencies:

npm install

Environment Variables

Create your local environment file:

cp .env.local.example .env.local

Add your Firebase configuration:

NEXT_PUBLIC_FIREBASE_API_KEY=your_api_key
NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN=your_auth_domain
NEXT_PUBLIC_FIREBASE_PROJECT_ID=your_project_id
NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET=your_storage_bucket
NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID=your_sender_id
NEXT_PUBLIC_FIREBASE_APP_ID=your_app_id

⚠️ Never commit sensitive credentials, private keys, or production secrets to GitHub.

Run Development Server

npm run dev

Then open:

http://localhost:3000

📋 Development Status

🟢 Phase 1 — Foundation

🟡 Phase 2 — Core Learning System

🔵 Phase 3 — Personalization

🟣 Phase 4 — Expansion

🗺️ Roadmap

PHASE 1
Foundation
   │
   ├── Landing Page       ✓
   ├── Authentication     ✓
   ├── Firebase           ✓
   └── Onboarding         ✓
          │
          ▼
PHASE 2
Learning Engine
   │
   ├── Roadmaps
   ├── Progress
   ├── Resources
   └── Dashboard
          │
          ▼
PHASE 3
AI Personalization
   │
   ├── Recommendations
   ├── Learning Profile
   └── Adaptive Paths
          │
          ▼
PHASE 4
Platform Expansion
   │
   ├── Forex
   ├── Crypto
   ├── Admin
   └── Mobile

🎨 Design Philosophy

TradeMap aims for a modern fintech + education visual identity.

Design Principles

Clear

Learning content should be easy to understand.

Visual

Roadmaps should communicate progression at a glance.

Focused

Users should always know what to learn next.

Interactive

Learning should feel like progressing through a journey.

Personalized

The platform should adapt to the learner instead of forcing everyone through the same path.

📱 Responsive Design

TradeMap is designed to work across:

       ┌───────────────┐
       │    Desktop    │
       │               │
       │   TradeMap    │
       │               │
       └───────────────┘

              ↓

       ┌─────────────┐
       │    Tablet   │
       │             │
       │  TradeMap   │
       │             │
       └─────────────┘

              ↓

        ┌─────────┐
        │  Mobile │
        │         │
        │ TradeMap│
        │         │
        └─────────┘

🚀 Deployment

Build

npm run build

Start Production Server

npm run start

TradeMap can be deployed using Firebase Hosting or another platform that supports Next.js applications.

🔮 Future Vision

TradeMap is designed to grow beyond a simple roadmap application.

Future possibilities include:

🧠 AI Trading Tutor
📊 Interactive trading simulations
📝 Trading knowledge assessments
🏆 Learning achievements
🔥 Streak rewards
🧩 Gamified learning
📱 Flutter mobile application
📈 Paper-trading integration
🇵🇭 Philippine-market focused education
🤖 AI-generated practice scenarios

The long-term goal is to create a complete learning ecosystem for aspiring traders.

⚠️ Disclaimer

TradeMap is an educational platform and is not a financial advisory service.

The information provided by the platform is intended for educational and informational purposes only.

Trading stocks, forex, and cryptocurrency involves significant financial risk. Users should conduct their own research and seek advice from qualified financial professionals before making investment decisions.

🤝 Contributing

Contributions, suggestions, and improvements are welcome.

git checkout -b feature/your-feature

git add .

git commit -m "feat: add your feature"

git push origin feature/your-feature

Then open a Pull Request.

🗺️ Learn Your Market. Follow Your Path.

TradeMap — Your Roadmap to Smarter Trading.

Name		Name	Last commit message	Last commit date
public		public
src		src
.gitignore		.gitignore
DEVELOPER_GUIDE.md		DEVELOPER_GUIDE.md
DEV_SERVER_GUIDE.md		DEV_SERVER_GUIDE.md
DOCUMENTATION_INDEX.md		DOCUMENTATION_INDEX.md
EXECUTIVE_SUMMARY.md		EXECUTIVE_SUMMARY.md
FILES_CREATED.md		FILES_CREATED.md
IMPLEMENTATION_STATUS.md		IMPLEMENTATION_STATUS.md
MVP_PHASE2_SUMMARY.md		MVP_PHASE2_SUMMARY.md
NEXT_DEVELOPER_GUIDE.md		NEXT_DEVELOPER_GUIDE.md
PHASE2_ROADMAP_COMPLETE.md		PHASE2_ROADMAP_COMPLETE.md
PROJECT_COMPLETE_SUMMARY.md		PROJECT_COMPLETE_SUMMARY.md
QUICK_START_ROADMAPS.md		QUICK_START_ROADMAPS.md
README.md		README.md
ROADMAP_ISSUES_FIXED.md		ROADMAP_ISSUES_FIXED.md
eslint.config.mjs		eslint.config.mjs
next.config.ts		next.config.ts
package-lock.json		package-lock.json
package.json		package.json
postcss.config.mjs		postcss.config.mjs
tsconfig.json		tsconfig.json

Latest commit

History

Folders and files

Repository files navigation