DEV Community: Mark EL-asfar

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

Mark EL-asfar — Mon, 25 May 2026 00:34:06 +0000

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

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

Owner Mode - Talks in second person: "You are a developer with..."
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

📊 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?

Sign up and create your profile
Add your skills, experience, and projects
Enable the AI Bot in settings
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

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

Mark EL-asfar — Mon, 25 May 2026 00:19:59 +0000

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

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

Owner Mode - Talks in second person: "You are a developer with..."
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

📊 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?

Sign up and create your profile
Add your skills, experience, and projects
Enable the AI Bot in settings
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

Passport MGZon

Mark EL-asfar — Sat, 23 Aug 2025 15:04:29 +0000

**Passport strategy for MGZon OAuth 2.0 authentication with icon support. is an OAuth 2.0 strategy for use with the Passport library, allowing authentication with MGZon.

This project simplifies the process of integrating MGZon authentication into your application using OAuth 2.0, enabling developers to authenticate users via their MGZon accounts.**

More Information

Check out the Gist for a quick start guide.

Passport-MGZon is an OAuth 2.0 strategy for use with the Passport library, allowing authentication with MGZon.

This project simplifies the process of integrating MGZon authentication into your application using OAuth 2.0, enabling developers to authenticate users via their MGZon accounts.

Demo Icon
MGZon Logo

How to Usage

Authentication

const passport = require('passport');
const MGZonStrategy = require('passport-mgzon');

passport.use(new MGZonStrategy({
  clientID: process.env.MGZON_CLIENT_ID,
  clientSecret: process.env.MGZON_CLIENT_SECRET,
  callbackURL: 'http://your-app/auth/mgz/callback',
  scope: ['profile:read', 'profile:write']
}, async (accessToken, refreshToken, profile, done) => {
  // Your user handling logic here
  return done(null, profile);
}));

**_

Routes _**

app.get('/auth/mgz', passport.authenticate('mgzon'));

app.get('/auth/mgz/callback', passport.authenticate('mgzon', { session: false }), (req, res) => {
  res.redirect('/profile');
});

How to Use MGZon Icon

This package includes the MGZon icon font. To use it:

Include the CSS:

Include the CSS: Add the following line to your HTML or import it in your CSS/JS: html

   <link rel="stylesheet" href="/icons/css/style.css">
   <link rel="stylesheet" href="node_modules/passport-mgzon/icons/css/style.css">

Use the Icon: Use the MGZon icon in your HTML:

<i class="icon-mgzon"></i> Sign in with MGZon

How to Installation

Install required packages:

npm install passport-mgzon