Frontend Mentor - Product preview card component solution

This is a solution to the Product preview card component 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
• Getting Started
  • Prerequisites
  • Installation
• My process
  • Built with
  • What I learned
  • Continued development
  • Useful resources
• Author

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

Screenshot

Links

• Solution URL: [https://www.frontendmentor.io/solutions/product-preview-card-component-with-nextjs-tailwind-css-Ob5WUpCTCg]
• Live Site URL: [https://product-preview-card-component-lake-two.vercel.app/]

Getting Started

To get a local copy up and running follow these simple steps:

Prerequisites

Make sure you have the following software installed on your machine:

• Node.js (Node.js 18.17 or later)
• pnpm

Installation

1. Clone the repository:

   git clone https://github.com/jaceleedev/product-preview-card-component.git

2. Navigate to the project directory:

   cd product-preview-card-component

3. Install dependencies using pnpm:

   pnpm install

4. Start the development server:

   pnpm dev

5. Open your browser and visit http://localhost:3000 to view the project.

My process

Built with

• Next.js (v14.2.5)
• TypeScript (v5)
• Tailwind CSS (v3.4.1)
• Semantic HTML5 markup
• CSS Grid, Flexbox
• SEO & web accessibility

What I learned

Throughout this project, I gained valuable insights and improved my skills in several areas:

1. Responsive Design: I discovered that combining both grid and flexbox is incredibly powerful for creating responsive layouts. This approach provides a versatile toolkit for addressing various design challenges across different screen sizes.

2. Desktop-first vs Mobile-first Approach: While I'm aware that the mobile-first approach is currently trendy, I found the desktop-first approach more intuitive when working on responsive designs. However, I recognize the need to gain more experience with the mobile-first approach in future projects. This will help me better understand the pros and cons of each method and determine which is more suitable for different scenarios.

These learnings have not only improved my technical skills but also given me a clearer direction for future growth and areas to focus on in upcoming projects.

Continued development

In future projects, I want to continue focusing on and improving in these areas:

1. Exploring the Mobile-First Approach: I plan to implement the mobile-first approach to gain hands-on experience. By doing so, I aim to understand the strengths and weaknesses of both mobile-first and desktop-first methodologies. This practical experience will be invaluable in helping me determine the most appropriate approach for different project scenarios.

By focusing on these areas, I hope to continually improve my front-end development skills and create more efficient and sophisticated web applications.

Useful resources

• Next.js Documentation - Comprehensive guide to Next.js features and API.
• Tailwind CSS Documentation - Detailed documentation for Tailwind CSS.

Author

• GitHub - @jaceleedev
• Frontend Mentor - @jaceleedev