Mortar & Pestle eCommerce Platform

HTML5 | CSS3 | TAILWIND CSS | JAVASCRIPT | REST API

A full-featured e-commerce DEMO platform with landing page. Users are re-routed to the product shopping page from the landing page shop buttons where they can add items to the shopping basket, add additional items, and remote items from the shopping basket.

This is still a work in progress. However, you can demo what is available here.

Landing Page

Products Page

---

Installation & Technologies

• Install Node.js, current version. Must use v12+ if using Tailwind CSS.
• Install Tailwind CSS using their documentation.
  • Run command line npm run build-css if following package.json file with script
    "build-css": "tailwindcss build ./src/css/tailwind.css -o ./src/css/build-tailwind.css".
• Install contentful headless CMS.
  • Run command line npm install contentful.
  • Required to load product images. However, images and products.json file are included, as well.
• Install PayPal API for checkout buttons.
  • Sandbox account & REST API credentials are needed to test linked accounts.

Highlights

• Product content loaded through the DOM
• Router directs users from landing page to products on click with shop button
• Product data added into basket and removed from basket, updated through local storage
• Headless CMS Contentful to store product data, retrieved data through API integration
• Partial integration of PayPal API which includes payment buttons

Additional Features to Add

• Need to apply logic that transfers data from shopping bag to checkout page
• Full integration of PayPal API
• Optimize images for quicker load time

Credits

• Design Inspiration from eCommerce platforms, including Sephora, FabFitFun, Tarte, and Ulta.
• VIP Client Names used from a name generator.
• SVG from FabFitFun.
• Icons from FontAwesome.
• Photos from Pexels.