thapatechnical/thapareactecom

Welcome to Thapa Technical React Ecommerce Website Series

Follow the 3 Steps and you are good to go.

1: Clone the Project

2: simply run the command npm install - First to install all the packages

3: run the project using npm start

---

To get the source code guy's please check the Switch branches/tags and select the respective video branch for the source code ok..

Also I am creating a List of the video with the Link to the respective video code, you can checkout below 👇

---

• Main Starter Files of React Ecom Source Code

• Till Video 6 Source Code - Responsive Navbar

• Video 7 Source Code - Hero Section, Home & About Page

• Video 8 Source Code - Services & Trusted Section

• Video 9 Source Code - Contact Page with Email

• Video 10 Source Code - Footer Component

• Video 11 Source Code - 404 Error Page

• Video 12 Source Code - Context API

• Video 13 Source Code - Fech API data with Axios

• Video 14 Source Code - useReducer Hook for State mang.

• Video 15 Source Code - Feature Section Of Home Page

• Video 16 Source Code - Format Price Indian Currency

• Video 17th & 18th Source Code - Single Product Page with API

• Video 19 Source Code - Page Navigation & UI Part

• Video 20 Source Code - Dynmaic Image Filter Section

• Video 21 Source Code - Star Ratings & Reviews Section

• Video 22 Source Code - Dynamic Color Section

• Video 23 Source Code - Product Quantity Section

• Video 24 & 25 Source Code - Products Page Conext Setup

• Video 26, 27 & 28 Source Code - Products Page Sorting

• Video 29, 30, 31 & 32 Source Code - Products Page Sorting completed

• Video 33, 34, 35, 36 & 37 Source Code - Products Page Filters Till Colors

• Video 38, 39, & 40 Source Code - Products Page colors filter done

• Video 41, 42, & 43 Source Code - Product Filter completed

• Video 44 & 45 Source Code - Cart Context & Reducer

• Video 46 & 47 Source Code - Cart Table & Remove Btn

• Video 48, 49 & 50 Source Code - Till clear Cart Button

• Video 51, 52 & 53 Source Code - Add to Cart done

• Video 53, 54 & 55 Source Code - Complete Ecom Website Frontend done

thapareactecom's Issues

API Not working plz check

Abou page is missing

Issue in Navlink Pathname

i #7: Home & About Page with Hero Section (with Props 🔥)

        <NavLink to="#">
          <Button>show now</Button>
        </NavLink>

main branch missing many folders in src when compared to ecom_frontendDone_v55

Hello,
I came across different branches and I found that the main branch is not up to date with the most updated branch https://github.com/thapatechnical/thapareactecom/tree/ecom_frontendDone_v55
Is it done knowingly or is it a mistake? I am unsure. Hence decided to raise an issue.

getting issue with the reduce() method in cart reducer

if (action.type === "CART_ITEM_PRICE_TOTAL") {
        let { total_item, total_price } = state.cart.reduce(
            (accum, curElem) => {
                let { price, amount } = curElem;

                accum.total_item += amount;
                accum.total_price += price * amount;

                return accum;
            },
            {
                total_item: 0,
                total_price: 0,
            }
        );
        return {
            ...state,
            total_item,
            total_price,
        };
    }

getting this error with the reduce() method in cart reducer

cartReducer.js:109 Uncaught TypeError: Cannot read properties of null (reading 'reduce')
at cartReducer (cartReducer.js:109:1)
at updateReducer (react-dom.development.js:16664:1)
at Object.useReducer (react-dom.development.js:17898:1)
at useReducer (react.development.js:1626:1)
at CartProvider (cartContext.js:24:1)
at renderWithHooks (react-dom.development.js:16305:1)
at updateFunctionComponent (react-dom.development.js:19588:1)
at beginWork (react-dom.development.js:21601:1)
at HTMLUnknownElement.callCallback (react-dom.development.js:4164:1)
at Object.invokeGuardedCallbackDev (react-dom.development.js:4213:1)

getting issue with the reduce() method in cart reducer

if (action.type === "CART_ITEM_PRICE_TOTAL") {
let { total_item, total_price } = state.cart.reduce(
(accum, curElem) => {
let { price, amount } = curElem;

            accum.total_item += amount;
            accum.total_price += price * amount;

            return accum;
        },
        {
            total_item: 0,
            total_price: 0,
        }
    );
    return {
        ...state,
        total_item,
        total_price,
    };
}

webpack compiled with 2 errors

when i try to import singleproduct file in app.js it is showing multiple errors like:
ERROR in [eslint]
src/SingleProduct.js
Line 3: Parsing error: 'return' outside of function. (3:0)

webpack compiled with 2 errors
SyntaxError: /Users/tarunsara/reactecom/reactapple/src/SingleProduct.js: 'return' outside of function. (3:0)
1 | import styled from "styled-components";
2 |

3 | return ;
| ^
4 |
5 | const Wrapper = styled.section`
6 | .container {
ERROR in ./src/SingleProduct.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
SyntaxError: /Users/tarunsara/reactecom/reactapple/src/SingleProduct.js: 'return' outside of function. (3:0)

Api is Not Working Plz do something about it sir

as soon as possible

consol error - Cannot read properties of null

cart Reducer.js:138
Uncaught TypeError: Cannot read properties of null (reading 'reduce')

API is not working sir

resolve

Sorry About Component

On Refreshing the nested routes (i.e. /singleproduct/:id) logo image is dissappering .

issue can be resolved by changing the image path from "./images/logo.png" to "/images/logo.png". In the Header component

Sort.js:6 Uncaught TypeError: Cannot destructure property 'filter_products' of '(0 , _context_filter_context__WEBPACK_IMPORTED_MODULE_1__.useFilterContext)(...)' as it is undefined.

Sort.js:6 Uncaught TypeError: Cannot destructure property 'filter_products' of '(0 , context_filter_context__WEBPACK_IMPORTED_MODULE_1_.useFilterContext)(...)' as it is undefined.

API is not working thapa sir

Please look into this.

issue in the search bar on products page in mobile browser.

search bar in products filter section is working perfectly in the PC broswer
but when i used it in mobile browser it is not working.
Although when i inspect it on PC browser and go in responsive mobile mode or any other fixed mode its working perfectly but when i use this website in actual smartphone it is simply not working.
How can we solve this problem.
This problem is again seen in the https://thapaecomstore.netlify.app/ this website also.
Has anyone found its solution.

here if you observe clearly i am getting 4 products but not getting the results in the mobile browser.

add netlify link in readme

https://thapaecomstore.netlify.app/

api is not working please update it

issue in CASE_FILTERS

case "CLEAR_FILTERS":
return {
...state,
filters: {
...state.filters,
text: "",
category: "all",
company: "all",
color: "all",
// maxPrice:0,
//price:state.filters.maxPrice,
// minPrice:state.filters.maxPrice,
},
};

//the input range stuck after using the above commented line

but this works
case "CLEAR_FILTERS":
return {
...state,
filters: {
...state.filters,
text: "",
category: "all",
company: "all",
color: "all",
price:state.filters.maxPrice,

			},
		};

No 'Access-Control-Allow-Origin' header is present on the requested resource.

Access to XMLHttpRequest at 'https://api.pujakaitem.com/api/products' from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

Failed to load resource: net::ERR_FAILED api.pujakaitem.com/api/products:1
localhost-1674286544349.log