Skip to content
Submitted 25 days ago

Responsive Todo App built with CSS custom properties, Flexbox and ES6+

accessibility, animation, node, vite
P
LVL 2
Elsayed Bondok•70
@sbondok
A solution to the Todo app challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

What are you most proud of, and what would you do differently next time?

Great question! Here's an honest reflection:

  1. The modular architecture — Clean separation into todoStore, todoRenderer, themeToggle, and dragDrop modules. Each has a single responsibility and they communicate through callbacks. It's maintainable and easy to extend.

  2. The CSS variable theming system — Switching the entire app's appearance by toggling one data-theme attribute on <html>, with zero JavaScript touching individual element styles. Elegant and performant.

  3. Pixel accuracy — Comparing the screenshots against the original Figma designs, the result is very close — spacing, colors, typography, gradients, and responsive breakpoints all match.

  1. Test the production build earlier — The BASE_URL icon path bug would've been caught immediately if I'd run npm run build && npm run preview before the first push. Lesson: always verify prod before deploying.

  2. Use import for assets instead of public/ — Instead of putting images in public/ and referencing them with string paths (which Vite can't fully optimize), I should have used import iconSun from '../images/icon-sun.svg' — Vite would then hash, optimize, and resolve all paths automatically. No BASE_URL bug would've occurred.

  3. Add a package-lock.json check — The .gitignore didn't explicitly handle package-lock.json, which should be committed for reproducible CI builds.

  4. Accessibility testing — While I added ARIA labels and keyboard support for checkboxes, I should have done a full keyboard navigation test and screen reader pass. The drag-and-drop, in particular, needs an accessible alternative (e.g., move up/down buttons).

  5. CSS organization — The 5-file CSS split is good, but I could've been more consistent with naming (BEM methodology) and added a _variables.css partial specifically for tokens, separate from the reset.

Those are honest takeaways — the kind of things that make the next project better!

What challenges did you encounter, and how did you overcome them?

Here are the real challenges we hit during this build, and how each was solved:

  1. Vite Initialization in an Existing Directory Problem: npx create-vite@latest ./ cancelled because the directory already had files (README, images, design folder). Solution: Manually scaffolded the Vite project — created package.json, vite.config.js, and the src/ directory structure by hand. Sometimes the scaffold tools aren't flexible enough, and knowing what they generate lets you do it manually.
What specific areas of your project would you like help with?

Here are the key areas where community feedback would be most valuable:

Accessibility — Is the keyboard navigation sufficient? The drag-and-drop currently has no keyboard alternative (e.g., arrow keys to reorder). Would love feedback on screen reader experience with the ARIA labels.

CSS precision — How close is the implementation to the original Figma? Spacing, font sizes, and shadow values were estimated from the JPG designs. Any pixel-level corrections from someone with Figma Pro access would help.

Mobile touch drag UX — The long-press-to-drag interaction on mobile works but may not feel intuitive without visual cues. Is a drag handle icon needed? Should there be haptic feedback or a tooltip?

Performance at scale — The current approach re-renders the entire list on every change. With 100+ todos, would a virtual list or DOM diffing strategy be needed? Looking for real-world stress-test feedback.

Code organization — Is the 4-module JS split (store, renderer, theme, drag) the right granularity, or would the community suggest a different pattern for vanilla JS apps at this scale?

Code
Loading...

Please log in to post a comment

Log in

Community feedback

No feedback yet. Be the first to give feedback on Elsayed Bondok’s solution.

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord