/react-mobx-mui-todo-demo

React Todo demo using MOBX, MUI, Tailwind and Vite to build

Primary LanguageTypeScriptMIT LicenseMIT

To Run the App

  • Install dependencies: npm install
  • Run Node server: npm run start:server
  • Run React app: npm run dev

Implementation details

The app is built using React, socket.io, TailwindCSS and ShadCN/UI

User Stories

  • (required): I as a user can create to-do items, such as a grocery list.

  • (required): I as another user can collaborate in real-time with user - so that we can (for example) edit our family shopping-list together.

  • (developer): I as a user can use the App on both a Desktop and Mobile client and it will adjust accordingly.

  • (developer): I as a user can mark all todos as complete using one button.

  • (developer): I as a user can only have one todo item in edit mode at a time.

  • (developer): I as a user can only add a todo item consisting of two or more characters.

  • (developer): I as a user can delete a todo item by pressing the delete button.

  • (developer): I as a user on a desktop device can click the theme button and handle the application theme.

  • (developer): I as a user on a desktop device can double click on a todo item to edit it.

  • (developer): I as a user on a mobile device can long press on a todo item to edit it.

  • (developer): I as a user on a mobile device can long press anywhere else to open a dialog to handle the different application themes.

TODOS

  • Make a production ready build
  • Release to production
  • Write tests
  • Persist Todos on the Node server
  • Implement drag and drop sorting of Todos
  • Login to access your todos.
  • Share todo list with others through a sharing link.
  • Filter todos by status: All, Active, Completed.

https://github.com/orgs/react-hook-form/discussions/8622