TickDone React

A modern, responsive Todo web application built with React, TypeScript, and Vite. Manage your todos efficiently with deadlines, status tracking, and filtering capabilities.

Features

• ✅ Add Todos: Create new todos with optional deadlines
• 📅 Deadline Management: Set and track due dates for your todos
• 🔄 Status Toggle: Mark todos as complete or incomplete
• 🗑️ Delete with Confirmation: Safely remove todos with a confirmation dialog
• 🔍 Filtering: View all, active, or completed todos
• ⚠️ Overdue Detection: Automatically highlight overdue todos
• 📱 Responsive Design: Works seamlessly on desktop and mobile devices
• ⚡ Fast Performance: Built with Vite for lightning-fast development and builds

Tech Stack

• Frontend: React 19, TypeScript
• Build Tool: Vite
• Styling: CSS Modules
• Linting: ESLint with TypeScript support

Getting Started

Prerequisites

• Node.js (version 18 or higher)
• pnpm (recommended) or npm

Installation

1. Clone the repository:

   git clone <repository-url>
   cd tickdone-react

2. Install dependencies:

   pnpm install
   # or
   npm install

3. Start the development server:

   pnpm dev
   # or
   npm run dev

4. Open http://localhost:4000 in your browser.

Build for Production

pnpm build
# or
npm run build

Preview Production Build

pnpm preview
# or
npm run preview

API Integration

This frontend application expects a REST API backend running on the same domain with the following endpoints:

• GET /todos - Fetch all todos
• POST /todos - Create a new todo
• PUT /todos/:id - Update a todo
• DELETE /todos/:id - Delete a todo

Todo Object Structure

interface Todo {
  id: number;
  taskName: string;
  deadline: string | null; // ISO date string
  done: boolean;
}

Project Structure

tickdone-react/
├── public/
│   └── favicon.svg
├── src/
│   ├── assets/
│   ├── components/
│   │   └── Todo/
│   │       ├── Todo.css
│   │       ├── Todo.test.tsx
│   │       └── Todo.tsx
│   ├── test/
│   │   ├── server.ts
│   │   └── setup.ts
│   └── main.tsx
├── package.json
├── vite.config.ts
├── index.html
└── README.md

Scripts

• dev - Start development server
• build - Build for production
• lint - Run ESLint
• preview - Preview production build

Contributing

1. Fork the repository
2. Create a feature branch
3. Make your changes
4. Run linting: pnpm lint
5. Commit your changes
6. Push to the branch
7. Open a Pull Request

Screenshot

This project is private and not licensed for public use.

License

This project is licensed under the MIT License.