TODO App (React + TypeScript + Mantine)

A modern todo application built with React, TypeScript, and Mantine UI.

This project helps users manage daily tasks with priority labels, filtering, inline editing, and local persistence.

What this project does

• Create todos with a title and priority (low, medium, high)
• Mark todos as completed/uncompleted
• Edit todo title and priority inline
• Delete todos
• Filter by all, completed, or remaining
• Persist todos in localStorage so data survives refreshes
• Show a congratulatory message when all todos are completed

Tech stack

• React 19
• TypeScript
• Vite
• Mantine (@mantine/core)
• ESLint

Project structure

src/
|-- App.tsx
|-- main.tsx
|-- index.css
|-- components/
|  |-- CongratsMessage.tsx
|  |-- FilterBar.tsx
|  |-- TodoList/
|     |-- TodoInput.tsx
|     |-- TodoItem.tsx
|     |-- TodoList.tsx
|-- types/
    |-- todo.ts

Local setup

Prerequisites

• Node.js 20+ (or current LTS)
• Bun (recommended for this repo)

Install dependencies

bun install

If you prefer npm:

npm install

Run the project

Start dev server:

bun run dev

Build for production:

bun run build

Preview production build:

bun run preview

Lint the code:

bun run lint

How it works

• App state is managed in src/App.tsx
• Todos are read from localStorage on startup
• Any change to todos is synced back to localStorage with useEffect
• UI is composed from small focused components in src/components

Notes

• This is a frontend-only app (no backend/database)
• Data is stored per-browser in local storage