Merge pull request #26 from ncalteen/main

Update Node.js, NPM, React versions

.babelrc

@@ -0,0 +1,6 @@
+{
+  "presets": [
+    "@babel/env",
+    "@babel/preset-react"
+  ]
+}

.gitignore

@@ -1,27 +1,14 @@
-# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
-
-# dependencies
+# Dependencies
 /node_modules
 /.pnp
 .pnp.js
 
-# testing
+# Testing
 /coverage
 
-# production
-/build
+# Build
+/dist/bundle.js
+/dist/index.html
 
-# misc
+# Misc
 .DS_Store
-.env.local
-.env.development.local
-.env.test.local
-.env.production.local
-
-npm-debug.log*
-yarn-debug.log*
-yarn-error.log*
-
-.firebase/
-
-.eslintcache

.prettierignore

@@ -0,0 +1,5 @@
+.github/
+.vscode/
+node_modules/
+build/
+dist/

.prettierrc.yml

@@ -1,10 +1,10 @@
-# Copyright 2020 Google LLC
+# Copyright 2022 Google LLC
 #
 # Licensed under the Apache License, Version 2.0 (the "License");
 # you may not use this file except in compliance with the License.
 # You may obtain a copy of the License at
 #
-#      http://www.apache.org/licenses/LICENSE-2.0
+# https://www.apache.org/licenses/LICENSE-2.0
 #
 # Unless required by applicable law or agreed to in writing, software
 # distributed under the License is distributed on an "AS IS" BASIS,
@@ -18,4 +18,4 @@ quoteProps: consistent
 semi: true
 singleQuote: true
 tabWidth: 2
-trailingComma: all
+trailingComma: none

CONTRIBUTING.md

@@ -1,29 +1,33 @@
 # How to Contribute
 
-We'd love to accept your patches and contributions to this project. There are
-just a few small guidelines you need to follow.
+We'd love to accept your patches and contributions to this project.
 
-## Contributor License Agreement
+## Before you begin
 
-Contributions to this project must be accompanied by a Contributor License
-Agreement (CLA). You (or your employer) retain the copyright to your
-contribution; this simply gives us permission to use and redistribute your
-contributions as part of the project. Head over to
-<https://cla.developers.google.com/> to see your current agreements on file or
-to sign a new one.
+### Sign our Contributor License Agreement
 
-You generally only need to submit a CLA once, so if you've already submitted one
-(even if it was for a different project), you probably don't need to do it
-again.
+Contributions to this project must be accompanied by a
+[Contributor License Agreement](https://cla.developers.google.com/about) (CLA).
+You (or your employer) retain the copyright to your contribution; this simply
+gives us permission to use and redistribute your contributions as part of the
+project.
 
-## Code reviews
+If you or your current employer have already signed the Google CLA (even if it
+was for a different project), you probably don't need to do it again.
+
+Visit <https://cla.developers.google.com/> to see your current agreements or to
+sign a new one.
+
+### Review our Community Guidelines
+
+This project follows [Google's Open Source Community
+Guidelines](https://opensource.google/conduct/).
+
+## Contribution process
+
+### Code Reviews
 
 All submissions, including submissions by project members, require review. We
 use GitHub pull requests for this purpose. Consult
 [GitHub Help](https://help.github.com/articles/about-pull-requests/) for more
 information on using pull requests.
-
-## Community Guidelines
-
-This project follows
-[Google's Open Source Community Guidelines](https://opensource.google/conduct/).

README.md

@@ -1,52 +1,73 @@
-*This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).*
-
 # Sample React T-Shirt Store
 
-The purpose this repository is to showcase the Google Pay integration in a store built with React.
+The purpose this repository is to showcase the Google Pay integration in a store
+built with React.
+
+A deployed version of this app can be found at this link.
+
+**Note:** This sample app is not intended for use in a production environment!
+Please do not attempt to use it in this manner. For more information on
+deploying apps to production, see the
+[React documentation](https://create-react-app.dev/docs/deployment/).
+
+## Prerequisites
 
-[![Sample image of the react store](docs/images/react-store-sample-image.png)](https://payments-react-store.web.app/)
+To configure and run this sample app, you will need the following prerequisites
+installed on your workstation:
 
-The [`main`](https://github.com/google-pay/react-store/tree/main) branch contains basic store functionality while the [`google-pay`](https://github.com/google-pay/react-store/tree/google-pay) branch contains the code changes and commits required to add Google Pay integration.
+*   [Node.js and NPM](https://docs.npmjs.com/downloading-and-installing-node-js-and-npm)
+*   Any prerequisites included in the
+    [React Documentation](https://reactjs.org/docs/getting-started.html)
 
-## Available Scripts
+## Setup
 
-In the project directory, you can run:
+Once the prerequisites are installed, follow the below steps to set up and use
+this sample app:
 
-### `npm start`
+1.  Clone this repository
+1.  In your terminal, navigate to the repository location
 
-Runs the app in the development mode.<br />
-Open [http://localhost:3000](http://localhost:3000) to view it in the browser.
+    ```bash
+    cd /path/to/repo
+    ```
 
-The page will reload if you make edits.<br />
-You will also see any lint errors in the console.
+1.  Install the Node.js dependencies
 
-### `npm test`
+    ```bash
+    npm install .
+    ```
 
-Launches the test runner in the interactive watch mode.<br />
-See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.
+1.  Build `index.html` and `bundle.js`
 
-### `npm run build`
+    ```bash
+    npm run build
+    ```
 
-Builds the app for production to the `build` folder.<br />
-It correctly bundles React in production mode and optimizes the build for the best performance.
+## Usage
 
-The build is minified and the filenames include the hashes.<br />
-Your app is ready to be deployed!
+### Development server
 
-See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.
+To start a development server, follow the below steps:
 
-### `npm run eject`
+1.  In your terminal, run `npm start`
+1.  In your web browser, open `http://localhost:3000/`
 
-**Note: this is a one-way operation. Once you `eject`, you can’t go back!**
+The app will automatically reload if you change any of the source files. You
+will also see any lint errors in the console.
 
-If you aren’t satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project.
+### Build
 
-Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you’re on your own.
+This command builds the app and outputs the results to the `dist/` directory.
+It bundles React in production mode and optimizes the build for the best
+performance. The build is minified and the filenames include the hashes.
 
-You don’t have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn’t feel obligated to use this feature. However we understand that this tool wouldn’t be useful if you couldn’t customize it when you are ready for it.
+1.  In your terminal, run `npm run build`
 
-## Learn More
+## Support
 
-You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started).
+For more information about React, refer to the
+[React documentation](https://reactjs.org/).
 
-To learn React, check out the [React documentation](https://reactjs.org/).
+For any questions on this sample app, please
+[submit an issue](https://github.com/google-pay/angular-store/issues/new) to
+this repository.