A mock eCommerce website that is inspired by Myntra.
- Create a Shirts Page that resembles Myntra shirts page.
- Add Filter functinality.
- Add Sorting Functionality.
- Add Wishlist functionality.
- Product card resembles myntra design.
- Create Individual Products Page that resembles Myntra product page.
- Add Select Size functionality.
- Image on click should show a full size version.
- Add to Bag and Wishlist functionality.
- Bag should persist during the whole session.
- Multiple products can be added or removed from the bag.
- Vite (To setup minimal React project Template)
- React
- Vanilla CSS
- React Router v6
- JS libraries
- match-sorter (used in filtering implementation)
- react-icons
- react-medium-image-zoom (used to implement "show full size image on click" function)
Main page of the project. It is a typical eCommerce products page with filters and sorting functionality. Products can be searched by name on this page.
Sidebar contains the implemented filtering functionality. Filters implemented -
- Men, Women, Girls, Boys Filter
- Clothing Brands Filter
- Price Range Filter
- Filter by Discount
Displays products in a responsive grid. Products and their details are shown as a "card". When no filters are selected, shows the full list of products. When a filter is active, shows the filtered list of products.
- Each product Card has the "Add to Wishlist functionality".
- On product click, redirects user to individual product page.
Individual product page, that roughly resembles myntra design. Divided into left and right section. Left section is another image grid that holds different images of the product. Right section displays product info. Lets user select size for the product and after that lets the user add the product either to wishlist or to bag/cart.
- Size is a required for "Add to Bag functionality"
- On image click, a full size version of the image is shown to the user.
Bag/Cart page can be accessed by clicking the "Bag" icon in Navigation. Displays Items in wish list and items in bag. Multiple Items can be added to to Wishlist and Bag.
- Clone the repository with git or download the files from GitHub.
git clone https://github.com/srihari-m-s/mock-myntra.git
- Unzip and cd to mock-myntra folder.
- Run
npm install
to install all dependencies. - Run
npm run dev
to start local development server. - Visit localhost in browser to view the application.