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

Portfolio Professional Full stack in NEXTJS15 and Flutter - 1

Portfolio Professional Full stack in NEXTJS15 and Flutter - 2

Portfolio Professional Full stack in NEXTJS15 and Flutter - 3

Mobile View

Portfolio Professional Full stack in NEXTJS15 and Flutter - 4

Portfolio Professional Full stack in NEXTJS15 and Flutter - 5

Portfolio Professional Full stack in NEXTJS15 and Flutter - 6

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

Portfolio Professional Full stack in NEXTJS15 and Flutter