La Fourche - Test Technique Frontend V2

La Fourche's technical exam.

Live demo: https://la-fourche-front-technical-test.vercel.app/

Stack

Usage

Install dependencies: yarn

Run dev server: yarn dev

Features

Search Page /

  • Search input
  • Display result
  • Product card: image, name, price, add / remove from cart button
  • Display result in 4 columns grid on desktop and in a 2 columns grid on mobile
  • Display 20 top results
  • Pagination

Cart /cart

  • global context
  • only 1 product of each type in cart
  • display total price
  • display list of products in cart: name, price

Discount price

  • if total price >= 200 (euros?) then -50% on items with price >= 250: cart total price, items prices

Extra

  • add favicon
  • remove item from cart page
  • cool design
  • add TypeScript
  • paypal
  • add quantity to items in cart
  • improve pagination design
  • improve search bar design