Skip to content
Submitted about 3 years ago

Using Axios and React hooks to display random advice

axios, react, sass/scss
Nika•180
@nikavolk
A solution to the Advice generator app challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

My first API-related project. Made with HTML5, SASS, ReactJS (Axios, useState, useEffect).

What I've learned:

  • basics of SASS (using variables and nesting)
  • playing with media view for completely responsive design
  • basics of useState
  • basics of useEffect
  • basics of GIT (commit, push) and Github

My considerations

The project took me considerably less time than my very first project (the Rating component). The first one took over 8 hours, whereas this took about 4 hours, mostly spent on getting the Axios.get working, and minutiae CSS details.

CSS: Positioning the button was difficult, played around with negative margins which didn't seem like an elegant solution. Researched alternatives and used transform, instead.

React: Could have used fetch instead of the Axios package, had difficulties implementing the get function and reading data on it. Lots of Googling and reading docs.

Thank you for taking the time to check my work out. I'm very open to any and all comments and suggestions ❤️

Code
Couldn’t fetch repository

Please log in to post a comment

Log in

Community feedback

  • Matthijs van der Plas•30
    @MatthijsvanderPlas

    Awesome App! Inspiring me to look forward to sass and react. Code looks really clean.

    I could only suggest changing the width to a more static display so it doesn’t change depending on the quote it displays. Only the height would adjust slightly.

    Some delay on mobile before you can get a new quote, no idea how.

    Keep it up!!

    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