This is a sample e-comerce website

• Technologies Used
• Design Patterns
• Environment Variables
• Getting Started
• Available Scripts
• Deployment
• License

• React
• React Redux
• Redux Saga
• TypeScript
• Node.js (version 16)

• Higher Order Components (HOC)

  HOC design pattern is used in this project. You can see the HOC components in path src\modules\shared\components\hoc

  You will be able to see 3 hoc components used.

  • Infinite Scroll - This component holds the logic to do the infinite scrolling and used in src\modules\recomendation\components\recommendationContainer\recommendationContainer.tsx to display the product recomendations. We also can use this infinite hoc to implement any infinite scrolling feature which will reuse the logic.

    Sample usage

    export default connect(mapStateToProps,mapDispatchToProps)(withInfiniteScroll(RecommendationContainer));

  • Main Layout

• Provider Design Pattern

  Provider design pattern is used with Redux store as it defaults to provider design pattern

Clone the project

 git clone https://github.com/nipuna21018/xyz-shop

Go to the project directory

 cd xyz-shop

Install dependencies

 npm install

Create .env file

 touch .env

Add & save below to .env

REACT_APP_AUTH_SERVICE_URL=https://api.escuelajs.co/api/v1/auth REACT_APP_API_BASE_URL=https://8c155025-93d6-4ead-a36d-9afdf9c1f291.mock.pstmn.io

Start the server

 npm run start

 npm run test