Your average todo app but with quite a few functionalities added to it, such as :
- Pagination
- Database to handle list items
- Toast for a better user-system communication
- Dark mode
- Task syncing, and much more...
Note: mySQL is deployed on planetscale's free tier plan which will put the database to sleep after some time, rendering it unusable.
- Acknowledgement
- Dependency Diagram
- Links
- Tech used
- Todo
- Improvements I could have made
- Known unfixable issues
- ReactJS for frontend
- Netlify for hosting frontend
- NodeJS for backend
- ExpressJS for routing
- mySQL as database
- PlanetScale for hosting mySQL database
- Cyclic for hosting backend
- Adjust margins for top heading.
- Add a backend to store the todo data
- Add a check if theme and todo exist in the localstorage because if they don't, Page won't load unless refreshed. Look more into this.
- Idea: put a switch on the header to use local storage or remote database according to user preference.
- Don't wait for database on initial load. Show a skeleton instead on the place of all the todo items.
- Add a mui snackbar for when connection with database could not be established.
- Add link to backend in readme and vice versa.
- Put catch blocks on the fetch api throughout the code.
- Add pagination.
- Pagination shouldn't break filter system. Check if it does.
- Pagination should auto-switch to the previous page when last item on the current page is deleted.
- Setup corn on the backend.
- Add function to sycn everything with server with a manual button press or with a snackbar prompt asking to do so on data inconsistency.
- MySQL database is the same for every user. Implement different todo items for different useres.
- Add time and data to the last time a user accessed the server and delete data if user hasn't accessed anything in over X time. MySQL events.
- If connecting to server fails, try after set time.
- Fix bug encountered when item text length exceeds a certain characters.
- Add tooltip on button group next to top level heading.
Could have :
- Used useReducer for updating, deleting, adding the todos.
- Used context API to manage props.
- Used sockets in the backend for talking with the database.
Issues that have come to my attention but will not be fixed for one reason or another.
- The list order will change on refresh due to the database having its own sequence of items. Know how to fix it? Let me know
- When item is checked/ unchecked while user has selected any filter option other than 'all', the wrong item is marked as done/ not done.