👉 Get Started

Install dependencies

npm install

Update your .env file with values for each environment variable

REACT_APP_STRIPE_PUBLISHABLE_KEY=...
REACT_APP_STRIPE_API_VERSION=...
STRIPE_API_VERSION=...
STRIPE_SECRET_KEY=...
STRIPE_DOMAIN=...
STRIPE_WEBHOOK_SECRET=...
REACT_APP_STRIPE_PRICE_STUDENT=...
REACT_APP_STRIPE_PRICE_REGULAR=...
REACT_APP_STRIPE_PRICE_GRATIS=...
NODE_ENV=...
REACT_APP_GA_TRACKING_ID=...
PUBLIC_URL=..
MAILCHIMP_API_KEY=...
MAILCHIMP_AUDIENCE_ID=...
REACT_APP_SHEETS_ENDPOINT=...
REACT_APP_SHEETS_TAB_ID=...

Install the Stripe CLI - complete all steps under Section 1: Install Stripe Libraries and Tools, including logging in.

Run the development server

npm run start

In a separate terminal window run your API endpoints 

node api

When the above command completes you'll be able to view your website at `http://localhost:3000`

## 🥞 Stack
This project uses the following libraries and services:
- Framework - [Create React App](https://create-react-app.dev) with React Router
- UI Kit - [Bootstrap](https://react-bootstrap.github.io)
- Authentication - TBD
- Database - TBD
- Payments - [Stripe](https://stripe.com)
- Newsletter - [Mailchimp](https://mailchimp.com)
- Contact Form - [Google Sheets](https://www.google.com/sheets/about/)
- Analytics - [Google Analytics](https://googleanalytics.com)
- Hosting - TBD


## 📚 Guide
<details>
<summary><b>Styles</b></summary>
<p>
  You can edit Bootstrap SASS variables in the global stylesheet located at <code><a href="src/styles/global.scss">src/styles/global.scss</a></code>. Variables allow you to control global styles (like colors and fonts), as well as element specific styles (like button padding). Before overriding Bootstrap elements with custom style check the <a href="https://getbootstrap.com/docs/4.3/getting-started/introduction/">Bootstrap docs</a> to see if you can do what need by tweaking a SASS variable.
</p>
<p>
  Custom styles are located in their related component's directory. For example, if any custom style is applied to the Navbar component you'll find it in <code>src/components/Navbar.scss</code>. We ensure custom styles are scoped to their component by prepending the classname with the component name (such as <code>.Navbar__brand</code>). This ensures styles never affect elements in other components. If styles need to be re-used in multiple components consider creating a new component that encapsulates that style and structure and using that component in multiple places.
</p>
</details>

<details>
<summary><b>Routing</b></summary>
<p>
  This project uses <a target="_blank" href="https://reacttraining.com/react-router/web/guides/quick-start">React Router</a> and includes a convenient <code>useRouter</code> hook (located in <code><a href="src/util/router.js">src/util/router.js</a></code>) that wraps React Router and gives all the route methods and data you need.

```js
import { Link, useRouter } from './../util/router.js';

function MyComponent(){
  // Get the router object
  const router = useRouter();

  // Get value from query string (?postId=123) or route param (/:postId)
  console.log(router.query.postId);

  // Get current pathname
  console.log(router.pathname)

  // Navigate with the <Link> component or with router.push()
  return (
    <div>
      <Link to="/about">About</Link>
      <button onClick={(e) => router.push('/about')}>About</button>
    </div>
  );
}

Authentication

This project wasn't setup with a particular auth service in mind, but includes a useAuth hook (located in src/util/auth.js) that allows you to prototype auth flows. Before moving to production you'll want to edit that file to make calls to an actual authentication provider.

import { useAuth } from './../util/auth.js';

function MyComponent(){
  // Get the auth object in any component
  const auth = useAuth();

  // Depending on auth state show signin or signout button
  // auth.user will either be an object, null when loading, or false if signed out
  return (
    <div>
      {auth.user ? (
        <button onClick={(e) => auth.signout()}>Signout</button>
      ) : (
        <button onClick={(e) => auth.signin('hello@divjoy.com', 'yolo')}>Signin</button>
      )}
    </div>
  );
}

Database

This project wasn't setup with a particular database in mind, but includes some data fetching hooks to get you started (located in src/util/db.js) and a basic REST API (located in api) where you can connect to your database of choice.

import { useAuth } from './../util/auth.js';
import { useItemsByOwner } from './../util/db.js';
import ItemsList from './ItemsList.js';

function ItemsPage(){
  const auth = useAuth();

  // Fetch items by owner
  // Returned status value will be "idle" if we're waiting on 
  // the uid value or "loading" if the query is executing.
  const uid = auth.user ? auth.user.uid : undefined;
  const { data: items, status } = useItemsByOwner(uid);

  // Once we have items data render ItemsList component
  return (
    <div>
      {(status === "idle" || status === "loading") ? (
        <span>One moment please</span>
      ) : (
        <ItemsList data={items}>
      )}
    </div>
  );
}

Deployment

This project wasn't setup with a specific web host in mind. Please follow the Create React App deployment docs to learn how to deploy your project to various hosts.

Other

The Create React App documention covers many other topics. This project was initially created using Divjoy, a React codebase generator. Feel free to ask questions in the Divjoy forum and we'll do our best to help you out.