Myntra project - Frontend

Description

Myntra is a e-commerce website where you can buy clothes, shoes etc. This project is a clone of Myntra website. This project is built using Next.js, React, Hooks, Context API, CSS, HTML.

Note: This page was made as a personal project in connection with an educational exercise. This is NOT the official site of the company or brand identified on the page. The creator of this page is NOT affiliated with the company or brand in any way.

Demo

https://myyntra-gocommett.vercel.app/

Tech Stack

• Next.js
• React
• Hooks
• Context API
• CSS
• HTML

Features

• Header
• Search
• Sort ❌
• Filter ❌
• Filter (show more)
• Wishlist ❌
• Bag ❌
• Product Details ❌
• Footer
• Responsive ❌

Screenshots

Header

Search Bash

Stock

so here under this stock is bacially having two categories, first one is "only few left" and another one is "in stock" which has been implemented in the code as if the product is less than 5 then it will show "only few left" and if more than that then it will show "in stock".

Filter

Gender

Brand

Price

Color

Discount

Show more button

Search

Product Card

Project Structure

myntra/
├── components/
│   ├── Header.js
│   ├── Footer.js
│   ├── Product/
│   │   ├── Products.js
│   │   ├── Product.container.js
│   │   ├── ProductCard.js
│   |   └── ProductDetails.js
│   ├── Search/
│   │   ├── Search.js
│   │   ├── Search.bash.js
│   │   ├── AppContext.js
│   ├── Sort.js
│   ├── Main.js
│   ├── Wishlist.js
│   ├── Bag.js
├── pages/
│   ├── index.js
│   ├── products/
│   │   ├── index.js
│   │   ├── [id].js
├── public/
│   ├── images/
│   │   ├── logo.png
│   │   └── ...
│   ├── css/
│   │   ├── global.css
│   │   └── ...
│   └── ...
├── lib/
│   ├── api.js
│   └── ...
├── utils/
│   ├── constants.js
│   └── ...
├── next.config.js
└── package.json

Project setup

npm install

Compiles and hot-reloads for development

npm run dev

Compiles and minifies for production

npm run build

Run your tests

npm run test

Author

Saurav Hathi