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 React App with API

Bao Dang 110

@weebao

Desktop design screenshot for the Advice generator app coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
  • API
2junior
View challenge

Design comparison


SolutionDesign

Solution retrospective


Fetching API and rendering it was a challenge but it became easy once I got a hold of the basics of React. A harder challenge was to get GitHub to host the website, which took me a long time since I had no idea what to do. Glad it finally worked!

Community feedback

Elaine 11,400

@elaineleung

Posted

Hi Bao Dang, great job building this with React, and I like your slowly spinning dice!

I'm using Firefox, and I see that there's a caching issue here that's common for these solutions, where on Firefox, the next advice could not be loaded due to caching. If you have Firefox, you can try it out too. What you need to do is to add a header object for fetch, like this:

fetch("https://api.adviceslip.com/advice", { cache: 'no-cache' })

Since this is a React app, you might need more configurations for GitHub and could get complicated (GH Pages is designed for static pages only and I think static site generators also work). I also use GH Pages usually, but for React I would deploy my repo using Vercel instead.

Great job once again, wish I got to see the advice working though!

Marked as helpful

1

Bao Dang 110

@weebao

Posted

@elaineleung Thank you so much for your advice! Sorry for replying late, but I fixed it as you said and it worked wonders! I am creating another react app right now, so I will also try to use Vercel. Have a good day!

1
Elaine 11,400

@elaineleung

Posted

@weebao Glad to help! I just checked it out again and it's working well 😊

1
Bao Dang 110

@weebao

Posted

@elaineleung Thank you so much!

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