https://github.com/johnnygerard/fem-product-preview-card-component

Frontend Mentor | Product preview card component
https://github.com/johnnygerard/fem-product-preview-card-component

angular frontend-mentor sass

Last synced: about 1 month ago
JSON representation

Frontend Mentor | Product preview card component

• Host: GitHub
• URL: https://github.com/johnnygerard/fem-product-preview-card-component
• Owner: johnnygerard
• License: mit
• Created: 2023-01-29T08:51:21.000Z (almost 2 years ago)
• Default Branch: main
• Last Pushed: 2024-04-20T15:59:50.000Z (9 months ago)
• Last Synced: 2024-04-21T05:25:19.198Z (9 months ago)
• Topics: angular, frontend-mentor, sass
• Language: SCSS
• Homepage: https://fem-product-preview-card-component-jgerard.vercel.app/
• Size: 927 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE.txt

Awesome Lists containing this project

README

        
# Frontend Mentor | Product preview card component

This is my solution to the [Product preview card component challenge](https://www.frontendmentor.io/challenges/product-preview-card-component-GO7UmttRfa) from [Frontend Mentor](https://www.frontendmentor.io/).

[![project status](https://img.shields.io/badge/status-solution%20published-success?style=for-the-badge)](https://www.frontendmentor.io/solutions/product-preview-card-component-with-404-OFsbTsDSQ-)

## Links

- [Live website](https://fem-product-preview-card-component.vercel.app/)

- [Solution](https://www.frontendmentor.io/solutions/product-preview-card-component-with-404-OFsbTsDSQ-)

- [Challenge](https://www.frontendmentor.io/challenges/product-preview-card-component-GO7UmttRfa)

- [Lighthouse report](https://googlechrome.github.io/lighthouse/viewer/?gist=3bdd3ce93f4b3f6b1ea39c851d345be8)

## Tech Stack

### Frontend

- [Angular 17](https://blog.angular.io/introducing-angular-v17-4d7033312e4b)

- [Sass](https://sass-lang.com/)

### Backend

- [Vercel](https://vercel.com/) (static hosting)

## Key Features

- 404 page

- [NgOptimizedImage](https://angular.dev/guide/image-optimization)

- [ImageKit CDN](https://imagekit.io/)

## Automated Tasks

- Project initialization with shell script (see [PR #1](https://github.com/johnnygerard/fem-product-preview-card-component/pull/1))

- Vercel deployments:

  - [Preview](.github/workflows/vercel-preview.yaml)

  - [Production](.github/workflows/vercel-production.yaml)

- [CodeQL analysis](https://codeql.github.com/) (see [workflow](.github/workflows/codeql.yaml))

## Environment & Tools

- System: [Ubuntu](https://ubuntu.com/) (GNU/Linux)

- IDE: [Visual Studio Code](https://code.visualstudio.com/)

- Design: [Figma](https://www.figma.com/)

## VS Code Extensions

- [Angular Language Service](https://marketplace.visualstudio.com/items?itemName=angular.ng-template)

- [Prettier - Code formatter](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode)

- [ESLint](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint)

- [GitHub Copilot](https://marketplace.visualstudio.com/items?itemName=github.copilot) (active subscription required)

## Screenshots

### Mobile

![mobile screenshot](screenshots/mobile.avif)

### Desktop

![desktop screenshot](screenshots/desktop.avif)

## About Frontend Mentor

[Frontend Mentor](https://www.frontendmentor.io/) challenges help you improve your coding skills by building realistic projects.

## Copyright

© 2024 Johnny Gérard