https://github.com/fullstorydev/react-shoppe-demo
FullStory React Web demo
https://github.com/fullstorydev/react-shoppe-demo
Last synced: about 1 year ago
JSON representation
FullStory React Web demo
- Host: GitHub
- URL: https://github.com/fullstorydev/react-shoppe-demo
- Owner: fullstorydev
- License: mit
- Created: 2020-02-18T20:08:16.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2024-02-22T15:39:16.000Z (over 2 years ago)
- Last Synced: 2024-02-22T15:40:32.424Z (over 2 years ago)
- Language: TypeScript
- Homepage:
- Size: 571 KB
- Stars: 0
- Watchers: 9
- Forks: 6
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
**Deprecation Notice**
As of February 22nd, 2024, this repository will no longer have any maintenance performed, but will remain published in its current form for the time being. Please be sure to consider this when utilizing any of the information & code found within.
# Reactshoppe
Running [FullStory](https://www.fullstory.com/) in a React + Redux + TypeScript application.
Reactshoppe uses [Create React App](https://create-react-app.dev/docs/adding-typescript/). FullStory is installed with the [Browser SDK on NPM](https://www.npmjs.com/package/@fullstory/browser).
## Setup
- You'll need to have [node.js](https://nodejs.org/) installed on your machine and you'll need a [FullStory account](https://www.fullstory.com/plans/).
- Once you've cloned this repo, `cd` into the root of the project (the same directory with the `package.json` file).
- Run `npm install`
- Copy the .env_sample file to .env and update the `REACT_APP_FULLSTORY_ORG` with your FullStory Org Id. Find out how to get your Org Id [here](https://help.fullstory.com/hc/en-us/articles/360047075853).
## Getting Started
Run either `npm start` or `yarn start` to start up Reactshoppe on your machine (most likely running at `http://localhost:3000/`). FullStory will start recording right away. You can [login to your account](https://app.fullstory.com/login/) and look for your session. Sometimes it might take a minute for your very first session to show up.
## Go Shoppe-ing
Reactshoppe is a very simple fake ecommerce site. You can add products to your cart from the product grid, edit your shoppe-ing cart, and checkout. No data is transacted and no products are purchased. This is all for fun.
## Privacy Controls
During replay, you'll notice that the checkout form has billing and payment fields blocked.
These are FullStory's privacy controls in action. Learn more about how privacy controls work [here](https://help.fullstory.com/hc/en-us/articles/360020623574-How-do-I-exclude-elements-to-protect-my-users-privacy-in-FullStory-).
## Bonus Features
Every Redux action is logged to the FullStory console using the [FS.log() function](https://developer.fullstory.com/logging). You can view the action sequence in the [FullStory Console](https://help.fullstory.com/hc/en-us/articles/360020828533-How-do-I-use-the-FullStory-Console-) during replay to help troubleshoot any issues that might be related to data flow:
- Actions running out of sequence
- Actions not occuring at all
This uses the `recordAction` [middleware](https://github.com/fullstorydev/react-shoppe-demo/blob/master/src/store/recordAction.ts) included in the source code.