frontendmentor-todo-app-react

KO | EN

gitlite — search

#javascript #python #hacktoberfest #llm #golang #android #linux #nodejs #macos #java #windows #awesome #pytorch #ios

frontendmentor-todo-app-react

(★ 9)

Frontend Challenge: Todo app built with ReactJS

frontendmentor-todo-app-react Latest Version Download

Download Latest Version (.zip)

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# Frontend Mentor - Todo App

This project is a challenge by [Frontend Mentor](https://www.frontendmentor.io).

![Todo App](https://raw.githubusercontent.com/mileine/frontendmentor-todo-app-react/main/src/assets/desktop-preview.jpg "Todo App - Design preview")

## Challenge description

Users should be able to:

- View the optimal layout for the app depending on their device's screen size
- See hover states for all interactive elements on the page
- Add new todos to the list
- Mark todos as complete
- Delete todos from the list
- Filter by all/active/complete todos
- Clear all completed todos
- Toggle light and dark mode
- Bonus: Drag and drop to reorder items on the list

View the full description [here](https://www.frontendmentor.io/challenges/todo-app-Su1_KokOW).

## About the app

### Features

All the functionalities described on *Challenge description* section were implemented.

The additional behaviours below were also implemented:

- All the basic functionalities are accessible on the keyboard
- The task lists is saved on localstorage

### Tools

- ReactJS (Create React App)
- React Beautiful DnD
- SASS

### Known issues

The [report](https://www.frontendmentor.io/solutions/todo-app-using-reactjs-I9UzE1vG2/report) generated on Frontend Mentor website lists 15 HTML issues that were not fixed.

## How to run

1. Clone this repo.

2. Run `yarn install`.

3. Run `yarn start`.

## Demo

View [demo](https://frontendmentor-todo-app-react.vercel.app/).

## References

Here's a list of useful resources I learned a lot from when working on this challenge:

- [Gradient Borders in CSS](https://css-tricks.com/gradient-borders-in-css/)
- [How I Theme My React App With Sass](https://www.webtips.dev/how-i-theme-my-react-app-with-sass)
- [Sass Essential Training](https://www.linkedin.com/learning-login/share?forceAccount=false&redirect=https%3A%2F%2Fwww.linkedin.com%2Flearning%2Fsass-essential-training%3Ftrk%3Dshare_ent_url)
- [Sass mixin to have multiple theme based background images](https://medium.com/@traumastronaut/sass-mixin-to-have-multiple-theme-based-background-images-e278439299e6)
- [Session Storage and Local Storage in React](https://www.robinwieruch.de/local-storage-react)
- [How to Add Drag and Drop in React with React Beautiful DnD](https://www.freecodecamp.org/news/how-to-add-drag-and-drop-in-react-with-react-beautiful-dnd/)

frontendmentor-todo-app-react

frontendmentor-todo-app-react Latest Version Download

Today's picks

Was this content helpful?

Recent Feedback

frontendmentor-todo-app-react

frontendmentor-todo-app-react Latest Version Download

Today's picks

Was this content helpful?

Recent Feedback

Download README