Task Gallery

Task Gallery is a complete MERN stack task management web application with authentication, email verification, password recovery, protected task APIs, and a polished productivity cockpit interface. It is designed as an assignment-ready full-stack project, not a generic todo list.

Features

• User registration with email verification code
• Login only after email verification
• JWT-based protected routes
• Logout from the client and API
• Forgot password and reset password with email code
• Delete account and cascade delete that user's tasks
• Create, view, update, delete tasks
• Mark tasks as completed or pending
• Search tasks by title or description
• Filter tasks by all, completed, or pending
• Paginated task list
• Frontend and backend validation
• Centralized backend error handling
• Loading, empty, success, and error states
• Responsive React UI for desktop, tablet, and mobile

Tech Stack

• Frontend: React, Vite, React Router, Axios, Lucide React, CSS
• Backend: Node.js, Express.js
• Database: MongoDB with Mongoose
• Authentication: JWT and bcrypt
• Email: Gmail SMTP with Nodemailer

Folder Structure

task-management-app/
  backend/
    config/
      db.js
    controllers/
      authController.js
      taskController.js
    middleware/
      authMiddleware.js
      errorMiddleware.js
      validateRequest.js
    models/
      Task.js
      User.js
    routes/
      authRoutes.js
      taskRoutes.js
    utils/
      appError.js
      asyncHandler.js
      codes.js
      email.js
      token.js
    .env.example
    package.json
    server.js
  frontend/
    src/
      api/
      components/
      context/
      pages/
      routes/
      styles/
      App.jsx
      main.jsx
    .env.example
    index.html
    package.json
    vite.config.js
  .gitignore
  package.json
  README.md

Environment Variables

Create backend/.env from backend/.env.example:

PORT=5000
NODE_ENV=development
MONGO_URI=mongodb://127.0.0.1:27017/task_gallery
JWT_SECRET=replace-with-a-long-random-secret
JWT_EXPIRES_IN=7d
CLIENT_URL=http://localhost:5173
GMAIL_USER=your-gmail-address@gmail.com
GMAIL_APP_PASSWORD=your-16-character-app-password
EMAIL_FROM="Task Gallery <your-gmail-address@gmail.com>"

Create frontend/.env from frontend/.env.example:

VITE_API_URL=http://localhost:5000/api

Backend Setup

cd task-management-app/backend
npm install
cp .env.example .env
npm run dev

The backend runs on http://localhost:5000 by default.

Health check:

GET http://localhost:5000/api/health

Frontend Setup

cd task-management-app/frontend
npm install
cp .env.example .env
npm run dev

The frontend runs on http://localhost:5173 by default.

Run Both Apps

From the project root:

cd task-management-app
npm install
npm run install:all
npm run dev

MongoDB Setup

Use either local MongoDB or MongoDB Atlas.

Local MongoDB:

1. Install MongoDB Community Server.
2. Start the MongoDB service.
3. Use this connection string in backend/.env:

MONGO_URI=mongodb://127.0.0.1:27017/task_gallery

MongoDB Atlas:

1. Create a cluster in MongoDB Atlas.
2. Create a database user.
3. Add your IP address to Network Access.
4. Copy the connection string into MONGO_URI.

Gmail SMTP Setup

Gmail requires an App Password for SMTP.

1. Enable 2-Step Verification on the Gmail account.
2. Create an App Password from Google Account security settings.
3. Add the Gmail address to GMAIL_USER.
4. Add the App Password to GMAIL_APP_PASSWORD.
5. Set EMAIL_FROM to a readable sender name.

If Gmail SMTP is not configured in development, the backend will still create accounts and return a devCode in the API response so the local flow can be tested.

API Endpoints

Base URL: /api

Auth

Method	Endpoint	Protected	Description
GET	/health	No	API health check
POST	/auth/register	No	Register user and send verification code
POST	/auth/verify-email	No	Verify email with 6-digit code
POST	/auth/resend-verification	No	Send a fresh verification code
POST	/auth/login	No	Login with verified email and password
POST	/auth/logout	Yes	Logout acknowledgement
POST	/auth/forgot-password	No	Send reset password code
POST	/auth/reset-password	No	Reset password with code
GET	/auth/me	Yes	Get current user and task stats
DELETE	/auth/account	Yes	Delete account and user tasks

Tasks

Method	Endpoint	Protected	Description
GET	/tasks?page=1&limit=6&status=all&search=	Yes	List tasks with search, filter, pagination
POST	/tasks	Yes	Create task
GET	/tasks/:id	Yes	Get one task
PATCH	/tasks/:id	Yes	Update title, description, or status
PATCH	/tasks/:id/toggle	Yes	Toggle completed or pending
DELETE	/tasks/:id	Yes	Delete task

Example Payloads

Register:

{
  "name": "Avery Stone",
  "email": "avery@example.com",
  "password": "secret123"
}

Create task:

{
  "title": "Finalize project brief",
  "description": "Review scope, screenshots, and deployment notes.",
  "status": "pending"
}

Deployment Instructions

Backend:

1. Create a production MongoDB database.
2. Set production environment variables on the hosting platform.
3. Set NODE_ENV=production.
4. Set CLIENT_URL to the deployed frontend URL.
5. Run npm install --omit=dev.
6. Start with npm start.

Frontend:

1. Set VITE_API_URL to the deployed backend API URL ending in /api.
2. Run npm install.
3. Run npm run build.
4. Deploy the generated dist/ folder to a static host.

Recommended hosting pairs:

• Frontend: Vercel, Netlify, or Render Static Site
• Backend: Render Web Service, Railway, Fly.io, or a VPS
• Database: MongoDB Atlas

Screenshots

Add screenshots here after running the app locally:

• Login page
• Register and verification flow
• Dashboard with task cards
• Account page

Local Verification

cd task-management-app
npm run check

This runs backend syntax checks and builds the frontend.