https://github.com/pikuzamarie/react-todo-list

A todo list application made with React + Vite & Material UI library by MariePikuza
https://github.com/pikuzamarie/react-todo-list

material-ui react react-hooks vite

Last synced: 1 day ago
JSON representation

A todo list application made with React + Vite & Material UI library by MariePikuza

• Host: GitHub
• URL: https://github.com/pikuzamarie/react-todo-list
• Owner: PikuzaMarie
• Created: 2024-11-06T14:42:05.000Z (about 2 months ago)
• Default Branch: main
• Last Pushed: 2024-11-09T15:18:48.000Z (about 2 months ago)
• Last Synced: 2024-12-27T04:14:18.490Z (1 day ago)
• Topics: material-ui, react, react-hooks, vite
• Language: HTML
• Homepage: https://todo-list-app-marie.netlify.app/
• Size: 181 KB
• Stars: 1
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Todo List Application

This is a simple Todo List application built with React and Vite. The application allows users to add, delete, and filter todo items, track the count of items left, and clear all completed items. The UI is styled using Material-UI components.

## Screenshot

![image](https://github.com/user-attachments/assets/ec57dbf5-a0ec-4f82-865a-bbf38e781608)

## Deploy link

[Todo List App by PikuzaMarie](https://todo-list-app-marie.netlify.app/)

## Features

1. **Add and Delete Todo Items**

   - Users can add new todo items to the list.

   - Users can delete individual todo items.

   - Empty items cannot be added to the list.

2. **Filter Todo Items**

   - Users can filter the todo items to show all, active, or completed items.

3. **Show Count of Todo Items Left**

   - The application displays the count of todo items that are still active and not completed.

4. **Clear All Completed Items**

   - Users can clear all completed items from the list with a single click.

   - The "Clear Completed" button is disabled if there are no completed items.

## Getting Started

To get started with this project, follow these steps:

### Prerequisites

Ensure you have the following installed on your machine:

- Node.js (version 18 or higher)

### Installation

1. **Clone the repository**:

- `git clone https://github.com/yourusername/yourrepository.git`

2. **Go to the cloned repo**

- `cd yourrepository`

3. **Install dependencies**

- `npm install`

4. **Start the development server:**

- `npm run dev`

5. **Open deploy**

- Open your browser and go to http://localhost:3000 to see the application in action.

### Built With

- **React** - A JavaScript library for building user interfaces.

- **Vite** - A build tool that aims to provide a faster and leaner development experience for modern web projects.

- **Material-UI** - React components for faster and easier web development.

### Contributing

Contributions are welcome! Please fork this repository and submit a pull request for any improvements or bug fixes.

### Developped by PikuzaMarie, 2024