Submitted 11 days ago

ToDo App made with React and Tailwind

Bernardo Poggioni• 5,140

@R3ygoski

Preview site(opens in new window)View code(opens in new window)

This is a solution for...

Todo app

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?

EN - I'm proud of having created a subtasks system that was not part of the main challenge. This gave me an extra challenge to resolve, and it made me think about how I could solve this problem and implement it. If I were to do it differently next time, I would focus on maintaining better organization.

PT - Eu estou orgulhoso de ter criado um sistema de criação de subtasks que não tinha sido proposta pelo desafio, me dando um desafio extra a ser resolvido que eu teria que descobrir como implementar. E o que eu faria de diferente da próxima vez seria focar mais na organização.

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

EN - I encountered two challenges, the first one was how to implement CRUD in React, because it's very different from CRUD in Vanilla, as in React we need to always update the Virtual DOM, so a simple .push() method in an Array would not be enough. And the second one was how to create and implement the subtasks system, but it was more simple than the first one, because the logic is almost the same.

PT - Eu encontrei dois desafios, o primeiro foi como implementar um CRUD no React, porque o ele é bem diferente do CRUD no Vanilla, no React precisamos de sempre atualizar o Virtual DOM, então um simples método de Array .push() não seria o suficiente. E o segundo desafio foi como desenvolver e implementar o sistema de subtasks, mas ele foi bem mais simples do que o primeiro, devido a lógica ser quase a mesma.

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

EN - Honestly, none. But any feedback is welcome.

PT - Sinceramente, nenhuma. Mas qualquer feedback é bem-vindo.

Community feedback

Ismael• 30

@ismeh

Posted 11 days ago

Hello @R3ygoski, good solution!

I have not seen your code, I just tested the app.

Just two tips about the subtasks.

The text "Type here..." should be a place holder instead of real text.
The subtask maybe should have a little buttom to complete them.

Bernardo Poggioni• 5,140

@R3ygoski

Posted 10 days ago

Hello Ismael, thanks for checking my app.

Regarding what you mentioned about using a placeholder instead of actual text, it wouldn't work in my case because that field isn't an <input/>. In fact, the input only starts to exist within the DOM tree when you click on the text, and after typing the new text, that <input/> disappears from the DOM again.

About creating a button to complete subtasks, that was something I initially planned to do, but I concluded it wasn't that necessary. However, it might have been a good idea to have a system in place to complete subtasks.

And again, thank you for checking out my app and providing feedback.

Please log in to post a comment

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