Skip to content

E-commerce products page from Frontend Mentor challenge. Built with (Sass, React & Typescript)

Notifications You must be signed in to change notification settings

SouleymaneSy7/fem-e-commerce-products-page

Repository files navigation

Frontend Mentor - E-commerce product page

Design preview for the E-commerce product page coding challenge

Links

Welcome! 👋

Thanks for checking out this front-end coding challenge.

This is a solution to the E-commerce product page challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.

Table of contents

The challenge

The challenge is to build out this e-commerce product page and get it looking as close to the design as possible.

Your users should be able to:

  • View the optimal layout for the site depending on their device's screen size
  • See hover states for all interactive elements on the page
  • Open a lightbox gallery by clicking on the large product image
  • Switch the large product image by clicking on the small thumbnail images
  • Add items to the cart
  • View the cart and remove items from it

Screenshots

Mobile

Mobile Screenshot

Mobile Navbar

Mobile Navbar Screenshot

Tablets

Tablet Screenshot

Desktop

Desktop Screenshot

Lightbox

Lightbox Screenshot

Cart View

Cart Views Screenshot

Built with

  • Semantic HTML5 markup
  • SASS
  • CSS custom properties
  • Flexbox
  • CSS Grid
  • Mobile-first workflow
  • Vite Js - Javascript Bundler.
  • PNPM - Package Manager.
  • React Js - Javascript Framework.
  • Typescript - A strongly typed language, builds on top of javascript.

How To Use This Repos

To clone and run this application, you'll need Git and PNPM installed on your computer. From your command line:

# Clone this repository
$ git clone https://github.com/SouleymaneSy7/fem-e-commerce-products-page

# Install dependencies
$ pnpm install

# start the server
$ pnpm dev

Author

About

E-commerce products page from Frontend Mentor challenge. Built with (Sass, React & Typescript)

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published