Advice Generator App

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.

Table of contents

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

Overview

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

Screenshot

Links

• Solution URL: Advice Generator App Solution
• Live Site URL: Advice Generator App
• Figma

My process

Built with

• Semantic HTML5 markup
• Accessibility:
  • Keyboard test
  • Screen reader
  • Testing tools: axe DevTools, Wave, pa11y
• Mobile-first workflow
• React - JS library
• Next.js - React framework
• Styled Components - For styles
• Fetch API
• Unit tests with Jest and jest-axe
• Soon™: BEM methodology

What I learned

• First time using Fetch API!

I've been having some problems with cache when fetching data. With Axios, it was very difficult to fetch new advice… all requests were being sent, but the app couldn't update the advice because of cache. My solution was to use Fetch API with a no-cache.

fetch('https://api.adviceslip.com/advice', {
  cache: 'no-cache',
})

• First time using Unit Tests (and mocking fetch)!

Since fetch isn't present in Node, it was necessary to make a decision: replace Fetch API with Axios or node.fetch, or use a Jest mock. I decided to try mocking fetch and was very lucky to find a solution in Stack Overflow 😃

global.fetch = jest.fn(() =>
  Promise.resolve({
    json: () =>
      Promise.resolve<ApiData>({ slip: { id: 0, advice: 'Advice' } }),
  }),
) as jest.Mock;

• GitHub Workflow checking Unit Tests and using pa11y

Continued development

• Apply BEM Methodology
• Fetch data with axios
• Apply some transitions with CSS
• Learn more about Unit tests!

Useful resources

• Adrian Bolonio's article: Automating the accessibility tests of your source code with GitHub Actions

Author

• Frontend Mentor - @EstherMarie

Acknowledgments

I would like to thank every happy person who helped me with suggestions, links and examples! 😄