Skip to content

Latest commit

 

History

History
108 lines (78 loc) · 2.83 KB

README.md

File metadata and controls

108 lines (78 loc) · 2.83 KB

ToDo Application

This project is a React application that provides a ToDo list where users can manage their tasks. The application is built using React, TypeScript, Tailwind CSS, and localStorage for persistent data storage.

Features

  • Task Management:
    • Users can add new tasks.
    • Tasks can be marked as completed or active.
    • Tasks can be deleted.
    • Completed tasks can be cleared in bulk.
  • Task Filters:
    • Users can filter tasks to show all, active, or completed tasks.
  • Responsive Design:
    • The application adapts to different screen sizes and resolutions, including mobile and tablet devices.

Technologies Used

  • React
  • TypeScript
  • Tailwind CSS

Getting Started

To get a local copy up and running, follow these steps:

Prerequisites

  • Node.js and npm installed on your machine.

Installation

  1. Clone the repository:

    git clone https://github.com/eugenepokalyuk/react-mindbox.git
cd mindbox

  2. Install dependencies:

    npm install

  3. Start the development server:

    npm run start

  4. Open the application:

    Open your browser and navigate to http://localhost:3000.

Project Structure

src/
├── components/
│   ├── App/
│   │   ├── App.test.tsx
│   │   └── App.tsx
│   ├── TaskInput/
│   │   ├── TaskInput.test.tsx
│   │   └── TaskInput.tsx
│   ├── TaskList/
│   │   ├── TaskList.test.tsx
│   │   └── TaskList.tsx
│   ├── TaskItem/
│   │   ├── TaskItem.test.tsx
│   │   └── TaskItem.tsx
│   ├── Filters/
│   │   ├── Filters.test.tsx
│   │   └── Filters.tsx
├── types/
│   └── types.ts
├── index.tsx
├── styles.css

Explanation of Key Files

  • src/components/App/App.tsx: The main component that holds the state and renders the application.
  • src/components/TaskInput/TaskInput.tsx: Component for adding new tasks.
  • src/components/TaskList/TaskList.tsx: Component for displaying the list of tasks.
  • src/components/TaskItem/TaskItem.tsx: Component for individual task items.
  • src/components/Filters/Filters.tsx: Component for filtering tasks.
  • src/types/types.ts: Type definitions for the application.

Comments

  • The application uses localStorage to persist tasks between page reloads.
  • Tailwind CSS is used for styling the application, ensuring a responsive and clean design.
  • The application is designed to provide a smooth user experience with real-time updates.

Deployment

To build the application for production, run:

npm run build

The built files will be in the build directory, which can be deployed to any static hosting service.