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
  • Screenshots
  • Links
  • Built with
  • What I learnt
• Author

Overview

Screenshots

Links

• Solution URL: Responsive dynamic chart component using React and Tailwind CSS
• Live Site URL: (https://expenseschart-javierdesant.netlify.app/)

Built with

• CSS custom properties
• Flexbox
• CSS Grid
• React - JS library
• Vite - Build tool
• Tailwind CSS - For styles

What I learnt

In this project, I learned the following:

• Utilizing Tailwind CSS for styling
• Enhancing my TypeScript skills with React
• Implementing React functional components
• Creating custom hooks in React
• Designing for responsiveness
• Iterating over data using mapping
• Positioning elements on the page
• Adding transitions and animations
• Formatting currency display
• Deploying a React application
• Utilizing Flexbox and CSS Grid for layout

Author

• LinkedIn - Javier de Santiago Soto
• Frontend Mentor - @javierdesant