Task Management App

Access the demo

Table of Contents

• About
• Main Features
• Bonus Features
• Technologies
• Best Practices & Tooling
• Project Structure
• How to Use

🔖 About

This project is a Task Management App built with Next.js, React, TypeScript, and Zustand. It allows users to create, edit, categorize, and track tasks efficiently. The app was designed with a custom-built table view, dynamic filtering, and inline editing, providing a seamless user experience.

🎯 Main features

• Task creation and editing with title, status, and priority selection.
• Inline editing available for all table columns except the ID column, allowing quick modifications directly in the table.
• Task deletion available both from the table row and within the task edit form.
• Custom-built table view for task visualization, designed from scratch for flexibility and performance.
• Custom pagination with options to define items per page and a clear indication of the currently selected page.
• Sorting configuration available for all table columns, allowing dynamic ordering of tasks.
• Custom fields support with text, number, and boolean types, enabling flexible task attributes.
• Column-based filtering with intelligent filtering based on column types, including default filters for title (task name), priority, and status.
• Custom field filtering automatically adapts to the field type (text, number, or boolean).

✨ Bonus features

• Micro-animations to enhance user experience, providing smooth transitions and feedback for actions like task updates, filtering, and pagination.
• Multi-select support in the table, allowing bulk actions such as mass deletion, bulk status updates, and priority changes.
• Undo/Redo functionality available for certain task creation, editing, and deletion actions.
• Global search field to quickly find tasks across the entire table.

🚀 Technologies and libraries

The project was developed using the following technologies and libraries:

• NextJS
• ReactJS
• ShadcnUI
• Zustand
• TypeScript

✅ Best Practices & Tooling

This project follows modern best practices to ensure code quality, consistency, and maintainability:

• Husky Automates pre-commit hooks to enforce standards before pushing changes.
• ESLint Ensures consistent code quality by identifying and fixing linting issues.
• Prettier Automatically formats code to maintain a uniform style.
• Commitlint Enforces a standardized commit message format.
• Lint-staged Runs linters on staged files before committing, ensuring only formatted and checked code is pushed.

📂 Project structure

/task-management-app
│── src/                     # Main source code
│   ├── app/                 # Next.js app directory (includes pages, layouts, and API routes)
│   ├── components/          # Reusable UI components (ShadCN UI components and custom ones)
│   ├── constants/           # Static values and configuration constants
│   ├── containers/          # High-level components that structure sections of the app
│   ├── lib/                 # Shared libraries, helpers, and integrations
│   ├── services/            # Handles data persistence and business logic (using LocalStorage for storage)
│   ├── stores/              # State management (Zustand)
│   ├── types/               # TypeScript types and interfaces
│   ├── utils/               # Utility functions and helper methods
│── public/                  # Static assets (images, fonts, favicons)
│── package.json             # Project dependencies and scripts
│── README.md                # Project documentation

✔️ 💻 Desktop Result

✔️ 📱 Mobile Result

🔥 How to use

• Prerequisites

  • It is necessary to have Node.js installed on the machine in the lts version.
  • Also, you need to have a package manager be it NPM or Yarn.

1. Clone the repository:

  $ git clone [email protected]:dominguetigs/task-management-app.git

2. Run the Application:

  # Install the dependencies
  $ npm install

  # Initialize the application
  $ npm run dev

📝 License

This project is under the MIT license. See the LICENSE file for more details.

---

Made with 💙 by Gustavo Domingueti