XYZ Shop

This is a sample e-comerce website

Table of Contents

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

Technologies Used

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

Design Patterns

• 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

Run Locally

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

Test Locally

  npm run test