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

Simple to-do list application designed to help users manage their tasks efficiently. It allows users to add new tasks, mark or deselect tasks as completed, and delete tasks from the list
https://github.com/martonpaulo/react-todo-list

hooks react rocketseat todo todo-list typescript

Last synced: about 2 months ago
JSON representation

Simple to-do list application designed to help users manage their tasks efficiently. It allows users to add new tasks, mark or deselect tasks as completed, and delete tasks from the list

• Host: GitHub
• URL: https://github.com/martonpaulo/react-todo-list
• Owner: martonpaulo
• License: mit
• Created: 2024-12-17T17:35:35.000Z (about 2 months ago)
• Default Branch: main
• Last Pushed: 2024-12-17T17:57:29.000Z (about 2 months ago)
• Last Synced: 2024-12-17T18:41:56.442Z (about 2 months ago)
• Topics: hooks, react, rocketseat, todo, todo-list, typescript
• Language: CSS
• Homepage: https://martonpaulo.github.io/react-todo-list/
• Size: 52.7 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# React To-Do List



  

    

  


  

    

  

  

    

  

  

    

  





  

    

  






This project is a simple **to-do list** application built with React, designed to help users manage their tasks efficiently. It allows users to add new tasks, mark or deselect tasks as completed, and delete tasks from the list. Additionally, the app displays the progress of task completion, providing an overview of the user's productivity. The project demonstrates key React concepts such as state management, immutability, lists and keys, props, and componentization.









Inspired by a tutorial from [RocketSeat](https://www.rocketseat.com.br/).

Initial design available on [Figma](https://www.figma.com/design/LEqdd2mzfcSPJn0LnT1Vbl/React-To-Do-List).

This is a sleek and modern feed application built using the latest web technologies: **React**, **TypeScript**, **Vite** and **CSS Modules**.

## 🌐 Live Project

This project is integrated with the GitHub Pages workflow. Once a commit is made, it is deployed and hosted by GitHub Pages.

Live project at: [martonpaulo.github.io/react-todo-list](https://martonpaulo.github.io/react-todo-list)

For more information about me and other projects, check out: [martonpaulo.com](https://martonpaulo.com)

## 🚀 Getting Started

To start working on this project, clone the repository and install the dependencies:

```bash

git clone https://github.com/martonpaulo/react-todo-list.git

cd react-todo-list

npm install

```

## 📜 Available Scripts

In the project directory, you can run the following scripts:

- `npm run dev` - Start the development server at `http://localhost:3000/react-todo-list`

- `npm run build` - Build the project for production, outputting to the `dist` folder

- `npm run lint` - Lint the project using ESLint

## 🔧 To Be Implemented

Future improvements to consider:

- [x] Add a YAML workflow and host the project on GitHub Pages 🌐

- [x] Include a license in the project 📜

- [x] Add a favicon 🌐

- [x] Integrate Google Fonts 🌐

- [x] Add a project description 📝

- [x] Write the "About" section on GitHub 📄

- [x] Implement all project functionalities 🛠

- [x] Fix label updates when marking tasks as completed

- [x] Change the cursor to a pointer when hovering over a task

- [x] Adjust task height for single-line text

- [x] Fix TaskItem size when marking tasks as completed

- [x] Style the Checkbox component 🎨

- [x] Configure ESLint/Prettier to enforce import order

- [x] Add a screen recording to the README 📹

- [x] Include the project in the portfolio 📂

## 📄 License

This project is licensed under the MIT License. See the [LICENSE](LICENSE) file for more information.