https://github.com/max-programming/max-todos

A basic Todo app developed in React.
https://github.com/max-programming/max-todos

dark-mode hacktoberfest hooks material-ui react react-17 react-hooks react-todo-app todo-list todolist typescript typescript-react

Last synced: 3 months ago
JSON representation

A basic Todo app developed in React.

• Host: GitHub
• URL: https://github.com/max-programming/max-todos
• Owner: max-programming
• License: mit
• Created: 2020-04-24T15:23:12.000Z (almost 5 years ago)
• Default Branch: master
• Last Pushed: 2023-01-07T05:03:13.000Z (about 2 years ago)
• Last Synced: 2024-04-28T06:15:22.004Z (9 months ago)
• Topics: dark-mode, hacktoberfest, hooks, material-ui, react, react-17, react-hooks, react-todo-app, todo-list, todolist, typescript, typescript-react
• Language: TypeScript
• Homepage: https://maxtodos.netlify.app/
• Size: 3.07 MB
• Stars: 38
• Watchers: 3
• Forks: 19
• Open Issues: 21
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        



  Max Todos 📝





  🖊️ Todo App built using React and Material UI







  



  

[![All Contributors](https://img.shields.io/badge/all_contributors-8-orange.svg?style=flat-square)](#contributors-)



## This is a super simple Todo App built using React.js and styled using Material UI.

It uses [TypeScript](https://www.typescriptlang.org/), [Context API](https://reactjs.org/docs/context.html) to manage state, [Material UI](https://material-ui.com/) for design, [Wouter](https://github.com/molefrog/wouter) for routing, [`localStorage`](https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage) to store todos and Dark Mode support with [Dark Reader](https://darkreader.org/).

### You can view it here: https://maxtodos.netlify.app/

## 😃 You can:

- ➕ Add todo

- 🖊️ Edit todo

- 🗑️ Delete todo

- ↕️ Reorder the todos by dragging them

- 🕶️ Enable dark mode

## 🧠 Features in mind

- [ ] Use [Material UI's Dark Mode](https://material-ui.com/customization/palette/#user-preference)

- [ ] Set the dark mode as per user's system theme. More at [#43](https://github.com/max-programming/max-todos/issues/43)

- [ ] Improve the app using Lighthouse suggestions. More at [#22](https://github.com/max-programming/max-todos/issues/22)

## 🏗️ To build it

1. Clone this repo by running `git clone https://github.com/max-programming/max-todos.git`.

2. `cd` into the `max-todos` folder and run `npm i` OR `yarn`.

3. Run `npm start` OR `yarn start` to start the development server.

## Contributors ✨

Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):

  

    
Steffan153
💻

    
Worachat Arunothaikrit
💻

    
Megh Dedhia
💻

    
Lucas
💻

    
Nicholas Chan
💻

    
Tushar Kashyap
💻

    
Dharmaraj
💻

  

  

    
Chensokheng
💻

  

This project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!

❤️ Feel free to create issues and contributions for features or bugs to this project.