OnlineStore

OnlineStore displays all the products in the home page with search field. User can click on any of the product to see more detailed information about the product. Also, users can search for any particular product by simply providing the category name on the search input field.

Live demo Url:

https://shiva-adhikari-online-store.netlify.app/

How to install

1. Clone the project git clone https://github.com/ShivaAdhikari7/online-store.

2. Install all the dependencies npm install or npm i.

3. Run the project npm start.

After these steps, the localhost server on port 3000 will start - localhost.

How to use

After localhost is started by the React development server, the home page should look like below:

Now, you can search for the product by category using search input field. I have searched for Electronics category products:

Also, you can view the details of certain product by clicking on it.

There is also add to cart functionality. I have added certain products to the add in below screenshot:

Responsiveness

Responsive home page:

Responsive detail page:

Responsive cart page:

What have I used

1. As frontend library, I have used React.
2. For getting the product data, I have used Fake Store API.
3. For routing, I have used react-router-dom.
4. As CSS Pre-processor, I have used SASS.
5. For global state management, I have used Redux with redux-toolkit.
6. For react binding, I have used React Redux.
7. For toaster, I have used React Toastify.