🚀 MERN Portfolio with Admin Panel

A modern, full-stack portfolio application with an admin dashboard built using the MERN stack

Features • Quick Start • Documentation • Deployment • Contributing

---

✨ Features

🎨 Frontend ⚡ React 18 with Vite for blazing fast builds 🎨 Tailwind CSS for modern styling 🧩 shadcn/ui components 📱 Fully responsive design 🌙 Dark mode support	⚙️ Backend 🚀 Node.js + Express REST API 🗄️ MongoDB with Mongoose ODM 🔐 JWT authentication ☁️ Cloudinary file uploads 🛡️ Input validation & sanitization
🔧 DevOps 🐳 Docker & Docker Compose ☸️ Kubernetes ready 🔄 GitHub Actions CI/CD 📊 Health checks & monitoring 🔒 Security scanning	🛠️ Developer Tools 📝 Comprehensive documentation 🧪 Automated testing scripts 🔍 Environment validation 💾 Database backup/restore 📦 One-command setup

---

🏗️ Project Structure

mern-profile/
├── 📁 backend/              # Node.js + Express API
│   ├── controller/          # Route controllers
│   ├── models/             # Mongoose schemas
│   ├── routes/             # API routes
│   ├── middlewares/        # Custom middlewares
│   └── utils/              # Utility functions
│
├── 📁 dashboard/            # React Admin Dashboard
│   ├── src/
│   │   ├── components/     # Reusable components
│   │   ├── pages/          # Page components
│   │   └── store/          # State management
│   └── public/             # Static assets
│
├── 📁 portfolio/            # React Portfolio Frontend
│   ├── src/
│   │   ├── components/     # UI components
│   │   └── pages/          # Route pages
│   └── public/             # Assets
│
├── 📁 .github/              # GitHub Actions & Templates
│   ├── workflows/          # CI/CD pipelines
│   └── ISSUE_TEMPLATE/     # Issue templates
│
├── 📁 .devops/              # DevOps Configuration
│   ├── docker/             # Dockerfiles
│   ├── kubernetes/         # K8s manifests
│   └── nginx/              # Nginx configs
│
├── 📁 scripts/              # Automation Scripts
│   ├── setup.*             # Project setup
│   ├── build.*             # Build scripts
│   ├── deploy.*            # Deployment
│   └── test.*              # Testing
│
├── 📁 tools/                # Utility Tools
│   ├── env-validator.js    # Env validation
│   ├── health-check.js     # Health monitoring
│   ├── db-backup.js        # Database backup
│   └── db-restore.js       # Database restore
│
├── 📁 docs/                 # Documentation
│   ├── guides/             # User guides
│   ├── api/                # API reference
│   ├── deployment/         # Deploy guides
│   └── development/        # Dev docs
│
└── 📁 tests/                # Test suites
    ├── unit/               # Unit tests
    ├── integration/        # Integration tests
    └── e2e/                # End-to-end tests

---

🚀 Quick Start

Prerequisites

Tool	Version	Download
Node.js	18.x or 20.x	nodejs.org
MongoDB	6.x or 7.x	mongodb.com
npm	9.x+	Included with Node.js
Git	Latest	git-scm.com

Installation

# Clone the repository
git clone https://github.com/Mostafa-SAID7/Mern-Profile.git
cd Mern-Profile

# Install all dependencies (Windows)
.\scripts\setup.ps1

# Install all dependencies (Linux/Mac)
chmod +x scripts/setup.sh && ./scripts/setup.sh

# Generate environment configuration
node tools/generate-env.js

# Configure your .env file
# Edit backend/.env with your credentials

Development

# Terminal 1 - Backend API
cd backend && npm run dev

# Terminal 2 - Admin Dashboard
cd dashboard && npm run dev

# Terminal 3 - Portfolio Frontend
cd portfolio && npm run dev

Access the applications:

• 🌐 Portfolio: http://localhost:3000
• 🎛️ Dashboard: http://localhost:3001
• 🔌 Backend API: http://localhost:4000

---

📚 Documentation

Comprehensive documentation is available in the docs/ folder:

Document	Description
📖 Getting Started	Complete setup and installation guide
🏛️ Architecture	System design and architecture overview
🔌 API Reference	Complete API endpoint documentation
🚀 Deployment Guide	Deploy to various platforms
🐳 Docker Guide	Docker and containerization
☸️ Kubernetes Guide	Kubernetes deployment
⚙️ Environment Variables	Configuration reference
🗄️ Database Schema	MongoDB schema documentation
🤝 Contributing	Contribution guidelines
🔧 Troubleshooting	Common issues and solutions

---

🚢 Deployment

Quick Deploy Options

🐳 Docker cd .devops docker-compose up -d Docker Guide →

☸️ Kubernetes kubectl apply -f .devops/kubernetes/ K8s Guide →

▲ Vercel vercel --prod Vercel Guide →

Platform-Specific Guides

• Vercel - Deployment Guide
• Heroku - Deployment Guide
• Railway - Deployment Guide
• DigitalOcean - Deployment Guide
• AWS - Deployment Guide
• Azure - Deployment Guide

---

🧪 Testing

# Run all tests (Windows)
.\scripts\test.ps1

# Run all tests (Linux/Mac)
./scripts/test.sh

# Run specific tests
cd backend && npm test
cd dashboard && npm test
cd portfolio && npm test

---

🛠️ Built With

Core Technologies

Additional Technologies

---

🔧 Utility Tools

Tool	Description	Usage
🔍 env-validator	Validate environment variables	node tools/env-validator.js
🏥 health-check	Check service health status	node tools/health-check.js
💾 db-backup	Backup MongoDB database	node tools/db-backup.js
🔄 db-restore	Restore MongoDB database	node tools/db-restore.js
⚙️ generate-env	Generate .env template	node tools/generate-env.js

---

🤝 Contributing

We welcome contributions! Please see our Contributing Guide for details.

1. Fork the repository
2. Create your feature branch (git checkout -b feature/AmazingFeature)
3. Commit your changes (git commit -m 'Add some AmazingFeature')
4. Push to the branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

---

📝 License

This project is licensed under the MIT License - see the LICENSE file for details.

---

👨‍💻 Author

Mostafa SAID

• GitHub: @Mostafa-SAID7
• Repository: Mern-Profile

---

🌟 Show Your Support

Give a ⭐️ if this project helped you!

---

⬆ Back to Top

Made with ❤️ using the MERN Stack