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.

• Overview
  • The challenge
  • Screenshot
  • Links
• My process
  • Built with
  • What I learned
  • Continued development
  • Useful resources
• Author

This is an advice generator app that uses the Advice Slip API to generate random quotes of advice.

This project is a simple demostration of 3rd-party APIs consuming.

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

• Solution URL
• Live Site URL

My first step is always thinking about a proper structure that will suit the requirements of the project. I decide which will be the bigger parts of the project, and then I divide them into smaller components.

Then I write all the code logic, trying to make it as simple as possible. Once everything works, I start working on the style.

• Flexbox
• React - JS library
• Create React App - Modern build setup with no configuration

I have been struggling with my projects' structure design, so working on this simple project has helped me apply some of the tips I have learned about this in a clean and faster way.

I want to start focusing on more complex projects so I can further challenge myself. Then I would also like to learn more about performance degradation.

• React Projects by Roy Derks - This book helped me a lot with the structure design of my project.

• Linkedin - Nia Robles
• GitHub - niaveser
• Frontend Mentor - @niaveser