Task Management With React Typescript Vue.js Tailwindcss Shadcn Ui Tanstack Axios And Zod

This project is built using modern web technologies, including React, TypeScript, and TailwindCSS, with Vite as the build tool.

Table of Contents

• Tech Stack
  • Built With
  • Usages
• Folder Structure
• Scripts
• Backend Documentation
  • API Request Format
  • API Response Format
  • API Request and Response Samples
• Features
• GUI overview
  • Login
  • Sign up
  • Dashboard
  • Theme Toggle
    • Dark Mode
    • Light Mode
  • Kanban Board
  • Workspace Management
  • Project Management
  • Issue Management
  • Task Management
  • Add Form
  • Edit Form

Tech Stack

Built With

Usages

• React 19 (react, react-dom): For building user interfaces.
• @dnd-kit/core: For drag-and-drop functionality.
• @tanstack/react-query: For managing server state.
• TailwindCSS: For utility-first CSS styling.
• Shadcn UI: Accessible UI components.
• Axios: For making HTTP requests.

Folder Structure

main-app/
├── public/
├── src/
│   ├── assets/         # Static assets (images, fonts, etc.)
│   ├── api/            # API calls and services
│   ├── app/            # Main app entry, routing, layout
│   ├── components/     # Reusable UI components
│   ├── features/       # Feature-based modules (e.g., tasks)
│   ├── hooks/          # Custom React hooks
│   ├── lib/            # Utility functions and libraries
│   ├── schemas/        # Validation schemas or types
│   ├── App.tsx         # Main app component
│   ├── App.css         # Global styles for the app
│   ├── index.css       # Global styles
│   ├── main.tsx        # App entry point
├── .env                # Environment variables
├── .gitignore          # Git ignore rules
├── README.md           # Project documentation
├── index.html          # HTML template for the app
├── package.json        # Project dependencies and scripts
├── tsconfig.app.json   # TypeScript configuration for the app
├── tsconfig.json       # Root TypeScript configuration
├── tsconfig.node.json  # TypeScript configuration for Node.js
├── tailwind.config.js  # Tailwind CSS configuration
└── vite.config.ts      # Vite configuration

Scripts

Backend Documentation

API Request Format

Here endpoint is a workspaces, projects, issues, tasks, users etc.

API Response Format

Successful Response Example:

{
  "isSuccess": true,
  "data": { },
  "message": "successful message",
  "errors": null
}

Error Response Example:

{
    "isSuccess": false,
    "data": null,
    "message": "Unsuccessful message",
    "errors": [
        {
            "field": "name",
            "message": "Name is required"
        }
    ]
}

API Request and Response Samples

Retrieve resources

curl -X 'GET' \
  'https://example.com/api/v1/endpoint?SearchTerm=Sample' \
  -H 'accept: application/json'

{
  "isSuccess": true,
  "data": {
    "items": [
      {
        "name": "sample",
        "description": "sample",
        "userDataAccessLevel": 0,
        "id": "c69d4fa7-2770-4f94-b7db-33e5f28bbe2c",
        "links": [
          {
            "method": "GET",
            "href": "endpoint/c69d4fa7-2770-4f94-b7db-33e5f28bbe2c",
            "operation": "Get"
          },
          {
            "method": "POST",
            "href": "endpoint/c69d4fa7-2770-4f94-b7db-33e5f28bbe2c",
            "operation": "Create"
          },
          {
            "method": "PUT",
            "href": "endpoint/c69d4fa7-2770-4f94-b7db-33e5f28bbe2c",
            "operation": "Update"
          },
          {
            "method": "DELETE",
            "href": "endpoint/c69d4fa7-2770-4f94-b7db-33e5f28bbe2c",
            "operation": "Delete"
          }
        ]
      }
    ],
    "page": 1,
    "pageSize": 1,
    "totalCount": 1,
    "totalPages": 1,
    "links": [],
    "hasNextPage": false,
    "hasPreviousPage": false
  },
  "message": "Data retrieved successfully",
  "errors": null

Get resource by a ID

curl -X 'GET' \
  'https://example.com/api/v1/endpoint/c69d4fa7-2770-4f94-b7db-33e5f28bbe2c' \
  -H 'accept: application/json'

{
  "isSuccess": true,
  "data": {
    "name": "Sample",
    "description": "Sample",
    "userDataAccessLevel": 0,
    "id": "c69d4fa7-2770-4f94-b7db-33e5f28bbe2c",
    "links": [
      {
        "method": "GET",
        "href": "https://example.com/api/v1/endpoint/c69d4fa7-2770-4f94-b7db-33e5f28bbe2c",
        "operation": "Get"
      },
      {
        "method": "POST",
        "href": "https://example.com/api/v1/endpoint/c69d4fa7-2770-4f94-b7db-33e5f28bbe2c",
        "operation": "Create"
      },
      {
        "method": "PUT",
        "href": "https://example.com/api/v1/endpoint/c69d4fa7-2770-4f94-b7db-33e5f28bbe2c",
        "operation": "Update"
      },
      {
        "method": "DELETE",
        "href": "https://example.com/api/v1/endpoint/c69d4fa7-2770-4f94-b7db-33e5f28bbe2c",
        "operation": "Delete"
      }
    ]
  },
  "message": "Data retrieved successfully",
  "errors": null
}

Create a resource

curl -X 'POST' \
  'https://example.com/api/v1/endpoint' \
  -H 'accept: application/json' \
  -H 'Content-Type: application/json-patch+json' \
  -d '{
  "userDataAccessLevel": 0,
  "name": "Sample",
  "description": "Sample"
}'

{
  "isSuccess": true,
  "data": "2f895cc9-8f58-4e4a-a5b7-97594b933a32",
  "message": "Data added successfully",
  "errors": null
}

Update a resource

curl -X 'PUT' \
  'https://example.com/api/v1/endpoint/c69d4fa7-2770-4f94-b7db-33e5f28bbe2c' \
  -H 'accept: application/json' \
  -H 'Content-Type: application/json-patch+json' \
  -d '{
  "name": "Sample",
  "description": "Sample"
  "userDataAccessLevel": 0,
}'

{
  "isSuccess": true,
  "data": {
    "name": "Sample",
    "description": "Sample",
    "userDataAccessLevel": 0
  },
  "message": "Data updated successfully",
  "errors": null
}

Delete a resource

curl -X 'DELETE' \
  'https://example.com/api/v1/endpoint/2f895cc9-8f58-4e4a-a5b7-97594b933a32' \
  -H 'accept: application/json'

{
  "isSuccess": true,
  "data": true,
  "message": "Data deleted successfully",
  "errors": null
}

Features

GUI overview

Login

Sign up

Dashboard

Theme Toggle

Dark Mode

Light Mode

Kanban Board

Workspace Management

Project Management

Issue Management

Task Management

Add Form

Edit Form