README.md

Frontend Mentor - Product preview card component solution

This is a solution to the Product preview card component challenge on Frontend Mentor.

Table of contents

• Overview
  • The challenge
  • Start the application
  • Links
  • TBD
• Process
  • Built with
  • What I learned
  • Useful resources

Overview

The challenge

Users should be able to:

• View the optimal layout depending on their device's screen size
• See hover and focus states for interactive elements

Start the application

To startup the application, clone the repository and run yarn dev after running yarn install

Links

Product Card demo

TBD

Deploy this to some hosting platform

Process

Built with

• React - JS library
• Next.js - React framework
• Tailwind - For styles
• T3 stack - Quick start the project

What I learned

With this challenge I discovered a google extension called "ResponsiveViewer" that allowed me to view simultaneously both breakpoints that I had to consider. I have also learned about the <picture> tag that allows me to source different sized images to a <img> tag based on breakpoint.

Useful resources

• Tailwind docs - Always helpful