Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/koushith/-kalira-react

Ecommerce store inspired by Myntra
https://github.com/koushith/-kalira-react

ecom

Last synced: 18 days ago
JSON representation

Ecommerce store inspired by Myntra

Awesome Lists containing this project

README

        

### Kalira

This is an e-commerce web application developed using HTML, CSS, React and Typescript. The application has a Category Listing Page where products are listed along with sorting and filtering options. It also has a Product Detail Page where users can view the details of a specific product.

### ScreenShots

![image](https://user-images.githubusercontent.com/30016242/236352368-abe36bf7-160d-44d3-b844-c744c32a70c0.png)
![image](https://user-images.githubusercontent.com/30016242/236352423-0a6b8f98-1c32-4d38-beaa-2e257254eefb.png)

![image](https://user-images.githubusercontent.com/30016242/236352571-b804f376-2751-4b04-86fe-b7855ead6af1.png)

#### A Category Listing Page

- Listing of products
- Sorting of products (Price low to high, Price high to low, Ratings high to low, Name Ascending)
- Filters (Suppliers/Brands, Saree Fabric)

#### A Product Detail Page

- Basic details with static buttons

#### User Flow

Users can start from the Home page which displays the product listing. They can apply filters and sorting options here. From the listing page, users can navigate to the product details page to view the details of a specific product. From the product details page, users can navigate back to the listing page and find their selected sorting and filters intact.

### Technical

- React , TypeScript
- VanillaCSS - with StyledComponents
- ContextAPI with useReducer hook
- React-router-dom

#### Getting Started

To run this project on your local machine, follow these steps:

- Clone the repository ` git clone [email protected]:Koushith/-Kalira-React.git`
- Install the dependencies using ` npm install`
- Start the development server using ` npm start`