Frontend Mentor - Product Preview Card Component

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
• My process
  • Built with
  • What I learned
  • Continued development
  • Useful resources
• Author
• Acknowledgments

Overview

The challenge

Users should be able to:

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

---

Screenshot

Fullscreen View (Desktop)

Animated Preview:

Note: This is a Mobile-First Approach. Please wait for the GIF to load (It takes a while due to file size)

All viewports were included (except for the 4k view).

Desktop View (1440px)	Laptop View (1024px)	Tablet View (768px)

Mobile L (430px)	Mobile M (375px)	Mobile S (320px)

Mobile :: Modal Active	Tablet :: Modal Active

---

Links

• Solution URL: Click me
• Live Site URL: Click me

My process

Built with

• Version 2 (Latest) (Upgraded from basic HTML, CSS, and Bootstrap to a modern tech stack)

  • React + TypeScript
  • Vite for faster development
  • Tailwind CSS for utility-first styling
  • Improved and more accurate UI/UX design
  • Added modal when button is pressed

• Version 1 (Old) (Originally built two years ago)

  • Semantic HTML5 markup
  • CSS custom properties
  • Mobile-first workflow
  • Bootstrap 4 - CSS Framework

What I learned

• Significant improvement in UI/UX accuracy based on project requirements.
• Transitioning from Bootstrap to Tailwind CSS for better flexibility.
• Leveraging TypeScript for type safety and scalability.
• Optimized component-based structure using React.
• Documentation writing (this project introduced me to structured README.md creation).

Continued development

• Enhancing React component reusability and optimization.
• Exploring advanced Tailwind CSS configurations.
• Improving accessibility and performance best practices.
• More refined state management solutions.
• Integrating backend logic for future scalability.

Useful resources

• Tailwind CSS Docs - Official documentation for utility-first styling.
• React Docs - Comprehensive guide for building modern UI components.
• Vite Documentation - Helped in understanding faster frontend tooling.
• TypeScript Handbook - Essential for writing type-safe React components.
• MDN Web Docs - Go-to reference for HTML, CSS, and JavaScript concepts.
• Josh Comeau’s Blog - Great insights on modern frontend best practices.
• CSS Tricks - Advanced CSS techniques and UI design patterns.
• Frontend Mentor Community - Feedback and inspiration from other frontend developers.

Author

• Website - My Github Profile
• Frontend Mentor - @Iron-Mark
• Twitter - @iron_markk
• Instagram - @iron_markk

Acknowledgments

I would like to thank first in myself to do these things instead of just sleeping. Also to the internet and the websites I specified in the "Useful resources" section, or some that isn't, which is probably I forgot. Also to the FrontEndMentor for providing these resources for everyone to learn much easier, and not just get stuck in tutorial hell watching random videos.

• v2 (Latest): Feb 14, 2025
• v1: Feb 11, 2023