Frontend Mentor - Advice Generator App Solution

This is a solution to the Advice Generator App Challenge on Frontend Mentor.

Table of contents

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

Overview

The challenge

Users should be able to:

• View the optimal layout depending on their device's screen size
• See hover states for interactive elements
• Generate random avice from API

Screenshot

Links

• Live Site URL: https://kens-visuals.github.io/advice-generator-app/
• Solution URL: https://www.frontendmentor.io/solutions/advice-generator-app-with-react-and-styled-components-CkRsCR7Q9

My process

Built with

• React
• Styled Components
• stoic-quotes API
• Semantic HTML5 markup
• CSS Flexbox
• CSS Grid
• Mobile-first workflow

What I learned

This wasn't the first time of me working with API, but a similar project was on my list for a while. Now, thanks to Frontend Mentor's good-looking design, I've got a random Stoic advice generator that I'm using on a daily basis. Although the initial API was different, I wanted to build something that my friends and I will use on a daily basis. And when I add the website to my phone's home screen, it feels like a legit app. I'm pretty pumped on this, and as would Epictetus say, "He is a wise man who does not grieve for the things which he has not, but rejoices for those which he has.".

Continued development

I'm planning on adding animation to this project, I'm currently learning Framer Motion. Perhaps, my up-and-coming projects will already include animations.

Useful resources

• stoic-quotes API - The API that's providing all these wonderful quotes.
• CSS Box Shadows - My go to list for box shadows.

Author's Links

• Medium - @kens_visuals
• CodePen - @kens-visuals
• Codewars - @kens_visuals
• Frontend Mentor - @kens-visuals