A simple TODO app
VSCode usage preferred:
.vscode/extensions.json
has preffered plugins.vscode/settings.json
hold the setting for the project (formatting on save, linting on change...)
- 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
- Clone the repository
- Run
npm ci
- Dev mode:
npm run dev
- Production mode:
npm run build && npm run start
- The webpage will be available at
http://localhost:3000
The webpage is live and available at: https://todo-filipjakov.vercel.app/. Just push to main
(origin) to reflect new changes.
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 ✨
- dark mode toggle
- translations
- user login + user usermanagment -> store user preferences + todo entries in a database
Guess we'll never know