Todo Tutorial App

Overview

The Todo Tutorial App is a React application designed to demonstrate how to manage a list of tasks with functionalities to add new tasks, and display completed and incomplete tasks. This project also showcases state management using React hooks and styling with Tailwind CSS.

Features

• Add Todo Form: Allows users to input and submit new tasks.
• State Demo: Provides interactive buttons to manipulate and display state changes.
• Todo List: Displays tasks categorized into completed and incomplete sections.
• Responsive Design: The application is responsive and adjusts layout based on screen size.

Technologies

• React: JavaScript library for building user interfaces.
• Tailwind CSS: Utility-first CSS framework for custom designs.
• React Hooks: For managing state and lifecycle methods in functional components.

Installation

Prerequisites

Ensure you have Node.js installed. You can check your Node.js version with:

node -v

Setup

1. Clone the repository:

git clone https://github.com/ogada-otieno/moringa-todo-tutorial-react.git
cd moringa-todo-tutorial-react

2. Install dependencies:

npm install

3. Start the development server:

npm start

Components

App.js

• The main component that renders the Todo Tutorial application, including the AddTodoForm, StateDemo , and TodoList components.

AddTodoForm.js

• A form component for adding new tasks to the list. It includes input fields for the task title and description.

StateDemo.js

• A demonstration component that showcases the use of React state with interactive buttons to modify and display state.

TodoList.js

• A component that displays the list of tasks, categorized into completed and incomplete sections. TODO: include functionality to toggle task completion status.

Styling

This project uses Tailwind CSS for styling. For component-specific styles, Tailwind utility classes are applied. The layout is responsive and adapts to different screen sizes

contributing

Contributions are welcome! Please fork the repository and submit a pull request with your changes.

Key Sections:

1. Overview: Briefly describes what the app does and its key features.
2. Technologies: Lists the technologies used in the project.
3. Installation: Provides step-by-step instructions for setting up the project.
4. Components: Briefly describes the main components of the project.
5. Styling: Details the styling approach used.
6. Contributing: Encourages contributions and explains the process.