Submitted 16 days ago

Kanban task management web app with vanilla HTML, CSS and JS

Michael•150

@ristoranteQF

Preview site View code

This is a solution for...Kanban task management web app

HTML
CSS
JS

5guru

Design comparison

SolutionDesign

Solution retrospective

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

I'm not proud of shit. I'm not satisfied with the structure of my code, it is not well organised, it is chaotic and probably in a month I will also forget what the hell I wrote in there. xD

At least this app is functional.

Next time I would really think about the structure of my code so that I can make it more modular, readable, clean and separate concerns.

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

I encountered a few logical bugs and synchronizing the api data with the ui after each interaction. I simply used AI because otherwise I would have probably lost my mind and finish the project in at least a month. xD

I'm not looking to cheat with ai, I simply view this as a very useful tool that helps me learn faster right now because I'm a beginner.

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

I would like to get help on the structure of the code. I want to separate concerns and have a clean code following this pattern: API data functionality, logic functionality and UI rendering.

Also, there is still a small bug on the rendering aspect. The code won't sync the left subtask count ui in each task card with the api data after relevant interactions.

Community feedback

Nathan Molina•280
@NatentadoPosted 16 days ago
I think you jumped a few steps on your learning, trying challenges like achieving this kind of project with pure js its a good thing but not when you need to reinforce your fundamentals first, like you js file has more than 1,300 lines of code and most of them are redundant, so i have a few tips for you:

Roll back to less hard challenges (junior/intermediate).

Reinforce Css like:

Variables

Responsiveness

BEM or other patterns

CSS performance

Reinforce some logical fundamentals like:

DRY pattern

Components

Separation of concerns

Code splitting

Then choose a js Framework to learn along advanced js patterns like:

React

Vue

Angular

After more study and projects maded, i think you can adventure to advanced and guru challenges from this platform and ace it like pro without the necessary need of AI, or just to help you with things you already know or worked with it before
Marked as helpful
1
Michael•150
@ristoranteQFPosted 16 days ago
@Natentado I will definitely do everything you mentioned. I still have a lot to learn. Thank you for your feedback!
0

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