puskark4 / react

Thus is a react library with payments etc enabled..

👉 Get Started

Install dependencies

npm install

Update your .env file with values for each environment variable

API_KEY=AIzaSyBkkFF0XhNZeWuDmOfEhsgdfX1VBG7WTas
etc ...

Install the Vercel CLI

npm install -g vercel

Link codebase to a Vercel project and run development server

vercel dev

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

Note: You can run just the front-end with npm run start, but vercel dev also handles running your API endpoints (located in the /api directory).

🥞 Stack

This project uses the following libraries and services:

• Framework - Create React App with React Router
• UI Kit - Material UI
• Authentication - Firebase Auth
• Database - Cloud Firestore
• Payments - Stripe
• Newsletter - Mailchimp
• Contact Form - Formspree
• Analytics - Google Analytics
• Hosting - Vercel

📚 Guide

Routing

This project uses React Router and includes a convenient useRouter hook (located in src/util/router.js) that wraps React Router and gives all the route methods and data you need.

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 uses Firebase Auth and includes a convenient useAuth hook (located in src/util/auth.js) that wraps Firebase and gives you common authentication methods. Depending on your needs you may want to edit this file and expose more Firebase functionality.

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('[e-mail]', 'yolo')}>Signin</button>
      )}
    </div>
  );
}

Database

This project uses Cloud Firestore and includes some data fetching hooks to get you started (located in src/util/db.js). You'll want to edit that file and add any additional query hooks you need for your project.

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

Install the Vercel CLI

npm install -g vercel

Add each variable from .env to your Vercel project with the following command. You'll be prompted to enter its value and then choose one or more environments (development, preview, or production). Learn more here.

vercel env add VARIABLE_NAME

Run this command to deploy a preview (for testing a live deployment)

vercel

Run this command to deploy to production

vercel --prod

See the Vercel docs for more details.

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.