Figma Merch Store

This is a solution to the Figma Merch Store" challenge on Frontend Practice.

• View live demo of my solution here

• View store.figma.com

Table of contents

• Overview
  • The challenge
  • Demo
• Features
• My process
  • Built with
  • Continued development
  • What I learned
  • Continued development
  • Useful resources
• Author

Overview

The challenge

Code a replication of the Figma Merch Store site, from this frontend-practice project.

Users should be able to:

• Toggle the dropdown search bar by clicking the search icon, allowing them to conveniently search for products.
• Filter the list of products by category.
• See hover states for all interactive elements on the page,
• Utilize a draggable slider to effortlessly explore featured products within the hero section and also to view product thumbnails while using the mobile viewport
• Add, remove, and update products to their shopping cart, ensuring a convenient shopping experience and enabling them to review their selections before finalizing a purchase
• Navigate through a smooth and streamlined checkout process, ensuring efficient completion of their purchase.
• Select a country and have the currency automatically update, ensuring accurate pricing information aligned with their chosen location.
• View and interact with all animated elements on the page
• View the optimal layout for each page depending on their device's screen size
  • Mobile: < 900px
  • Desktop: > 900px

Demo

View live demo here

Features

Animations

• Draggable Image Slider
• Swap image on hover
• Marquee
• Circle SVG with rotating text and hover animation

Styling

• Custom Fonts
• Dropdown Search
• Random color generation

Angular/JavaScript

• Custom Currency Pipe
• Content filtering
• Shopping Cart
• User Reviews/Ratings (Bonus)

Draggable Slider using GSAP

• Created a custom Angular Structural @Directive to craft an interactive image slider with draggable functionality. The animation was created using GreenSock's Draggable feature.

• In the /hero component

  

• In the /product component (mobile view)

  

• draggable-slider.directive.ts

    @Directive({
      selector: '[dragSliderDir]'
    })
  
    export class DraggableSliderDirective {
      draggable!: Draggable;
  
      constructor(private imagesRef: ElementRef) { }
  
      ngAfterViewInit() {
         gsap.registerPlugin(Draggable);
         this.initializeDragabbleSlider();
      }
  
      initializeDragabbleSlider() {
        let content = this.imagesRef.nativeElement;
        let slider = content.parentNode;
  
        this.draggable = new Draggable(content, {
          type: 'x',
          repeat: -1,
          edgeResistance: 2,
          dragResistance: .1,
          bounds: slider,
          paused: true,
          center: false,
          throwProps: true,
          snap: { x: [0, 100] }
        })
      }
    }

• hero.component.html

    <div class="hero">
      <div class="container">
        <div class="draggable-images"
              dragSliderDir >
          <svg></svg>
          <svg></svg>
          <svg></svg>
          
          ...
          
        </div>
      </div>
      </div>

• product.component.html

    ...
  
    <div class="product-grid__thumbnails">
        <div class="product-grid__thumbnails--mobile-drag"
                  dragSliderDir>
          <figure *ngFor="let photo of product.productPhotos; 
          let i = index">
              <img [src]="photo"
                  (click)="expandImg(i)"
                      alt="product.name">
          </figure>
  
        ...
  
      </div>
    </div>
    

If anyone knows how to make this draggable slider an infinite loop please let me know

Swap image on hover

• In the /product-list component, a custom @Directive was created to swap /product-card's default cover image to a pattern/image on :hover, using CSS animations, opacity and positioning.

  

• hover-img-swap.directive.ts

      @Directive({
        selector: '[hoverImgSwap]',
      })
  
      export class HoverImgSwapDirective {
  
        @HostBinding('class.hoverImgSwap')
        get cssClasses() {
          return true;
        }
      }

• product-card.component.html

    <div class="product-list__product" hoverImgSwap>
  
        <figure>
  
          <img [src]="product.hoverPatternImg"/>
  
          <img [src]="product.hoverProductImg"/>
  
          <img [src]="product.productPhotos[0]"/>
  
        </figure>
  
        ...
  
    </div>

• in _animations.scss

    .hoverImgSwap {
  
      figure {
        position: relative;
        border-radius: $border-radius-default;
        border: none;
  
        img {
          transition: border-color 750ms, opacity 750ms;
          border-radius: $border-radius-default;
          width: 100%;
          height: 100%;
          top: 0;
          left: 0;
          right: 0;
          bottom: 0;
          object-fit: cover;
        }
  
        :first-child,
        :nth-child(2) {
          position: absolute;
          border: $border-default;
          opacity: 0;
        }
  
        :nth-child(3) {
          position: absolute;
          opacity: 1;
        }
      }
  
      &:hover {
        figure {
          :first-child {
            opacity: 1;
            width: 100%;
            height: 100%;
          }
        }
  
        :nth-child(2) {
          opacity: 1;
          max-width: 100%;
          max-height: 100%;
          z-index: 2;
        }
  
        :nth-child(3) {
          opacity: 0;
        }
      }
    }

Marquee Animation

• In the /footer component, I created a custom re-useable, Angular Structural @Directive, to craft a scrolling <marquee> animation featuring both text and <svg> elements. This animation was achieved using GreenSock for seamless and dynamic motion.

• marquee.directive.ts

    @Directive({
    selector: '[marqueeDirective]'
    })
  
    export class MarqueeDirective implements OnInit {
  
      constructor(private elRef: ElementRef, private renderer: Renderer2) { }
  
      ngOnInit(): void {
        this.initializeMarquee();
      }
  
      initializeMarquee(): void {
        let content = this.elRef.nativeElement.childNodes;
  
        gsap.from(content, {
          x: -this.elRef.nativeElement.offsetWidth,
          repeat: -1,
          duration: 15,
          ease: 'linear'
        })
  
        gsap.to(content, {
          x: this.elRef.nativeElement.offsetWidth,
        })
          .totalProgress(-.7)
      }
    }

If anyone knows how to make this marquee an infinite loop please let me know

Custom fonts

• Custom fonts "Whyte" and "Whyte Inktrap".
• Whyte has smooth and sharp transitions, while Whyte Inktrap has curt yet also curvy ink traps at its joints.

Whyte body font	Whyte Inktrap display font

Dropdown search bar

dropdown search bar when the icon is clicked.

Shopping Cart

• Implemented a user-friendly shopping cart.
• The shopping cart feature allows users to add products to their cart and view their cart on the homepage for a streamlined shopping experience.

Custom currency @Pipe

• Developed a custom Angular @Pipe for currency conversion, to update product prices based on the selected country.

• Utilized the CurrencyBeacon API for most current exchange rates.

• The default currency is USD

• Country can be selected by using the dropdown on the navigation menu.

• The @Pipe converts currency amounts into GBP (British Pound), JPY (Japanese Yen), EUR (Euro), or CAD (Canadian Dollar), providing users with accurate and up-to-date pricing information in their preferred currency.

  

• currency-conversion.pipe.ts

    ...
  
    export class CurrencyConversionPipe implements PipeTransform {
    
    ...
    
    transform(amount: number, country: string, rates: any): any {
        switch (country) {
       
        ...
       
        // United Kingdom
        case 'store-uk':
            return formatCurrency(amount * rates['GBP'].exchangeRate, 'en-us', '£', 'GBP', '1.0-0');
        // Japan
        case 'store-jp':
            return formatCurrency(amount * rates['JPY'].exchangeRate, 'en-JP', '¥', 'JPY', '1.0-0');
        // USA or Just browsing
        default:
            return formatCurrency(amount, 'en-US', '$', 'USD', '1.0-0');
        }
      }
    }

• products.service.ts

    ...
      loadExchangeRates(): Observable<any> {
  
          return this.http.get<any>(`${environment.API_BASE_URL}/rates`, this.httpOptions)
            .pipe(
              map(res =>
                res
              ),
              shareReplay(),
              catchError((err) => {
                throw err + 'Request failed:';
              })
            )
        }
    ...

• @Pipe in the component template

      ...
          <p class="product-list__product--price">
              {{ product.price |  
                  currencyConversion : 
                  selectedCountry : 
                  (exchangeRates$ | async) 
                }}
          </p>
      ...

Content filtering

• Within the /call-to-action users are able select "LAYERS" or "COMPONENTS" to filter /product-list by category.
• Products are filtered through a custom Angular @Pipe .

• filter-by-category.pipe.ts

      ...
        PipeTransform {
  
          transform(products: Product[], category?: string) {
            if (category) {
              return products.filter(product => product.tags[0] === category);
  
            } else {
              return products
            }
          }
        }

Random color generation

Brand Colors

• Upon rendering, one of the brand's colors is randomly chosen as the background-color for the /footer component.
• A logo is also selected at random, ensuring that it differs in color from the background. Each time a re-render occurs, a fresh combination is generated.

• A $random color variable was created to use as an accent color in the /reviews and /size-chart components.

• $random is updated on render.

• _variables.scss

    $bgColors: (
        $bio-punk,
        $placid-lilac,
        $fiery-glow,
        $sunflower
    );
  
    $key: random(length($bgColors));
  
    $nth: nth($bgColors, $key );
  
    $random: $nth !default;

• review.component.scss

    .review {
        background-color: rgba($random, .05);
        border: 2px solid rgba($random, .25);
        }

User Reviews/Ratings Component

• Upon the initial render of /product component, up to 8 random "user reviews" and star ratings are generated based on product:tag. Each product has a product:tag category of layers or components.

    export class ReviewComponent implements OnInit {
      ...
      reviews$!: Observable<Review[]>;
      averageRating: number = 0;
      averageRatingStars: string = Array(5).fill(`<span>&#9734;</span>`).join(``);
      ...
  
      ngOnInit(): void {
        this.loadReviews();
      }
  
      loadReviews() {
        const reviews$ = this.reviewsService.
        getRandomReviews(this.reviewCategory).pipe(
            tap(ratings => {
              this.updateAverages(ratings);
            })
          );
  
        this.reviews$ = reviews$;
      }
  
      updateAverages(ratings:Review[]) {
        let average = 0;
  
        ratings.forEach((rating: Review) => { average += rating.rating });
  
        average /= ratings.length;
  
        this.averageRating = average;
  
        average = Math.round(average);
  
        this.averageRatingStars = this.getStars(average);
  
        const averages = {
          numberOfReviews: ratings.length,
          averageRating: this.averageRating,
          averageRatingStars: this.averageRatingStars
        }
  
        this.newAverages.emit(averages);
      }
  
  
      getStars(starRating: number): string {
        return Array(starRating).fill(`<span>&#9733;</span>`)
          .concat(Array(5 - starRating).fill(`<span>&#9734;</span>`))
          .join(``);
      }
    }

• Uses the /reviews/:tag endpoint

      app.get('/reviews/:tag', (req, res) => {
    
      const tag = req.params.tag;
  
      const reviewOptions = [
        ...REVIEWS.filter((review) => review.type == tag),
        ...REVIEWS.filter((review) => review.type == 'generic'),
      ];
    
      let randomRatings = reviewOptions
        .sort(() => 0.5 - Math.random())
        .slice(0, Math.floor(Math.random() * reviewOptions.length));
  
      return res.status(200).json(randomRatings.slice(0, 8));
    });

• averageRating and averageRatingStars are computed from the reviews$. Afterward, the interface displays averageRatingStars, alongside a numerical averageRating and the total count of "user reviews".

My Process

I enjoyed working on this project it was a nice balance of styling requirements and functional requirements great project to practice with.

Built with

Continued development

• dynamic <svg>'s in hero
• infinite loop dragabble sliders and marquee

What I learned

GSAP

CSS Grid

Angular routing

Set up routing: Set up routing so that users can navigate between pages. used /product/:id /product/:name to route to project page

Custom @Pipe's

• Developed a custom Angular @Pipe for currency conversion, to update prices based on the selected country.
• Developed a custom Angular @Pipeto filter /product-list by category(tag) .

Angular @Directive

• Implemented custom structural directives to enable reusable and scalable animations in the application.
• These directives were utilized in the footer marquee, product hover image swap, and draggable image slider components.
• By encapsulating animation logic within directives, I was able to achieve modularity while reducing code duplication.

Angular in-memory-web-api

Display products with data binding

Used Angular's data binding and router params to display the /product-list of /product-card's which route to each /product detail pages.

Stateless Observable Service using RxJs and Angular Services

• Developed stateless observable services following the principles of MVC/MVVM architecture, strategically minimizing client-side state storage and instead dynamically retrieving data from the server on demand.
• Implemented this approach seamlessly within components product.service.ts, cart.service.ts, and ratings.service.ts, enhancing efficiency and maintaining a clean separation of concerns.

JSON Proxy server to store and retrieve data

During development I used JSON Proxy server to store and retrieve data, which was replaced with an express/node server and a database for production.

API Integration

For production I built an API using Node and Express, hosted through Vercel, and integrated through RapidAPI.

API Endpoints

/products

• returns a list of PRODUCTS

/products/search/:searchTerm

• returns list of PRODUCTS filtered by searchTerm

/products/featured

• returns list of featured PRODUCTS

/product/:productId

• returns a product from the PRODUCT list by :productId

/reviews/:tag

• returns up to 8 random reviews and ratings based on product:tag

/rates

• returns most recent exchangeRates from the CurrencyBeacon API

Useful resources

• Angular Data Sharing Reference
• How to Secure Angular Environment Variables for Use in GitHub Actions
• Create a Shopping Cart Using Angular and Local Storage with PayPal Checkout
• Scrolling Ticker Tape Web Design Tutorial
• The right way to componentize SVGs for your Angular app
• Angular Currency Pipe & Format Currency In Angular with examples - Angular Currency Pipe is one of the bulit in pipe in Angular used to format currency value according to given country code,currency,decimal,locale information.
• Angular CurrencyPipe
• Proxy Server - JSON server to store and retrieve data during development
• Angular in-memory-web-api
• phosphor icons
• :nth-child() pseudo-class
• CSS Grid Generator
• Udemy: Reactive Angular Course (with RxJs, Angular 16) by Angular University - Build Angular 16 Applications in Reactive style with plain RxJs - Patterns, Anti-Patterns, Lightweight State Management
• Build your own API - Youtube video that quickly shows you how to make a profitable API and sell it on the RapidAPI Hub.

Design Resources & Inspiration

• noize.com - View Product
• quince.com - View Product
• Dribble - Reviews-and-ratings

Author

• Portfolio - Chanda Abdul
• GitHub - github.com/Chanda-Abdul