Skip to content

Latest commit

 

History

History
90 lines (61 loc) · 2.87 KB

README.md

File metadata and controls

90 lines (61 loc) · 2.87 KB

Todo List Application

This is a feature-rich Todo List application built using Next.js, TypeScript, and shadcn for modern and scalable UI. It allows users to add, edit, complete, and delete tasks while providing a smooth user experience with local storage support and dark mode compatibility.

Features

  • Add Tasks: Quickly add tasks via an intuitive input field or by pressing the "Enter" key.
  • Edit Tasks: Update task details seamlessly with inline editing.
  • Complete Tasks: Mark tasks as completed, with a visual indication through strikethrough text.
  • Delete Tasks: Remove tasks effortlessly with the delete button.
  • Local Storage Support: Tasks persist even after refreshing the page.
  • Dark Mode: The UI adapts to system-level dark mode preferences for a pleasant experience.
  • Responsive Design: Built to look great on both mobile and desktop devices.

Technologies Used

  • Next.js: A React-based framework for server-side rendering and static site generation.
  • TypeScript: For a type-safe and robust development experience.
  • shadcn: To build elegant and reusable UI components.
  • Tailwind CSS: For responsive and utility-first CSS styling.
  • Lucide Icons: For modern and intuitive icons like Add, Edit, Delete, and Check.

Installation and Setup

  1. Clone this repository:

    git clone https://github.com/Sheikh-Muhammad-Mujtaba/todo-list_app
cd todo-list_app

  2. Install dependencies:

    npm install

  3. Run the development server:

    npm run dev

  4. Open the app in your browser at http://localhost:3000.

Usage

  1. Adding a Task

    • Type a task into the input field.
    • Press the Add button or hit Enter to save the task.

  2. Editing a Task

    • Click the Edit button (pencil icon).
    • Modify the task text and press the Check button or hit Enter to save changes.
    • Press the Cancel button (X icon) to discard changes.

  3. Completing a Task

    • Click the Checkbox to mark a task as completed.

  4. Deleting a Task

    • Click the Trash button to delete the task.

Screenshots

Light Mode:
Light Mode Todo App

Dark Mode:
Dark Mode Todo App

Why Use This Project?

  • It's a modern web app showcasing the integration of Next.js and shadcn for dynamic, scalable applications.
  • The use of Tailwind CSS ensures consistent and responsive UI across devices.
  • It demonstrates essential features like CRUD operations and local storage management, making it a great learning resource for beginners.

Author: [Your Name]
GitHub: https://github.com/Sheikh-Muhammad-Mujtaba