deepak-parmar/advice-slip-generator

Solution to Advice Generator App challenge using Next.js x Tailwind CSS

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
  • Useful resources
• Author

Overview

The challenge

Users should be able to:

• View advice slip when the page loads.
• Get new advice by click on refresh button.
• See error in alert box when fetching of new advice fails.

Screenshot

Links

• Solution URL: My solution
• Live Site URL: advice-generator

My process

Built with

• Semantic HTML5 markup
• Tailwind CSS
• Flexbox
• Next.js - React framework
• Heroku - Hosting Platform

What I learned

• Configuring Tailwind CSS with Next.js.
• Fetch API to fetch data from URLs.

Useful resources

• Next.js Learn - Helped with initial cofiguration and setup of the project.
• Tailwind CSS Docs - For quickly finding useful utility classes.

Author

• Frontend Mentor - @deepak-parmar