README.md

# React Donation Checkout Frontend styled with Material Design

This application implements a donation checkout frontend using the [React](https://reactjs.org)
framework (16.8 hooks) and [Material-UI](https://material-ui.com) React components for [Material
Design](https://material.io/design).

# Alternative Implementations

## Framasoft Home Page / Page d'accueil du réseau Framasoft

[Framasoft](https://framasoft.org/fr/#soutenir) site uses the [Vue.js](https://vuejs.org) framework
and Sass for stylesheets.

* https://framagit.org/framasoft/accueil
* https://framagit.org/framasoft/accueil/-/tree/master/app/components/partials/Soutenir
* https://framagit.org/framasoft/accueil/-/blob/master/app/locales/fr/form.yml
* https://framagit.org/framasoft/accueil/-/blob/master/app/assets/scss/support.scss

# Running and Building the Application

Application is generated by the tool [Create React App](https://create-react-app.dev) that uses
Webpack internally.  See `package.json` for settings and
`node_modules/react-scripts/config/webpack.config.js`.

Note: **eslint-plugin-react-hooks** is included by default in Create React App.

1. Install [Node.js](https://nodejs.org/en) and [Yarn](https://yarnpkg.com) package manager
1. Install required packages in *node_modules* (it requires 425 MB of free space disk)
   ```
   yarn install

   or

   npm install
   ```
1. Build and serve the application for development
   ```
   yarn start

   or

   npm start
   ```
1. Go to http://localtest.me:3000/checkout
1. Build the application for production
   ```
   yarn build

   or

   npm run build
   ```

# Storybook

Start Storybook using `yarn storybook`

# Documentation using React Styleguidist

[React Styleguidist](https://react-styleguidist.js.org)

Start a style guide dev server using `npx styleguidist server`