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

Fullstack Todo App with Drag 'n Drop | MEVN Stack

P
Remus D. Buhaianuβ€’ 3,145

@Miculino

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


Hey guys!

My first fullstack project is finally here and I'm excited to share it with you. There are still a lot of improvements that can be made in terms of code reusability and feature implementation.

What are your thoughts on the project / code? How could I implement better animations? (especially for when the todos render on the page / are added to the list)

Thanks in advance!

Community feedback

P
Matt Studdertβ€’ 13,611

@mattstuddert

Posted

Very nice work on this challenge, Remus! Your solution looks excellent, vs the design and the animations you've added look smooth and well thought out.

My primary piece of feedback would be to focus on building access interfaces. At the moment, you're using non-interactive elements to trigger events. This means anyone not using a mouse/trackpad to navigate can't interact with the app. Instead, use interactive elements, like a or button elements to trigger actions. Buttons are perfect for events like toggling the theme and the state of the todos, as you're staying on the same page. Anchor tags are best when you're expecting to navigate elsewhere.

I'd also recommend reviewing the responsiveness of the project. The layout looks great, but the todo list jumps to full-width pretty early, and the All/Active/Complete toggles at the bottom get bunched up.

I hope that helps. Keep up the incredible work! Were there any big lessons you learned while building this project?

Marked as helpful

0

P
Remus D. Buhaianuβ€’ 3,145

@Miculino

Posted

@mattstuddert Thanks a lot for the constructive feedback!

I did want to use a / button in the beginning, but I probably got distracted and forgot about them altogether. As for the responsive side, thanks a lot for pointing those issues out too. I'll try to fix them asap.

In terms of big lessons, I learned how to have the frontend technologies communicate with the backend ones, implement some best practices that I've rarely used to write better, cleaner, and more structured code and work with MongoDB!

1
P
Matt Studdertβ€’ 13,611

@mattstuddert

Posted

@Remus432, you're welcome! It sounds like you learned loads, which is awesome. Keep it up! πŸ‘

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