React Todo App (with Tailwind CSS)

A clean, modern, and fully functional Todo web application built from scratch with React, Vite, and Tailwind CSS. This project was created as a way to master core React concepts, including state management, component architecture, and modern development practices.

🚀 Features

• Create Todos: An intuitive form to add new tasks.
• Update Todos: Mark tasks as "complete" or "incomplete" with a single click. The UI updates instantly.
• Delete Todos: Easily remove tasks from your list.
• Modern UI: A clean, responsive design styled with Tailwind CSS, featuring SVG icons for a better user experience.
• Conditional Rendering: A helpful message appears when the todo list is empty.
• Component-Based: Built with a logical, reusable component structure.

---

🛠 Tech Stack

• React: The core library for building the user interface.
• Vite: A blazing-fast front-end build tool and development server.
• Tailwind CSS: A utility-first CSS framework for rapid, custom UI development.

---

🏁 Getting Started

To get a local copy up and running, follow these simple steps.

Prerequisites

You must have Node.js (which includes npm) installed on your machine.

Installation

1. Clone the repository:

   git clone https://github.com/HemJoshi111/react-todo-app.git

2. Navigate to the project directory:

   cd YOUR_REPOSITORY_NAME

3. Install dependencies:

   npm install

4. Run the development server:

   npm run dev

   Your app will now be running on http://localhost:5173 (or a similar port).

---

🧠 Key Concepts Implemented

This project was a deep dive into the fundamental, real-world patterns of React development:

• Component Architecture: The app is broken down into logical components (App, Header, TodoForm, TodoList, TodoItem) that follow the "Separation of Concerns" principle.
• State Management: Used the useState hook to manage all application state, including the main todos array and the form's input value.
• Lifting State Up: This was the core logic pattern. The "source of truth" (todos state) lives in the App component.
• Props (Properties):
  • Data Flow: Data (like the todos array) flows down from parent to child (App -> TodoList -> TodoItem).
  • Function Props: Functions (addTodo, toggleTodo, deleteTodo) are passed down as props to child components, allowing them to send data up to the parent.
• List Rendering: Used the .map() method to render a dynamic list of TodoItem components, passing a unique key prop for each to ensure efficient re-renders.
• Conditional Rendering: Used ternary operators to:
  • Show a "No todos yet" message if the todos array was empty.
  • Apply conditional Tailwind classes (line-through, text-gray-400) to items based on their completed status.
• Event Handling: Used onSubmit for the form and onClick for the buttons to manage user interactions.