Frontend Mentor – Advice generator app solution

This is a solution to the Advice generator app challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.


The challenge

Users should be able to:

  • View the optimal layout for the app depending on their device’s screen size
  • See hover states for all interactive elements on the page
  • Generate a new piece of advice by clicking the dice icon


Project Print

Project Print Hover


My process

Built with

  • CSS custom properties
  • Flexbox
  • React – JS library
  • TypeScript

What I learned

In this project I learned how to use TypeScript with React. Also how to fetch an external API data with a typescript function in React:

const getAdvice = async () => {
  const res = await fetch(baseURL)
  const data: dataAdvice = await res.json()
  const adviceObject: AdviceI = data.slip
  return adviceObject

Continued development

For my next projects I look forward to work on how to make the least amount of renders with a React App.



View Github