Irfan Portfolio – Next.js + MongoDB Full Stack Web + Mobile

Complete documentation for the Irfan Portfolio project built using Next.js and MongoDB and Flutter

Live Demo

Web Users Admin Panel

️ Live Screenshots

Click images to preview full size

Mobile View

Project Overview

This is a portfolio website built using Next.js and MongoDB. It includes a full-featured admin panel to manage content dynamically, including sections like About, Skills, Projects, and more.

️ Tech Stack

• Frontend: Next.js 15.1.6, React 19.0.0, TailwindCSS, Shadcn UI / Radix UI, Framer Motion, Dark/Light Theme (next-themes)
• Backend: MongoDB + Mongoose, JWT Authentication, bcryptjs for password hashing, Next.js API Routes

️ Project Structure

• /app: App Router pages
• /components: Shared React components
• /contexts: React Contexts
• /data: Static site data
• /hooks: Custom hooks
• /lib: Utility logic
• /models: Mongoose models
• /public: Static assets
• /types: TypeScript types

Security

• JWT token-based access control
• Hashed passwords with bcrypt
• Protected routes for admin-only actions

Admin Panel

• Admin authentication with JWT
• Dashboard with summary
• Add/Edit/Delete functionality for all sections
• Theme & Profile management