Frontend Mentor - QR code component solution

This is a solution to the QR code component challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.

Table of contents

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

Overview

Screenshot

Links

• Solution URL: https://github.com/delaguilaluis/qr-code-component-main
• Live Site URL: https://delaguilaluis.github.io/qr-code-component-main

My process

Built with

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

What I learned

To have a proer guidance on how to do things the best way while using both Next.js and Material UI, 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 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
• Seems like this template still uses _app and _document (see how to migrate)

Useful resources

• Deploying Next.js to GitHub Pages
• Deploying static Next.js sites

Author

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