Portfolio Professional Full stack in NEXTJS15 and Flutter

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

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

Live Demo

️ Live Screenshots

Click images to preview full size

Mobile View

⚠️ Important Notice About the Mobile App

This mobile app is not built with native Flutter UI components.

Instead, it uses the webview_flutter plugin to load the web version of the Irfan Portfolio project inside a basic Flutter shell.

This means:

• It simply opens the website in a mobile WebView container

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