Task Board

Task Board

A comprehensive full-stack task management application with role-based access control, real-time dashboard analytics, and intuitive UI for organizing team workflows.

Tech Stack

Next.jsReactTypeScriptZustandTanStack QueryMongo DB
GitHub

Features

  • User Authentication - Secure login/registration with JWT tokens
  • Task Management - Create, read, update, and delete tasks with status tracking
  • Admin Dashboard - System-wide analytics and user management
  • User Dashboard - Personal task stats and workload overview
  • Role-Based Access - Admin and regular user permissions
  • Workload Tracking - Visualize task distribution across team members
  • Deadline Management - Track and manage task deadlines
  • User Profiles - Manage user information and settings
  • Responsive Design - Mobile-friendly interface

Tech Stack

Frontend:

  • Next.js 16, React 19, TypeScript, Tailwind CSS, shadcn/ui, Zustand, TanStack Query, Recharts, Axios, Lucide React, Sonner

Backend:

  • Next.js API Routes, Node.js, MongoDB + Mongoose, bcrypt, JWT

Architecture & Flow

Project image

Dashboard

Project image

Admin Panel

Project image

Prerequisites

Before you begin, ensure you have the following installed globally on your machine:

  • Node.js (v18 or higher recommended)
  • npm (comes with Node.js) or yarn
  • MongoDB instance (local server or cloud cluster like MongoDB Atlas)

Getting Started

Follow these minimal steps to install dependencies and run the project locally on a fresh machine.

  1. Install dependencies:

npm install

  1. Configure Environment Variables: Create a .env.local (or .env) file in the root of the project and add your MongoDB connection string and a JWT secret:

MONGO_URI=your_mongodb_connection_string
JWT_SECRET=your_secret_key

  1. Run the development server:

npm run dev

The application will now be running at http://localhost:3000.

Published on