filipjakov / mb-todo-list

A simple TODO list app

TODOapp

A simple TODO app

Editor

VSCode usage preferred:

• .vscode/extensions.json has preffered plugins
• .vscode/settings.json hold the setting for the project (formatting on save, linting on change...)

Tech Stack

• Framework - Next.js + Preact (more lightweight)
• Typescript
• Styling - CSS Modules (preprocessed via PostCSS/PostCSS-preset-env) and classnames
• Animations - Pure CSS + Framer Motion
• eslint + prettier
• husky for git hooks interceptions:
  • lint-staged -> running linters and prettier against staged git files
  • commitizen (conventional commit messages)
• Next bundle analyzer for dependencie analysis

Running locally

1. Clone the repository
2. Run npm ci
3. Dev mode: npm run dev
4. Production mode: npm run build && npm run start
5. The webpage will be available at http://localhost:3000

Deployment

The webpage is live and available at: https://todo-filipjakov.vercel.app/. Just push to main (origin) to reflect new changes.

Features

Tested on macOS 12.1 -> Desktop Safari v15.1, Firefox v100, Chrome v100, Mobile Chrome v100

• Requirements:

  • every item in the list has a name and optional due date
  • items can be marked as “done”
  • implement undo/redo functionality. Every action (add, edit, delete, mark as done…) should be undoable/redoable. This functionality has to be custom developed in full without using any library that might have this feature built-in
  • add keyboard shortcut support for all actions. You can implement any key combination of your choice -> tested only on macos (cmd+z undo, cmd+shift+z redo)
  • implement item reordering with drag ‘n’ drop
  • item reordering should be undoable/redoable as well as other actions

• Additional features:

  • Light/dark OS preference (no toggle) 🌙
  • Mobile friendly & lightweight 🪶
  • TODO list reordering and animations 💫 (NOTE: seems like animations are at bit laggy/buggy for some desktop browser, but work as expected on mobile. The library authors (framer-motion) are working on it -> could be preact thing?)
  • List persisted across sesions 💾 (local storage)
  • Looks beautiful ✨

Roadmap

- dark mode toggle

• translations

- user login + user usermanagment -> store user preferences + todo entries in a database

Badges

License

MIT

Authors

• @filipjakov

FAQ

Why is this app so awesome?

Guess we'll never know