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

First challenge with React^

Raymart Pamplonaβ€’ 16,140

@pikapikamart

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


Hello!! This is my 21st challenge and my first challenge using React!!

I have been studying React right now, mostly google-ing things out since I don't have any course about it hahaha but managed to learn even in small increments.

This challenge was fun to create, I want to add other animation but useEffect really did make my head hurt a lot, so yeah, didn't add other but managed to add like in the design. But as I go coding this challenge, useEffect keeps making more sense and so yeyy.

Also, why does it keeps prompting that it needs the props that I used inside it, as well as the other functions that I used. It would be counterintuitive to include them in the dependency array since I am not firing the effect from those, but it keeps telling me put them inside. Then if I put the props inside, it says now it needs to be destructured, then when I desctructured it in the component, it now needs to be inside a useCallback. I have a lot to test.

I also implemented my own drag and drop, didn't want to use other modules because it is my first time creating a drag and drop, it is beneficial to first create it as much as you can before jumping to other solution. I got it right :>>

There would be a lot of improvements to be done and if you can point other things, I would really appreciate it. Thank you for checking it out!!

Community feedback

Ven Gallardoβ€’ 90

@Gepeet

Posted

idol na talaga kita dre!

1
Marlon Passosβ€’ 940

@MarlonPassos-git

Posted

hello pikachu, great job, i really liked the smoothness that everything happens on the page, that animation with the sun and the moon is really cool. One thing I saw that you could do to improve would be:

  • the history of the tasks are stored, but the state of the screen is not. For example if I have the light theme and I refresh the screen it goes to the dark theme. It would be nice to have the user theme stored as well to avoid confusion
1

Raymart Pamplonaβ€’ 16,140

@pikapikamart

Posted

@MarlonPassos-git Awesome that you liked it!

Yep, for some reason I haven't implemented that, but I will sure to add that since I am planning to refactor the whole app just to make it more optimized.

1
Vinh Nhanβ€’ 160

@vinhyan

Posted

Impressive!!! Though I can not drag the tasks using my phone (touchscreen). But overall looks so cool. I like the night mode and the animation when selecting the tasks 😊

0

Raymart Pamplonaβ€’ 16,140

@pikapikamart

Posted

@vinhyan thank youuu, to be honest I don't have any idea on how to drag and drop it via touchscreen hehe

0
Roc Tanweerβ€’ 2,500

@RocTanweer

Posted

Hello πŸ‘‹ been a long time since we talked

Nice seeing you doing react..! I started react too

I love the way you coded and there were a lot of things to learn for me 😊

The way you worked for accessibility was impressive..!

Hope we all learn react and other framework by heart

And Good Luck for your react journey..!

See ya..! πŸ‘‹

PS: You may create a custom hook to deal with LS. Web development simplified explained it very well at YT

0

Raymart Pamplonaβ€’ 16,140

@pikapikamart

Posted

@RocTanweer Hey, awesome that you liked the app and also, good luck as well in learning react!!

I haven't thought about creating a custom hook for that one, I just made a function that deals with the actions. Might want to look at what you said to test things out. Thank you!!

0

@sagun-k

Posted

Your project is awsome

how did you start with the the react, when should I start react as I am getting confused what knowledge should i have to start react please suggest me sir.

0

Raymart Pamplonaβ€’ 16,140

@pikapikamart

Posted

@sagun-k Hey. Well to be honest I am just kind of new to using React.

For me, I started web dev last December. So I spent all my 7 months just using Scss and vanilla js so that I could grasp those fundamentals and also made some web apps that uses backend, mainly on node and mongodb.

So when should you learn React. I mean that question is really hard to answer right. But if you know that you are good and know how js works, creating logics, being flexible and most importantly, being able to structure your html well, that is really important because accessibility is a priority. If you know that you are well enough of these, then you can maybe now learn a framework like React.

But hey, who knows right. Maybe taking React now is a good way or maybe doing more months of just pure js, css and html, just to strengthen that frontend knowledge.

As for resources, I don't really have any. I just google things and I also watched one React crash course in youtube. It is from Academind channel, react crash course 2021.

For me, even if it is crash course, it is really good. Atleast I have the idea and I can just search and learn from the rest

0

@sagun-k

Posted

@pikamart thanks sir for your time sir ,i have been learning html css js since last year and have been learning tailwind css framework for more than a months ,i am quite ok with js but i am not that well. I will keep your suggestions in my mind and work on more projects and increas the skills in js more . Thanks sir

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