Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Todo app | Vue 3 + TypeScript + Pinia + API

@RickvWijk1

Desktop design screenshot for the Todo app coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
3intermediate
View challenge

Design comparison


SolutionDesign

Solution retrospective


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

My main goal was to use a structured Way of Working so that any developer would understand the flow of my app. For this reason I'm proud of how I have handled state flow with Pinia.

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

It took some time before I came up with a solution for filtering that wasn't gonna be overcomplicated. At first I was trying something that was really just overengineering for my use case. From there I simplified my filter system.

What specific areas of your project would you like help with?

I rushed the responsive design part of the filter container. I would like to know how others would ideally handle responsivity for that specific div/container.

Community feedback

snhase 200

@snhase

Posted

Hello Rick,

Your solution looks great! Like how you added icon in front on the items to indicate there are draggable.

I just completed this challenge myself, how I handled the responsive filter was, to make the filter as reusable component and to show/hide component using display visibility attribute when the breakpoint changes. Hope this helps!

0

Please log in to post a comment

Log in with GitHub
Discord logo

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