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.
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
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