MERN Portfolio & Admin Dashboard

A full-stack portfolio application built with the MERN stack, featuring a public website and a protected admin dashboard for content management.

Overview

This project includes:

• A responsive public homepage with dynamic bio and projects
• A contact form that stores messages in MongoDB
• A JWT-protected admin dashboard for managing projects, inbox messages, and profile settings

Tech Stack

Frontend

• React (Vite)
• React Router
• Tailwind CSS
• Axios

Backend

• Node.js
• Express.js
• MongoDB (Mongoose)
• JWT authentication
• bcrypt password hashing

Features

Public Site

• Dynamic About Me section (loaded from API)
• Dynamic Projects grid (loaded from API)
• Contact form (name, email, message) persisted to MongoDB

Admin Dashboard (Protected)

• Admin login/logout with JWT
• Project management: add, list, edit, delete
• Inbox view for contact form submissions
• Admin settings:
  • Update username, email, profile image
  • Update portfolio bio
  • Change password
  • Reset password

Project Structure

project-admin/
├─ frontend/    # React client
└─ backend/     # Express API

Quick Start

1) Backend Setup

cd backend
cp .env.example .env
npm install
npm run dev

Set values in backend/.env:

• MONGO_URI
• JWT_SECRET
• Optional: ADMIN_USERNAME, ADMIN_EMAIL, ADMIN_PASSWORD, ADMIN_PROFILE_IMAGE

2) Frontend Setup

cd frontend
cp .env.example .env
npm install
npm run dev

Set value in frontend/.env:

• VITE_API_URL (default: http://localhost:5000/api)

Runtime URLs

• Frontend: http://localhost:5173
• Backend API: http://localhost:5000
• Health check: GET /api/health

Authentication Flow

1. Admin logs in via POST /api/admin/login
2. Backend signs JWT using JWT_SECRET
3. Frontend stores token and sends Authorization: Bearer <token>
4. Protected admin routes validate token in middleware

API Summary

Public

• GET /api/public/bio
• GET /api/public/projects
• POST /api/public/messages

Admin (JWT required except login)

• POST /api/admin/login
• GET /api/admin/me
• PUT /api/admin/profile
• PUT /api/admin/bio
• PUT /api/admin/password
• PUT /api/admin/password/reset
• GET /api/admin/projects
• POST /api/admin/projects
• PUT /api/admin/projects/:id
• DELETE /api/admin/projects/:id
• GET /api/admin/messages

Notes

• The backend auto-creates a default admin if the configured admin email does not already exist.
• For production, use a strong JWT_SECRET, strong admin password, and restricted MongoDB network access.