Modern Todo List App

A minimalist, responsive Todo List application built with React and Tailwind CSS. This project demonstrates the capabilities of AI-assisted coding ("Vibe Coding") using Cursor.

Project Screenshot

Features

• Add Tasks: Users can easily add new tasks to the list.
• Edit Tasks: Existing tasks can be edited by clicking on them.
• Delete Tasks: Unwanted tasks can be removed.
• Mark as Completed: Tasks can be checked off (strikethrough effect).
• Persistence: All data is saved to LocalStorage, so tasks remain even after refreshing the page.
• Responsive Design: Works seamlessly on both desktop and mobile devices.

Technologies Used

• React (Vite)
• Tailwind CSS (for styling)
• Node.js
• LocalStorage API

Vibe Coding Tool Used

• Cursor (AI-first Code Editor)
  • Feature used: Composer (Cmd+I) for generating the project structure and Chat (Cmd+L) for debugging environment issues.

Installation and Setup

1. Clone the repository:

   git clone https://github.com/aley-g/vibe-coding.git

2. Navigate to the project directory:

   cd hw- todolist

3. Install dependencies:

   npm install

4. Run the development server:

   npm run dev

5. Open your browser and visit: http://localhost:5173

Credits & Acknowledgments

• Developed by Aleyna as part of the AI Coding Assignment.
• Special thanks to the Cursor AI team for the "Composer" feature which accelerated the development process.

🐳 Running with Docker (Dockerization)

To run this project in a Docker container, follow these steps:

1. Build the Docker Image: In the terminal, while in the project directory, run the following command:

docker build -t todo-app-image .

docker run -p 5173:5173 todo-app