Skip to content

ClaireCassidy/React-Redux-To-Do

Repository files navigation

React-Redux-To-Do

To-Do List app using Redux and React https://clairecassidy.github.io/React-Redux-To-Do/

Motivation

To practise front-end development, in particular React and Redux, by building a useful tool that requires data sharing between multiple distinct components as well as dealing efficiently with derived state.

Features

  • The app allows users to enter new to-do items via a form at the top of the page.
  • To-dos contain information about the text of the to-do, the date it was added, an optional expiry date, its completion status and whether or not the to-do is important.
  • The app provides an options menu that allows users to sort to-dos by date, expiry date, or importance.
  • Information about the to-dos can be modified after they are submitted. For example, important status can be toggled using the ☆/★ icon, and by hovering (or tapping on mobile) on either the to-do text or the expiry date, these too can be modified.
  • In addition to being able to delete to-dos individually, the user can mass delete expired or completed to-dos using the options menu.
  • The user has the option of automatically deleting completed to-dos or keeping them to review for later. The visibility of completed to-dos can also be toggled.
  • Submitted to-dos are paginated. The number of items per page can be modified by using the buttons at the foot of the page. The page can be changed by using the arrows or typing a page index in the current page input
  • For ease of demonstration, the app has a demo bar at the top of the page which can quickly add items to test all the pagination, sorting functionalities etc.
  • The app will allow users to enter new to-do items via a submit form.

Technologies:

  • React (Front end design)
  • Redux (State management)
  • CSS3

Written in HTML, CSS, JSX

About

To-Do List app using Redux and React

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published