max-programming / max-todos Goto Github PK

A basic Todo app developed in React.

Home Page: https://maxtodos.netlify.app/

License: MIT License

HTML 3.64% CSS 0.56% Shell 0.04% TypeScript 95.76%

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

max-todos's Introduction

Max Todos 📝

🖊️ Todo App built using React and Material UI

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

It uses TypeScript, Context API to manage state, Material UI for design, Wouter for routing, localStorage to store todos and Dark Mode support with Dark Reader.

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
Set the dark mode as per user's system theme. More at #43
Improve the app using Lighthouse suggestions. More at #22

🏗️ To build it

Clone this repo by running git clone https://github.com/max-programming/max-todos.git.
cd into the max-todos folder and run npm i OR yarn.
Run npm start OR yarn start to start the development server.

Contributors ✨

Thanks goes to these wonderful people (emoji key):

_Steffan153 💻	_{Worachat Arunothaikrit} 💻	_{Megh Dedhia} 💻	_Lucas 💻	_{Nicholas Chan} 💻	_{Tushar Kashyap} 💻	_Dharmaraj 💻
_Chensokheng 💻

This project follows the all-contributors specification. Contributions of any kind welcome!

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

max-todos's People

Contributors

Stargazers

Watchers

max-todos's Issues

Adding authenication and storing the data in cloud

We could add firebase backend to it so that when the user add the data it gets stored in the DB and can be retrived any time

Need a small user interface

I prefer a small user interface, can I add it so that I can set the UI size?

Starring an item makes it jump, should animate

Meh

It would be nice if it would animate the moving to make it clearer. Dunno how but I'll search

Fixed bug when page refreshing checkbox didn't check

No confirmation before deleting to-dos.

Do you want to request a feature or report a bug?
Feature

What is the current behavior?
The to-do gets deleted permanently without confirmation.

What will resolve the issue?
Adding a yes/no confirmation feature before deleting the to-do permanently.

Add more Color themes

Add more color theme options and make it easy to switch between them.

Change color of starred todo text?

I want to distinguish between starred todo.

if(todo.starred) {
      styles.text.color = isDark ? "#ffe066" : "#3f51b5"
}

Shouldn't let the user create todo when they type nothing.

@max-programming When I try to use this app. I can add the todo item even tho I typed nothing. We should not let the user do that. I would like to work on that. Can I make a PR for this issue? 🙏

Automatically turn on dark mode with prefers-color-scheme

https://css-tricks.com/dark-modes-with-css/ and https://flaviocopes.com/javascript-detect-dark-mode/ will be useful

Service Worker error in console. (404 not found)

need to fix this error in Production mode. Can't find serviceworker file

Dragging items around loses the star organization

If you have some items starred at the top and start moving things in or out of the starred items, it loses the order of the stars at the top. It just needs to be resorted after every reorder.

Add Task Complete feature

Add a task complete feature that allows the completed task to be striked out (either make a strikethrough or change the colour) and list it at the bottom.

Convert this to a TypeScript project?

I am learning TypeScript and I love it so far. What do you think about converting this app to a TypeScript project?

@Steffan153 @worachatsun @m11dedhia @lucas-jg @tusharkashyap63 @Chensokheng @DharmarajX24

Cancelling the prompt clears the Todo while editing

The edit todo functionality was added by @ychan052 in #4 . Which is an awesome implementation. However it has one issue that I noticed. When we cancel the prompt, the todo gets cleared.
A GIF describing that is here