https://github.com/noszczykmichal/minimalistic-storefront

A mock-up page of an imaginary online shop fetching data from a GraphQL endpoint.
https://github.com/noszczykmichal/minimalistic-storefront

apollo-graphql eslint interweave jest prettier react-transition-group reactjs redux redux-persist redux-toolkit typescript

Last synced: 5 days ago
JSON representation

A mock-up page of an imaginary online shop fetching data from a GraphQL endpoint.

• Host: GitHub
• URL: https://github.com/noszczykmichal/minimalistic-storefront
• Owner: noszczykmichal
• Created: 2022-10-23T13:18:53.000Z (about 2 years ago)
• Default Branch: main
• Last Pushed: 2023-09-26T23:39:17.000Z (over 1 year ago)
• Last Synced: 2023-09-27T07:42:27.501Z (over 1 year ago)
• Topics: apollo-graphql, eslint, interweave, jest, prettier, react-transition-group, reactjs, redux, redux-persist, redux-toolkit, typescript
• Language: TypeScript
• Homepage: https://minimalistic-storefront.web.app/
• Size: 1.84 MB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Minimalistic-storefront

> A mock-up page of an imaginary online shop, fetching data from the GraphQL endpoint.  

> You can check live demo [_here_](https://minimalistic-storefront.web.app/).

## Table of Contents

- [General Info](#general-information)

- [Technologies Used](#technologies-used)

- [Features](#features)

- [Setup](#setup)

- [Acknowledgements](#acknowledgements)

- [Contact](#contact)

## General Information

- As the name suggests, it is an imaginary online shop, fetching data from the GraphQL endpoint.

- It consists of three main pages:

  - PLP (product listing page)

  - PDP (product description page)

  - Cart page

- More info on the project and screenshots can be found in [Features](#features).

## Technologies Used

- [React](https://reactjs.org/blog/2022/03/29/react-v18.html)

- [React-Router](https://github.com/remix-run/react-router)

- [Typescript](https://www.typescriptlang.org/)

- [Apollo Client](https://www.apollographql.com/docs/react/)

- [React Transition Group](https://reactcommunity.org/react-transition-group/)

- [Redux](https://redux.js.org/)

- [Redux-Persist](https://github.com/rt2zz/redux-persist)

- [Interweave](https://interweave.dev/)

- [ESLint](https://www.npmjs.com/package/eslint)

- [Prettier](https://www.npmjs.com/package/prettier)

## Features

- Browse our store to choose from vast variety of products - whether you into tech or clothes you can be sure to find something that catches your eye.

  ![Example screenshot](./img/plp.png)

- Easily switch between range of accepted currencies.

  ![Example screenshot](./img/currency-switcher.png)

- Check what's in your cart at one click.

  ![Example screenshot](./img/cart-overlay.png)

- Visit a product page to learn more about product and configure it to your needs.

  ![Example screenshot](./img/pdp.png)

- Proceed to the cart to see summary of your current buy.

  ![Example screenshot](./img/cart.png)

## Setup

To run this project locally:

1. Clone this repository

```

  $git clone https://github.com/noszczykmichal/minimalistic-storefront

```

2. Go into the repository

```

  $cd minimalistic-storefront

```

3. Install dependencies

```

  $npm install

```

4. Run the app

```

  $npm start

```

## Acknowledgements

- Design and endpoint by [Scandiweb](https://github.com/scandiweb). The repo of the endpoint can be found [here](https://github.com/scandiweb/junior-react-endpoint).

## Contact

Built by [@noszczykmichal](https://michalnoszczyk.com/) - feel free to contact me!