Skip to content

Latest commit

 

History

History
160 lines (119 loc) · 6.51 KB

README.md

File metadata and controls

160 lines (119 loc) · 6.51 KB

Task Management App

Node.js version NPM version NextJS version ReactJS version Made by Gustavo Domingueti

Access the demo

Table of Contents

🔖 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:

✅ 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

Desktop result 1

✔️ 📱 Mobile Result

Mobile result 1

🔥 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
  1. 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