https://github.com/johnnygerard/fem-audiophile-e-commerce-website

Audiophile e-commerce website
https://github.com/johnnygerard/fem-audiophile-e-commerce-website

angular frontend-mentor sass

Last synced: 3 months ago
JSON representation

Audiophile e-commerce website

• Host: GitHub
• URL: https://github.com/johnnygerard/fem-audiophile-e-commerce-website
• Owner: johnnygerard
• License: mit
• Created: 2024-03-09T04:13:54.000Z (over 2 years ago)
• Default Branch: main
• Last Pushed: 2024-04-13T00:11:12.000Z (over 2 years ago)
• Last Synced: 2025-04-08T06:39:53.380Z (over 1 year ago)
• Topics: angular, frontend-mentor, sass
• Language: TypeScript
• Homepage: https://fem-audiophile-e-commerce-website-jgerard.vercel.app
• Size: 3.37 MB
• 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 | Audiophile e-commerce website

This is my solution to the [Audiophile e-commerce website challenge](https://www.frontendmentor.io/challenges/audiophile-ecommerce-website-C8cuSd_wx) 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/audiophile-ecommerce-website-fmfKYPcj6Q)

## Tech Stack

- Angular 17

- Sass

## Main Features

- Angular signals

- Angular animations

- [Custom form control](src/app/shared/quantity-control/quantity-control.component.ts)

- Lazy loaded components

- Route guards

- Title strategy and resolvers

- Standalone components

- Bash automation (see [PR #1](../../pull/1))

- [GitHub Actions](.github/workflows):

  - Vercel deployments

  - CodeQL analysis

## Developer Tools

- VS Code

- Figma

- GitHub Copilot

## Links

- [Website](https://fem-audiophile-e-commerce-website-jgerard.vercel.app) hosted with [Vercel](https://vercel.com/)

- [Solution](https://www.frontendmentor.io/solutions/audiophile-ecommerce-website-fmfKYPcj6Q)

## Screenshots

### Home Page

#### Mobile

![mobile screenshot](screenshots/home-page/mobile.avif)

#### Tablet

![tablet screenshot](screenshots/home-page/tablet.avif)

#### Desktop

![desktop screenshot](screenshots/home-page/desktop.avif)

### Checkout Page

#### Mobile

![mobile screenshot](screenshots/checkout-page/mobile.avif)

#### Tablet

![tablet screenshot](screenshots/checkout-page/tablet.avif)

#### Desktop

![desktop screenshot](screenshots/checkout-page/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