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

👾 Animated Interactive Comments | React | Dark Mode | Switch Users 👾

#animation#fetch#framer-motion#react#axios
P
visualdennis 8,295

@visualdenniss

Desktop design screenshot for the Interactive comments section coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
3intermediate
View challenge

Design comparison


SolutionDesign

Solution retrospective


🔥 Here is my 30th Challenge! This was fun and tricky! 🔥

  • Built in React and made use of Context API for state management.
  • App is fully responsive for all devices.
  • As usual the data JSON is being hosted online on npoint.io so i fetch using axios. Sometimes the server is overloaded, you might need to refresh couple times.

I've added some more features to the challenge:

  • You can switch between logged in users by clicking avatars top-right. So you can create comments, replies from perspective of different users.
  • I've developed a VOTE system (was the trickiest part for me), so multiple users can vote, change their votes and when switched users, the vote scores and the users vote are persisted between user switches. (Votes are stored as an object)
  • Added some cute loader animation on initial load.
  • You can toggle Dark/Light modes.

This is still a work-in-progress, next i plan to refactor my code using useReducer and tidy up the function, improve accessibility/semantic stuff, localStorage implementation, perhaps a notification system for users when they are being replied to, a function for real/dynamic timestamps.

If anyone interested in how i've built this step by step, i recommend checking MY WORKFLOW

Hope you guys like the final result ♥️

Community feedback

P

@mohamed-abdelahi-haibelty

Posted

Hey, you've did great work there. It would be a great idea to add a form validation so user can't send an empty message

Marked as helpful

1

P
visualdennis 8,295

@visualdenniss

Posted

@mohamed-abdelahi-haibelty Hello,

thanks for you feedback. Yes, that's a good idea to add next. Thanks!

1
Darionas 320

@Darionas

Posted

Hey. I like it. One think especially 'desktop-design-breakdown.jpg'. Could I borrow this method from you?

Thanks in advance. Happy coding ;)

1

P
visualdennis 8,295

@visualdenniss

Posted

@Darionas Hey thank you! happy to hear you liked it. Yea sure, feel free to use the same method of component structure, glad it helps! :)

1
Darionas 320

@Darionas

Posted

@visualdenniss Hey. Thanks. I have started the same project. It will be based on html, css, javaScript. Some ideas I am going to borrow from you ;)

Thanks Happy coding ;)

1
P
visualdennis 8,295

@visualdenniss

Posted

@Darionas Looking forward to it, good luck!

0

@ahsan1280khan

Posted

Super nice Love it

1

P
visualdennis 8,295

@visualdenniss

Posted

@ahsan1280khan Merci!

1

@davidpagebyte

Posted

I really like how you switch users! I was looking for ideas for it

0

P
visualdennis 8,295

@visualdenniss

Posted

@davidpagebyte Happy to hear that my solution has inspired you. Thanks a lot and happy coding!

0
Kehinde 660

@jonathan401

Posted

A wonderful solution 🎊🎊. This is my first time hearing about npoint.io. I'll try using it in my solution to this challenge. Love the extra features ❤️❤️

0

P
visualdennis 8,295

@visualdenniss

Posted

@jonathan401 Hey, thanks a lot! Sure, npoint.io seemed to work for me so far, sometimes server is a bit slow tho. There is also https://jsonbin.io/ you can experiment with both and see what works best for you. Good luck!

1

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