FOR RECRUITERS,

LOGIN CREDENTIALS: USERNAME:sachin, PASSWOR:123456

Task Manager

It's a mern stack application built to help in managing tasks.It provide complete CRUD operation and drag-drop feature to update the task in real time.

Tech Stack

Client: Nextjs + Typescript,Context API,ShadCN

Server: Node, Expressjs, MongoDB

Usage

You can schedule your tasks for a day or week or month.And then you can update their status as per their current status with drag-drop feature provided in application.There are three status supported by application 'To Do', 'In Progress',and 'Completed'.During creating the task, you have to select any of them.

Features

1.Full fledged backend with custom Auth with JWT. 2.Support CRUD operation on tasks.
3.Express router used to route the api request. 4.Simple and efficent data models.
5.Support drag-drop feature to update tasks status. 6.ShadCN UI components used to make UI.
7.Fully responsive on all devices.
8.All necessary states are managed with CONTEXT API.

Demo

Screenshots

Installation

-node.js (v20.11.0)
-npm (v9.7.1)
-next.js(v14.2.12)
-react.js(^v18)

Run Locally

Clone the project

  git clone https://github.com/sachinsiddhu112/kanbanBoard

Go to the project directory

  cd kanbanBoard/client

Install dependencies

  npm install

Start the server

  npm run dev

Lessons Learned

What did you learn while building this project? What challenges did you face and how did you overcome them?

This project marked my first experience using Next.js with TypeScript and ShadCN. Previously, I worked with React.js and JavaScript, using Tailwind CSS for styling. As a beginner in TypeScript, I encountered several type errors along the way, and integrating ShadCN—which I was using for the first time—added an extra layer of challenge. However, it turned out to be a great learning experience.

ShadCN is an excellent UI library that provides pre-built components with the flexibility to customize them to fit specific requirements. I was impressed by how it accelerated development and offered sleek, ready-to-use components. Moving forward, I plan to use ShadCN in future projects as it significantly enhances both development speed and the quality of the UI.

For the backend, I used Express.js in this project alongside Next.js. However, in future projects, I’d like to explore using Next.js as a full-stack framework rather than just for frontend, given its growing capabilities in handling both frontend and backend.