DEV Community

Mark EL-asfar
Mark EL-asfar

Posted on

Building MGZon: Developer Portfolio + AI Bot + Social Network (9 min demo)

#mgzon #ai #javascript #webdev

After 3 months of solo development, 15,000+ lines of code, and countless iterations, I'm excited to share MGZon - a developer portfolio platform where every profile has its own AI bot.

📌 What makes MGZon different?

Feature LinkedIn GitHub MGZon
Profile-specific AI Bot ❌ ❌ ✅
Visitors can ask the AI ❌ ❌ ✅
AI answers from real profile data ❌ ❌ ✅
Voice Input (ask by speaking) ❌ ❌ ✅
Text-to-Speech (bot reads aloud) ❌ ❌ ✅
Drag & drop section reordering ❌ ❌ ✅
Save/Load multiple layouts ❌ ❌ ✅
Full Arabic & English support ❌ ❌ ✅

🤖 The AI Bot Has 3 Modes

  1. Visitor Mode - Talks in first person: "I am a developer with 5 years experience"

AI Bot responding to a visitor asking about profile owner's skills

  1. Owner Mode - Talks in second person: "You are a developer with..."
  2. Command Mode - Natural language commands: "Add skill GraphQL 75%"

⚡ Key Features

AI Bot Capabilities:

  • Answers questions about you in 5 languages (Arabic, English, French, German, Spanish)
  • Analyzes strengths & weaknesses
  • Suggests improvements
  • Natural language commands (add/update/delete skills)

Social Features:

  • Posts, comments, likes, shares, follows
  • Job board with applications
  • Real-time messaging
  • Notifications
  • Stories (24-hour)

Developer Features:

  • Smart Resume Import (upload PDF → auto-fill everything)
  • GitHub Integration (import repos with README, commits, contributors)
  • Voice Input & Text-to-Speech
  • Drag & Drop layout customization
  • Save/Load multiple layouts
  • Customizable themes & dark mode

🛠️ Tech Stack 

Backend:  Node.js + Express + MongoDB + Socket.IO
Frontend: HTML5 + TailwindCSS + Vanilla JS
AI:       HuggingFace Inference API (DeepSeek R1, Qwen 2.5)
Storage:  Cloudinary
Deployment: HuggingFace Spaces + Firebase
Enter fullscreen mode Exit fullscreen mode

📊 Project Statistics

  • 🕒 3 months of development
  • 📝 15,000+ lines of code
  • 📁 20+ MongoDB models
  • 🔗 50+ API endpoints
  • 🤖 3 AI behavior modes

🎥 Watch the Demo

9-minute full walkthrough: https://youtu.be/pumWUF9GNVs

🔗 Live Demo

Try it yourself: https://mark-elasfar.web.app/root

Sample Profiles:

💡 Want to Participate?

  1. Sign up and create your profile
  2. Add your skills, experience, and projects
  3. Enable the AI Bot in settings
  4. Share your profile link with "Ask my AI bot about me"

I built this ALONE. Every line of code, every feature, every bug fix.

Now I'm sharing it with you.

I'd love to hear your feedback, criticism, and suggestions!

Try it out: https://mark-elasfar.web.app/root

MGZon #AI #FullStack #NodeJS #MongoDB #WebDevelopment

Top comments (0)