Todo React

A simple, performant, and accessible Todo application built with React, TypeScript, Vite, and Tailwind CSS.

Table of Contents

• Features
• Demo
• Tech Stack
• Installation
• Usage
• Available Scripts
• Folder Structure
• Contributing
• License

Features

• Create, edit, and delete todo items
• Mark todos as completed
• Persist todos in browser localStorage
• Responsive design with Tailwind CSS

Demo

Todo App

Tech Stack

• React 19
• TypeScript
• Vite
• Tailwind CSS
• clsx (for conditional classNames)

Installation

Ensure you have Node.js installed (v16+ recommended) and a package manager such as pnpm or npm.

pnpm install
# or
npm install

Usage

Run the development server:

pnpm dev
# or
npm run dev

Open http://localhost:3000 to view the app in the browser. Changes are reflected in real time.

Build for production:

pnpm build
# or
npm run build

Preview production build:

pnpm preview
# or
npm run preview

Available Scripts

In the project directory, you can run:

Script	Description
pnpm dev	Start development server at http://localhost:3000
pnpm build	Build the app for production
pnpm preview	Preview the production build
pnpm lint	Run ESLint to analyze code

Folder Structure

todo-react/
├── public/                # Static assets (favicon, images)
├── src/
│   ├── assets/            # Images, SVGs, fonts
│   ├── components/        # Reusable UI components
│   ├── features/          # Feature-specific modules (e.g., todos)
│   ├── hooks/             # Shared custom hooks
│   ├── services/          # Cross-feature services (e.g., logger)
│   ├── store/             # Global state management
│   ├── styles/            # Global CSS and variables
│   ├── types/             # Global type definitions
│   ├── App.tsx            # Application root component
│   └── main.tsx           # Entry point for React
├── .eslintrc.js           # ESLint configuration
├── tsconfig.json          # TypeScript configuration
├── vite.config.ts         # Vite configuration
└── package.json           # Project metadata and scripts

Contributing

Contributions, issues, and feature requests are welcome! Feel free to:

1. Fork the repository
2. Create a new branch (git checkout -b feature/YourFeature)
3. Commit your changes (git commit -m 'Add some feature')
4. Push to the branch (git push origin feature/YourFeature)
5. Open a pull request

Please ensure code follows the existing linting and formatting rules (eslint and prettier).

License

This project is licensed under the MIT License. See LICENSE for details.