Front-end Challenges

This application showcases solutions to Front-end Challenges from FrontendMentor.io and frontloops.io.

Table of contents

• Links
• My process
  • Built with
  • What I learned
  • Continued development
  • Useful resources
• Author

Links

• Live Site URL: https://delaguilaluis.github.io/frontend-challenges

My process

Built with

• Semantic HTML5 markup
• CSS custom properties
• Mobile-first workflow
• TypeScript
• React - JS library
• React Spring
• Next.js - React framework
• Material UI - Design System
• Tailwind CSS

What I learned

To have a proer guidance on how to do things the best way while using Next.js, I based my project on this example. From which I learned:

• The basic structure of a Next.js project
• They way Next.js allows to customize meta tags in the page head
• How to define a global stylesheet for Next.js projects
• How to customize MUI themes
• How to define custom styles for MUI components with the sx property
• How to handle different screen sizes with Material UI's useMediaQuery hook
• MUI uses createContext, which only works in Next.js Client Components
• Improve my understanding of React's useState and useEffect, the rendering lifecycle and its interaction when using timers
• Usage of react-spring (and how amazing it is!)
• Input elements with patterns do not avoid faulty inputs, they just signal them
• How to deploy a static Next.js app
• How to set up favicons in Next.js

Continued development

• Areas that I want to continue be focusing on in future projects:
  • Theme customization to ease heavy changes in larger codebases.
  • Timers interaction with the useEffect hook.

Useful resources

• Deploying Next.js to GitHub Pages
• Deploying static Next.js sites
• Build a React Timer Component Using Hooks
• Boop!

Author

• Website - Luis Del Águila
• Frontend Mentor - @delaguilaluis
• Mastodon - @delaguilaluis