Skip to content

Latest commit

 

History

History
149 lines (99 loc) · 2.89 KB

README.md

File metadata and controls

149 lines (99 loc) · 2.89 KB

React Tailwind Todo App 📝

A beginner-friendly React Todo App rebuilt with Tailwind CSS to demonstrate how styling can be refactored without changing application logic.

This project is based on the original React Todo CRUD application, where the functionality remains exactly the same, but the entire UI has been redesigned using Tailwind CSS utility classes instead of traditional CSS.

🔗 Live Demo

Live Project: https://react-tailwind-todo-gamma.vercel.app/

✨ Features

  • Add new todos
  • Edit existing todos
  • Delete todos
  • Controlled form inputs
  • Conditional rendering (view / edit mode)
  • Data persistence using localStorage
  • Responsive UI built with Tailwind CSS

🧠 Concepts Covered

This project helps understand both React fundamentals and modern UI styling approaches.

React Concepts

  • React component structure
  • useState hook
  • useEffect hook
  • Props and parent–child communication
  • Lifting state up
  • UI state vs application state
  • Immutability in React
  • CRUD operations in React

Tailwind CSS Concepts

  • Utility-first CSS approach
  • Layout using Flexbox
  • Spacing and alignment utilities
  • Styling forms and buttons
  • Responsive design
  • Shadows, borders, and UI refinement

🔄 Project Refactor

This project demonstrates a real-world refactor scenario.

The original project used traditional CSS, and in this version we:

  • Removed custom CSS styling
  • Rebuilt the entire UI using Tailwind utility classes
  • Kept the same React components
  • Kept the same logic and functionality

This shows how styling and application logic are separate concerns in modern frontend development.

🛠️ Tech Stack

  • React
  • Tailwind CSS
  • JavaScript (ES6+)

📁 Project Structure

src/
│── App.jsx
│── TodoApp.jsx
│── TodoInput.jsx
│── TodoList.jsx
│── index.css
│── main.jsx

🚀 Getting Started

1️⃣ Clone the repository

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

2️⃣ Install dependencies

npm install

3️⃣ Start the development server

npm run dev

📺 Related Video

Watch the full explanation on YouTube:

Rebuilding CSS UI to Tailwind CSS (React Todo Project) Web Development Series – JDCodebase

Original React Todo Project (Logic Explained): https://youtu.be/g_47IcYzDfA

📚 Part of Web Development Series

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

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

Step-by-step beginner-friendly learning.

🙌 Support

If you found this project helpful:

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

Happy Coding 🚀 JDCodebase