This project is a simple Todo list app that allows users to define and manage their tasks. The application is built using Next.js, TypeScript, and Tailwind CSS. For state management, Zustand is utilized.

you can see the app demo at this URL:

GSMPay.co

1. Add New Tasks: Users can define a desired number of tasks in the "Add" section. Task names can only consist of Persian letters and numbers.

2. Task Workflow:

   • Tasks are initially added to the "In Progress" section upon creation.
   • Clicking or tapping on a task in the "In Progress" section moves it to the "Done" section.
   • Clicking or tapping on a task in the "Done" section returns the task to the "In Progress" section.
   • You can delete each task that is presented in the "In Progress" column.
   • When you click or tap on the delete button, you have 10 seconds to undo the action by clicking on the undo button.

3. Success Chart:

   • A success chart displays the number of tasks in both the "In Progress" and "Done" sections.

4. Local Storage:

   • Task information is stored locally, allowing users to view previous tasks upon returning to the application.

• Next.js: A React framework for building web applications.
• TypeScript: A statically typed superset of JavaScript.
• Tailwind CSS: A utility-first CSS framework.
• Zustand: A small, fast, and scaleable state management library for React.

Explore the design mockups on Figma to get a better understanding of the visual aspects of the project.

Figma Project

1. Clone the repository.

   git clone https://github.com/ZahraMirzaei/GSMPay-interview-task
   cd GSMPay-interview-task

2. Install dependencies.

   npm install

3. Run the development server.

   npm run dev

4. Open http://localhost:3000 in your browser.

Feel free to explore and enhance the application based on your needs!