Your Todo App

This is a Todo application that handles CRUD operation and it uses localStorage. This is the Live Version.

Tech

• React.js
• Typescript
• Javascript
• TailwindCSS
• ShadCN (component library)

Purpose

This app was created to get familiar with react.js. I was able to explore some of the core React Concepts such as Hooks (state, effect, memo), props, children, etc. Also, I was able to work with vite and use a component library such as shadcn.

Installation

• Clone this repo
• Go to the repo's folder: cd react-app
• run pnpm install
• Then, run pnpm dev

Note: I used pnpm since it provides great speed and storage efficiency. However other packages management tool can be used such as npm or yarn.

Features

CRUD

• Add a TODO
• View all TODOs
• Delete a single TODO
• Edit a single TODO

Extra Features

• View remaining TODOs for completion
• Filter TODOS by (All, Active - NOt completed yet - , completed )
• Remove All Completed TODOS

Project Structure

my-app/
├── public/
│   └── vite.svg
├── src/
│   ├── components/
│   │   ├── custom/
│   │   │   ├── App.jsx
│   │   │   ├── List.jsx
│   │   │   ├── ListItem.jsx
│   │   │   ├── CreateTodo.jsx
│   │   │   ├── EditTodoModal.jsx
│   │   │   ├── TodoMenuBar.jsx
│   │   │   └── Heading.jsx
│   │   └── ui/
│   │       ├── button.tsx
│   │       ├── card.tsx
│   │       ├── dialog.tsx
│   │       ├── input.tsx
│   │       └── label.tsx
│   ├── assets/
│   │   └── react.svg
│   ├── index.css
│   ├── main.jsx
│   └── lib/
│       └── utils.ts
├── components.json
├── eslint.config.js
├── index.html
├── package.json
├── pnpm-lock.yaml
├── README.md
├── tsconfig.json
└── vite.config.js