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

Overview

The challenge

Users should be able to:

• Click a button to recieve a random piece of advice
• View optimal layout on both mobile and desktop views

Screenshot

Links

• Solution URL: https://github.com/Jclong98/Frontend-Mentor-Advice-App
• Live Site URL: https://beautiful-kitsune-fe1c9f.netlify.app

My process

1. Use the vite cli to scaffold a new react/typescript project with npm create vite@latest
2. Transfer the design files and provided images into the vite project.
3. Install UnoCSS, UnoCSS Reset, UnoCSS WebFonts, and The UnoCSS Preset
4. Configure all of these in vite.config.ts to get the required font. Come back for this later while styling if new rules need to be added like font size and icon size
5. Do all of the markup/styling in App.tsx. This project is limited enough in scope that the entire application can be contained in this file.
6. Add the simplest form of fetch request to the api to populate the markup.
7. Add a loading state to the button
8. Add a way to search for specific advice slips
9. handle errors for invalid inputs
10. upload to github
11. deploy on netlify

Built with

• Semantic HTML5 markup
• Vite
• React - JS library
• UnoCSS - Atomic CSS
• The Fetch API

What I learned

As I get more comfortable with React, I tried branching out and using a CSS library. Last time I tried react, I used vanilla CSS to style the project. Vanilla CSS in react is a bit cumbersome because the files are completely separated, which in some respects can make it more organized, but in others makes it slower to read and write. UnoCSS is an atomic CSS framework based on WindiCSS, which is based on TailwindCSS. It can make writing your styles much easier by abstracting away the underlying CSS into helpful utility classes. It is very new though, without much online about it, so if you run into a problem there might not be many examples of people running into the same problems.

Continued development

Continuing development, I'd like to learn more about how UnoCSS works. To create a rule, you need to write a regex expression, and I've never quite seen the syntax that UnoCSS uses to create their rules.

Useful resources

• UnoCSS Docs

Author

• Github - Jacob Long
• Frontend Mentor - @jclong98