Skip to content

Latest commit

 

History

History
174 lines (118 loc) · 3.39 KB

README.md

File metadata and controls

174 lines (118 loc) · 3.39 KB

React Todo App 📝

A beginner-friendly Todo App built with React Context API and Tailwind CSS to demonstrate how global state can be shared across multiple components without props drilling.

This project shows how to manage application-wide state using Context API, organize components properly, and build a clean UI using Tailwind CSS.

By building this project, you will understand how modern React applications handle global state, component communication, and reusable UI.

🔗 Live Demo

Live Project:
https://react-context-api-tailwind-todo-hja.vercel.app/

✨ Features

  • Add new todos
  • Edit existing todos
  • Delete todos
  • Mark todos as completed
  • Global state management using Context API
  • No props drilling
  • Responsive UI with Tailwind CSS
  • Clean and beginner-friendly code structure

🧠 Concepts Covered

This project helps you understand important React concepts used in real-world applications.

React Concepts

  • React component structure
  • useState hook
  • useContext hook
  • Context API
  • Global state management
  • Avoiding props drilling
  • Component communication
  • Component reusability

Tailwind CSS Concepts

  • Utility-first styling
  • Layout with Flexbox
  • Spacing utilities
  • Typography utilities
  • Responsive design basics

📝 How Todo App Works

This project uses React Context API to manage the todo list globally.

Steps involved:

  1. Create a TodoContext
  2. Wrap the application with TodoContext Provider
  3. Store todos using useState
  4. Access todos in components using useContext
  5. Add, edit, delete, and update todo status
  6. Update UI dynamically when state changes

Using Context API helps avoid passing props through multiple levels of components.

🛠️ Tech Stack

  • React JS
  • Context API
  • Tailwind CSS
  • JavaScript (ES6+)

📁 Project Structure

src/
│── components/
│     ├── TodoInput.jsx
│     ├── TodoItems.jsx
│     └── TodoList.jsx
│
│── context/
│     └── TodoContext.js
│     └── TodoProvider.jsx
│
│── App.jsx
│── main.jsx
│── index.css

🚀 Getting Started

1️⃣ Clone the repository

git clone https://github.com/jdcodebase/react-context-api-tailwind-todo

2️⃣ Install dependencies

npm install

3️⃣ Start the development server

npm run dev

📺 Related Video

Watch the full tutorial on YouTube:

Build a Todo App using React Context API & Tailwind CSS

In this video you will learn:

  • What is Context API
  • Why we need global state
  • How to avoid props drilling
  • How to share data across components
  • How to build a Todo App with React

🚀 My Playlists

📌 Complete Web Development Playlist
https://www.youtube.com/playlist?list=PLKIziyQytJbvEtBirMvnUmwyoT1gDuW6t

📌 DSA Playlist (Data Structures & Algorithms)
https://www.youtube.com/playlist?list=PLKIziyQytJbu-Dn1IPDY-aQA21G1n4wJe

📚 Part of Web Development Series

This project is part of the Web Development Series by JDCodebase, where we learn:

  • HTML
  • CSS
  • JavaScript
  • React
  • Tailwind CSS
  • MERN Stack

All explained step-by-step for beginners.

🙌 Support

If you found this project helpful:

  • ⭐ Star the repository
  • 📺 Subscribe on YouTube
  • 🔁 Share with others

Happy Coding 🚀
JDCodebase