Frontend Mentor | Product preview card component

This is my solution to the Product preview card component challenge from Frontend Mentor.

Links

• Live website
• Solution
• Challenge
• Lighthouse report

Tech Stack

Frontend

• Angular 17
• Sass

Backend

• Vercel (static hosting)

Key Features

• 404 page
• NgOptimizedImage
• ImageKit CDN

Automated Tasks

• Project initialization with shell script (see PR #1)
• Vercel deployments:
  • Preview
  • Production
• CodeQL analysis (see workflow)

Environment & Tools

• System: Ubuntu (GNU/Linux)
• IDE: Visual Studio Code
• Design: Figma

VS Code Extensions

• Angular Language Service
• Prettier - Code formatter
• ESLint
• GitHub Copilot (active subscription required)

Screenshots

Mobile

Desktop

About Frontend Mentor

Frontend Mentor challenges help you improve your coding skills by building realistic projects.

Copyright

© 2024 Johnny Gérard