TaskZ — Task Management App

A full-stack task management application built with React and Node.js. Organize your tasks, set priorities and due dates, and track progress — all with a clean, responsive UI.

Live Demo

🚀 Coming soon after deployment

Test credentials:

• Email: abhayneedjob@urgent.com
• Password: verystrongpassword

---

Features

• 🔐 JWT-based authentication (register, login, profile management)
• ✅ Create, edit, delete, and complete tasks
• 🏷️ Task priorities — Low, Medium, High
• 📅 Due dates with overdue detection
• 📊 Task statistics dashboard (total, pending, completed, completion rate)
• 🕐 Recent activity feed
• 🔎 Filter tasks by date, priority, and status
• 📱 Fully responsive — works on mobile and desktop

---

Tech Stack

Layer	Technology
Frontend	React 19, Vite, Tailwind CSS v4
UI Components	Lucide React, MUI, React Toastify
Routing	React Router DOM v7
HTTP Client	Axios
Backend	Node.js, Express 5
Auth	JWT + bcryptjs
Database	MongoDB Atlas + Mongoose
Deployment	Vercel (frontend) + Railway (backend)

---

Project Structure

TaskZ/
├── backend/
│   ├── config/          # MongoDB connection
│   ├── controllers/     # userController, taskController
│   ├── middleware/       # JWT auth middleware
│   ├── models/          # User, Task Mongoose models
│   ├── routes/          # /api/user, /api/tasks
│   ├── server.js        # Express entry point
│   └── .env             # Environment variables (not committed)
│
└── frontend/
    ├── public/
    └── src/
        ├── components/  # Login, SignUp, Layout, Navbar, Sidebar,
        │                 # TaskItem, AddTask, PendingTasks, Profile
        ├── config/      # api.js — single source of truth for API URL
        ├── pages/       # Dashboard, Pending, Complete
        ├── assets/      # Shared styles/constants
        └── App.jsx

---

Local Development

Prerequisites

• Node.js v18+
• MongoDB Atlas account (free tier works)

1. Clone the repo

git clone https://github.com/abhay2k30/Taskz.git
cd Taskz

2. Backend setup

cd backend
npm install

Create backend/.env:

MONGO_URI      = your_mongodb_atlas_connection_string
PORT           = 4000
JWT_SECRET     = your_secret_key
ALLOWED_ORIGIN = http://localhost:5173

Start the backend:

npm start

3. Frontend setup

cd frontend
npm install

Create frontend/.env:

VITE_API_URL = http://localhost:4000

Start the frontend:

npm run dev

Open http://localhost:5173 in your browser.

---

Deployment

Frontend → Vercel

1. Import the repo on vercel.com
2. Set Root Directory to frontend
3. Add environment variable:

   VITE_API_URL = https://your-backend.railway.app
   

Backend → Railway

1. Import the repo on railway.app
2. Set Root Directory to backend
3. Add environment variables:

   MONGO_URI      = your_mongodb_atlas_connection_string
   PORT           = 4000
   JWT_SECRET     = your_secret_key
   ALLOWED_ORIGIN = https://your-app.vercel.app
   

---

API Endpoints

Auth

Method	Endpoint	Description
POST	/api/user/register	Register a new user
POST	/api/user/login	Login
GET	/api/user/me	Get current user (auth required)
PUT	/api/user/profile	Update profile (auth required)
PUT	/api/user/password	Change password (auth required)

Tasks

Method	Endpoint	Description
GET	/api/tasks/gp	Get all tasks (auth required)
POST	/api/tasks/gp	Create a task (auth required)
PUT	/api/tasks/:id/gp	Update a task (auth required)
DELETE	/api/tasks/:id/gp	Delete a task (auth required)

---

Author

Built by Abhay