Copyright (c) 2026 Genesis G. Diaz
All Rights Reserved.
This repository and its original source code, documentation, design, and project materials are the intellectual property of Genesis G. Diaz, unless otherwise stated.
Permission is not granted to copy, modify, distribute, publish, sublicense, sell, or commercially use this project or substantial portions of its original source code without prior written permission from the copyright holder.
The repository may be viewed for educational, evaluation, research, and portfolio purposes.
Third-party dependencies, frameworks, libraries, services, images, icons, and other external materials are governed by their respective licenses and remain the property of their respective owners.
For permission requests or other licensing inquiries, please contact the author through the GitHub profile associated with this repository.
Learn the Market. Follow the Roadmap. Build Your Trading Knowledge.
A personalized learning platform helping aspiring traders in the Philippines navigate PSE, Forex, and Crypto through interactive roadmaps, curated resources, and AI-powered recommendations.
🇵🇭 PSE • 💱 Forex • ₿ Crypto
TradeMap is an original software project designed and developed by Genesis G. Diaz.
| Role | Details |
|---|---|
| Author / Developer | Genesis G. Diaz |
| GitHub | @Gen144-D |
| Repository | Gen144-D/Roadmap |
| Project | TradeMap — AI-Powered Trading Education Platform |
| Year | 2026 |
© 2026 Genesis G. Diaz. All rights reserved.
This repository contains original project code, documentation, design, and implementation created for TradeMap. Unauthorized reproduction, redistribution, or commercial use of the project's original materials is not permitted without prior written permission from the author.
Note: Third-party libraries, frameworks, services, assets, and other materials remain subject to their respective licenses and copyrights.
Learning to trade can be overwhelming.
Beginners often encounter thousands of disconnected videos, articles, indicators, strategies, and opinions without knowing what to learn first or what to learn next.
TradeMap solves this by turning trading education into a structured journey.
🗺️ TRADEMAP
│
▼
┌───────────────┐
│ ONBOARDING │
│ QUIZ │
└───────┬───────┘
│
▼
┌───────────────┐
│ LEARNER │
│ PROFILE │
└───────┬───────┘
│
▼
┌──────────────────────┐
│ PERSONALIZED PATH │
└──────────┬───────────┘
│
┌──────────┼──────────┐
▼ ▼ ▼
🇵🇭 PSE 💱 Forex ₿ Crypto
│ │ │
└──────────┼──────────┘
▼
📚 LEARN & PRACTICE
│
▼
📊 TRACK PROGRESS
│
▼
🤖 AI RECOMMENDS
│
└──────────────► NEXT STEP
TradeMap transforms scattered trading information into a guided learning experience.
| 🗺️ | 🤖 | 📈 |
|---|---|---|
| Interactive Roadmaps | AI Recommendations | Progress Tracking |
| Visual learning paths | Personalized next steps | Modules & streaks |
| 📚 | 👤 | 📱 |
|---|---|---|
| Resource Library | Learning Dashboard | Responsive UI |
| Curated educational content | Stats & progress | Desktop & mobile |
TradeMap uses interactive node-based roadmaps to visualize the journey from beginner to advanced concepts.
🇵🇭 Philippine Stocks
Learn the fundamentals of the Philippine Stock Exchange and stock-market concepts.
💱 Forex
Build knowledge around currency markets, technical analysis, risk management, and trading concepts.
₿ Cryptocurrency
Explore crypto-market fundamentals, trading concepts, risk, and digital-asset terminology.
BEGINNER
│
├── Trading Fundamentals
│
├── Market Structure
│
├── Technical Analysis
│
├── Risk Management
│
├── Strategy Development
│
└── Advanced Concepts
│
▼
NEXT LEVEL
TradeMap uses AI-assisted recommendations to help learners determine what to study next.
QUIZ
│
▼
LEARNER PROFILE
│
▼
PROGRESS
│
▼
┌───────────────┐
│ AI ANALYSIS │
│ │
│ • Knowledge │
│ • Progress │
│ • Interests │
│ • Goals │
└───────┬───────┘
│
▼
PERSONALIZED
RECOMMENDATION
│
▼
NEXT MODULE
Example:
🤖 AI Recommendation "You've completed technical-analysis fundamentals. Your next recommended topic is Risk Management."
The goal is not simply to provide content, but to help learners understand what comes next in their journey.
TradeMap keeps the learning journey measurable.
YOUR PROGRESS
████████████████░░░░ 80%
16 / 20 Modules Completed
🔥 7 Day Streak
┌─────────────────────────────┐
│ NEXT │
│ │
│ Risk Management │
│ ███████████████░░░░ 75% │
│ │
│ [ Continue Learning → ] │
└─────────────────────────────┘
Users can track:
- Module completion
- Overall roadmap progress
- Learning streaks
- Current learning path
- Recommended modules
- Learning statistics
Learning doesn't stop at the roadmap.
TradeMap organizes useful educational resources into a central library.
🎥 Videos
📖 Articles
🎓 Courses
🛠️ Trading Tools
📊 Educational Guides
🔗 External Resources
Resources can be discovered through:
- Categories
- Search
- Learning modules
- Roadmap nodes
- Personalized recommendations
The dashboard brings the entire learning journey together.
┌─────────────────────────────────────────────┐
│ TRADEMAP │
├─────────────────────────────────────────────┤
│ │
│ 👋 Welcome Back │
│ │
│ ┌────────────┐ ┌────────────┐ │
│ │ Progress │ │ 🔥 Streak │ │
│ │ 80% │ │ 7 Days │ │
│ └────────────┘ └────────────┘ │
│ │
│ CONTINUE LEARNING │
│ ┌───────────────────────────────────────┐ │
│ │ Risk Management │ │
│ │ ███████████████░░░░░ 75% │ │
│ └───────────────────────────────────────┘ │
│ │
│ 🤖 AI RECOMMENDATION │
│ ┌───────────────────────────────────────┐ │
│ │ Continue with Risk Management next. │ │
│ └───────────────────────────────────────┘ │
│ │
└─────────────────────────────────────────────┘
TradeMap is built around a continuous learning cycle:
DISCOVER
│
▼
LEARN
│
▼
PRACTICE
│
▼
TEST
│
▼
REVIEW
│
▼
ADVANCE
│
└───────────────┐
│
▼
DISCOVER
This allows the platform to continuously guide learners toward their next step.
┌────────────────────────┐
│ TRADEMAP │
│ │
│ Next.js Application │
└───────────┬────────────┘
│
┌───────────────────┼───────────────────┐
│ │ │
▼ ▼ ▼
┌────────────┐ ┌────────────┐ ┌────────────┐
│ Roadmaps │ │ Dashboard │ │ Resources │
│ ReactFlow │ │ Progress │ │ Library │
└─────┬──────┘ └─────┬──────┘ └─────┬──────┘
│ │ │
└───────────────────┼───────────────────┘
│
▼
┌─────────────────┐
│ Firebase Layer │
├─────────────────┤
│ Authentication │
│ Firestore │
│ Storage │
└────────┬────────┘
│
▼
┌─────────────────┐
│ AI Recommendation│
│ Engine │
└─────────────────┘
| Technology | Purpose |
|---|---|
| Next.js 14 | React framework & App Router |
| TypeScript | Type-safe development |
| Tailwind CSS | Styling & responsive UI |
| ReactFlow | Interactive roadmap visualization |
| Framer Motion | UI animations |
| Lucide React | Interface icons |
| Technology | Purpose |
|---|---|
| Firebase Auth | Google & Email authentication |
| Firestore | User profiles & progress |
| Firebase Storage | Resource/media storage |
| Firebase Hosting | Application deployment |
TradeMap/
│
├── src/
│ ├── app/
│ │ ├── page.tsx
│ │ ├── dashboard/
│ │ ├── roadmap/
│ │ ├── resources/
│ │ ├── onboarding/
│ │ └── auth/
│ │
│ ├── components/
│ │ ├── roadmap/
│ │ ├── dashboard/
│ │ ├── resources/
│ │ ├── navigation/
│ │ └── 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
- Node.js 18+
- npm
- Firebase project
git clone https://github.com/Gen144-D/Roadmap.git
cd trademap
npm installCreate your local environment file:
cp .env.local.example .env.localConfigure your Firebase credentials:
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🔐 Keep production secrets and private credentials out of version control.
npm run devOpen:
http://localhost:3000
- Landing page
- Hero section
- Features section
- Roadmap preview
- Navigation
- Authentication context
- Firebase configuration
- TypeScript types
- Onboarding quiz
- Sample roadmap structure
- Resource structure
- Interactive ReactFlow roadmap
- Module completion
- Firestore progress tracking
- Learning streaks
- Resource library
- Search & filtering
- User dashboard
- AI recommendation engine
- Personalized learning paths
- Knowledge-gap detection
- Learning analytics
- Complete PSE roadmap
- Forex roadmap
- Crypto roadmap
- Admin content management
- Advanced resources
- Flutter mobile application
TRADEMAP
│
▼
┌─────────────────┐
│ FOUNDATION │
│ ✓ │
└────────┬────────┘
│
▼
┌─────────────────┐
│ LEARNING ENGINE │
│ ◐ │
└────────┬────────┘
│
▼
┌─────────────────┐
│ AI PERSONALIZED │
│ ○ │
└────────┬────────┘
│
▼
┌─────────────────┐
│ EXPANSION │
│ ○ │
└─────────────────┘
TradeMap combines fintech aesthetics with modern educational UX.
Users should always understand where they are and where they should go next.
Complex trading concepts are broken into manageable learning modules.
AI recommendations adapt the learning experience to the individual learner.
Progress and knowledge paths should be understandable at a glance.
Roadmaps and learning modules should feel engaging rather than static.
The experience should work across desktop, tablet, and mobile screens.
TradeMap is designed for:
┌───────────────────┐
│ DESKTOP │
│ │
│ TRADEMAP │
│ │
└───────────────────┘
↓
┌───────────────┐
│ TABLET │
│ │
│ TRADEMAP │
│ │
└───────────────┘
↓
┌─────────┐
│ MOBILE │
│ │
│TRADEMAP │
│ │
└─────────┘
TradeMap is designed to evolve into a broader trading education ecosystem.
Potential future capabilities include:
- 🤖 AI Trading Tutor
- 📊 Interactive trading simulations
- 📝 Knowledge assessments
- 🏆 Achievements & badges
- 🔥 Advanced streak system
- 🎮 Gamified learning
- 📱 Flutter mobile application
- 🧪 Paper-trading practice
- 🇵🇭 Philippine-market focused content
- 🧠 AI-generated practice scenarios
The long-term vision is to create a complete, personalized learning ecosystem for aspiring traders.
TradeMap is an educational platform and is not a financial advisory service.
All content and AI-generated recommendations are intended for educational and informational purposes only.
Trading stocks, forex, and cryptocurrency involves financial risk. Users should conduct their own research and consult appropriately qualified financial professionals before making investment decisions.
Contributions and suggestions are welcome.
git checkout -b feature/your-feature
git add .
git commit -m "feat: add your feature"
git push origin feature/your-featureThen open a Pull Request.