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

Responsive Results Card in React + Framer Motion + Axios + Cloudinary

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

@visualdenniss

Desktop design screenshot for the Results summary component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


I've spent more than a half day on this newbie challenge :D Because i've added up quite a bit on the given challenge to practice some more stuff, so i've built this component by using React, uploaded image assets to cloudinary CDN network, uploaded JSON Data to npoint.io to host my data and fetch it using axios library. I've used Framer-Motion to animate the whole thing. I've learned how i can export/import motion.div props from an external JS file and use/manipulate them by destructuring. Pretty happy with the result :)

Community feedback

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