Kanban App - Vite + React + Shadcn UI Frontend with Express.js Backend

image

Features

The application implements some of the features of JIRA kanban board. The application has the following features:

  • Create a new task
  • Edit a task
  • Delete a task
  • Move a task to another column
  • Drag and drop tasks to reorder them
  • Add a new column
  • Delete a column
  • Asking user to choose an alternate column for the existing tasks in the column being deleted
  • Edit a column
  • Search tasks

Installation and Setup

Built with Vite, React, and Express.js.

This project is divided into two parts:

  • client: The frontend part of the application built with Vite and React.
  • server: The backend part of the application built with Express.js.
# For frontend
cd frontend
npm install

# For backend
cd backend
npm install

Using the Application

To start the frontend and backend, run the following commands in your terminal:

# Start the frontend
cd frontend
npm run dev

# In a new terminal window, start the backend
cd backend
npm start

The frontend application will start running on http://localhost:5173 and the backend will start on http://localhost:5000.

Dockerized Application

This application is also dockerized. The dockerized version has mongodb as database instead of filesystem. To run the application using Docker, run the following commands:

docker-compose up

IMPORTANT

Currently, the dockerized version of the application is not working properly. After moving to Vite+React+Shadcn UI from CRA, the dockerized version is not working. I will fix this issue soon.