Skip to content
Submitted about 2 years ago

Responsive Notifications in React + Cloudinary + Animation + Axios

animation, fetch, framer-motion, react, axios
P
visualdennis•8,395
@visualdenniss
A solution to the Notifications page challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

In this challenge, i've tried to build it as dynamic as possible. JSON Data is hosted online for free, which includes links to image assets that are hosted on Cloudinary CDN Platform. In my app, i'm fetching the data using axios library. Finally, i've added some little animation using framer-motion. Hope you guys like my solution! :)

Code

Please log in to post a comment

Log in with GitHub

Community feedback

  • ApplePieGiraffe•30,525
    @ApplePieGiraffe

    Greetings, visualdennis! 👋

    Awesome job on this challenge! 👏 Your solution looks great and I like the onload animation that you added to the notifications! 👍 It's great that you used a variety of tools to create your solution, too. 🙌

    Small note—all of the bolded words in the notifications should be links. Even though they do not actually go anywhere in this challenge, in a real-life application they would most likely navigate the user to another page, so using link tags for those elements would be best for semantics and accessibility (especially considering you have already given them a hover state). 😉

    I also noticed that you used px for the values of many things such as font-size, margin, and padding. It is a best practice to use a responsive unit such as em or rem instead because those units are based on the font-size of the document and allow users to increase/decrease the size of text (and the overall design, if you use those units correctly) by changing the font-size of their browser (which is important for accessibility reasons). If you'd like to learn more about those units in CSS and how all of this works, check out this helpful video.

    Hope this helps. 😊

    Keep coding (and happy coding, too)! 😁

    Marked as helpful

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