ProjectHome

A full-stack project management application built with the MERN stack (MongoDB, Express, React, Node.js). Teams can create projects, manage members with role-based permissions, and organize work on a Kanban-style task board with subtasks, due dates, and file attachments.

Features

• Authentication — register, login, logout, email verification, forgot/reset password. Sessions are handled via httpOnly cookies with automatic access-token refresh.
• Projects — create, edit, and delete projects you own.
• Members — add members by email, assign roles (admin, project_admin, member), change roles, and remove members.
• Tasks — Kanban board (To do / In progress / Done) per project, with:
  • Subtasks (checklist items)
  • Due dates (overdue tasks are flagged)
  • File attachments
  • Assignment to a specific project member

Tech Stack

Backend

• Node.js + Express
• MongoDB with Mongoose
• JWT authentication (access + refresh tokens via cookies)
• Multer (file uploads)
• Nodemailer + Mailgen (transactional email)

Frontend

• React + Vite
• React Router
• Axios
• Custom design system (no UI framework)

Project Structure

project management/               ← backend root
├── src/
│   ├── controllers/              auth, project, task, healthcheck
│   ├── routes/                   auth, project, task, healthcheck
│   ├── middlewares/               verifyJWT, validateProjectPermission, multer
│   ├── models/                   user, project, projectmember, task, subtask
│   ├── utils/                    ApiError, ApiResponse, asyncHandler, mail, constants
│   ├── db/                       MongoDB connection
│   ├── app.js                    Express app + route mounting + error handler
│   └── index.js                  entry point
└── projecthome-frontend/         ← frontend
    └── src/
        ├── api/client.js         axios instance + endpoint wrappers
        ├── context/AuthContext.jsx
        ├── components/           Navbar, ProtectedRoute, TaskBoard
        ├── pages/                Login, Register, ForgotPassword, ResetPassword,
        │                         Dashboard, ProjectDetail
        └── styles/index.css      design tokens

Setup

Backend

1. Install dependencies:

   npm install

2. Create a .env file in the backend root with:

   MONGO_URI=your_mongodb_connection_string
   PORT=8000
   CORS_ORIGIN=http://localhost:5173
   
   ACCESS_TOKEN_SECRET=your_access_secret
   ACCESS_TOKEN_EXPIRY=1d
   REFRESH_TOKEN_SECRET=your_refresh_secret
   REFRESH_TOKEN_EXPIRY=10d
   
   MAILTRAP_SMTP_HOST=sandbox.smtp.mailtrap.io
   MAILTRAP_SMTP_PORT=2525
   MAILTRAP_SMTP_USER=your_mailtrap_user
   MAILTRAP_SMTP_PASS=your_mailtrap_pass
   
   FORGOT_PASSWORD_REDIRECT_URL=http://localhost:5173/reset-password
   SERVER_URL=http://localhost:8000

3. Run the server:

   npm run dev

   Runs on http://localhost:8000 by default.

Frontend

1. Navigate to the frontend folder and install dependencies:

   cd projecthome-frontend
   npm install

2. Create a .env file:

   VITE_API_BASE_URL=http://localhost:8000/api/v1

3. Run the dev server:

   npm run dev

   Runs on http://localhost:5173.

Notes

• MongoDB Atlas users: make sure your current IP is whitelisted under Network Access in the Atlas dashboard, or connections will fail.
• Email sending uses Mailtrap's sandbox SMTP by design during development — emails land in your Mailtrap inbox, not real inboxes. Swap in a production SMTP provider before going live.
• Cookies are set with secure: true only in production (NODE_ENV === "production"), so sessions work correctly over plain HTTP in local development.

License

ISC