EngPath — Open Source Engineering Learning Pathway

Build your engineering career through structured roadmaps, interactive architecture diagrams, and real-world project templates.

Learn the path. Understand the system. Build the project.

🚀 Overview

EngPath is an open-source platform designed to help developers navigate engineering careers through visual learning experiences.

Instead of presenting endless articles and disconnected tutorials, EngPath organizes knowledge into interactive pathways that show:

• What to learn
• Why it matters
• How technologies connect
• Where to practice with real projects

Everything is community-driven, GitHub-powered, and accessible without registration.

---

✨ Key Features

🌍 Interactive World Map

The heart of EngPath.

Explore engineering domains through an interactive world map built with React Flow.

Each domain becomes its own island:

• Backend Engineering
• Frontend Engineering
• DevOps
• Mobile Development
• Cyber Security
• Data Engineering
• Database Administration
• Quality Assurance
• Business Analysis

Users can visually discover learning paths instead of navigating traditional menus.

---

🛣️ Learning Roadmaps

Every domain contains a structured roadmap with:

• Beginner → Advanced progression
• Learning phases
• Dependency relationships
• Progress states

Node statuses:

• ✅ Completed
• 📖 Learning
• 🔒 Locked

---

📚 Node Detail Pages

Every learning topic includes:

• Reading time estimation
• Difficulty level
• Technology tags
• MDX-based content
• Related GitHub repositories
• Recommended templates

No additional navigation required.

---

🏗️ Architecture Visualization

Interactive architecture diagrams built using React Flow.

Users can:

• Explore system designs
• Click components for explanations
• Understand technology relationships
• Learn real-world engineering patterns

No backend required.

---

📦 Template Repository

A curated collection of open-source project templates.

Features:

• Language filtering
• Difficulty filtering
• GitHub integration
• Repository links
• Live GitHub star count

Examples:

• Go API Boilerplates
• Next.js Starter Kits
• DevOps Infrastructure Templates
• Microservice Examples

---

🖥️ Platform Structure

1. Landing Page

Minimal and focused.

Contains:

• Clear positioning statement
• Open Source badge
• Roadmap CTA
• GitHub CTA
• Statistics bar

Statistics include:

• Total Roadmap Nodes
• Templates
• Architecture Diagrams

---

2. World Map

Interactive domain exploration experience.

Users select a domain by navigating visual islands rather than traditional lists.

---

3. Roadmap Detail

Three perspectives in a single view:

• Learning Path
• Architecture Diagram
• Related Templates

---

4. Node Detail

Detailed learning content powered by MDX.

---

5. Architecture Visualization

Interactive system architecture explorer.

---

6. Template Repository

Open-source project discovery hub.

---

🎨 Design Principles

No Login Required

Full access without friction.

Users can immediately start learning.

---

Open Source First

All content lives inside GitHub.

Contributions happen through Pull Requests.

---

MDX-Powered Content

Roadmaps and learning materials are stored as MDX files, making contributions simple and scalable.

---

Consistent Language Identity

Each language has a dedicated visual identity:

Language	Color
Python	Blue
Go	Green
TypeScript	Purple

The same color system is used across roadmaps, diagrams, and templates.

---

Mobile Friendly

Designed from the beginning for mobile users who learn during commutes, breaks, or while away from their workstation.

---

🛠️ Tech Stack

• Next.js 15
• React 19
• TypeScript
• React Flow
• Tailwind CSS
• MDX
• GitHub API
• Static Export

---

📂 Project Structure

src/
├── app/
├── components/
├── content/
│   ├── roadmap/
│   ├── architecture/
│   └── templates/
├── config/
├── hooks/
├── lib/
├── types/
└── public/

---

🚀 Getting Started

Clone Repository

git clone https://github.com/your-username/engpath.git

Install Dependencies

npm install

Start Development Server

npm run dev

Open:

http://localhost:3000

---

🤝 Contributing

We welcome contributions from the community.

You can contribute by:

• Adding roadmap nodes
• Improving learning content
• Creating architecture diagrams
• Sharing open-source templates
• Fixing bugs
• Improving UI/UX

Please read:

docs/CONTRIBUTING.md

before creating a Pull Request.

---

🎯 Vision

Most learning platforms tell developers what technologies exist.

EngPath focuses on something more important:

Showing the path between where you are and where you want to be.

By combining:

• Roadmaps
• Architecture Thinking
• Real Project Templates

EngPath helps developers understand not only what to learn, but how modern engineering systems are built.

---

📜 License

Licensed under the MIT License.

Feel free to use, modify, and distribute this project.

---

⭐ Support

If you find EngPath useful:

• Star the repository
• Share it with other developers
• Contribute new content
• Open issues and discussions

Together we can build the open-source learning platform we wish existed when we started.