👉 Get Started

Install dependencies

npm install

Update your .env file with values for each environment variable

API_KEY=AIzaSyBkkFF0XhNZeWuDmOfEhsgdfX1VBG7WTas
etc ...

Run the development server

npm run start

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 with React Router
• UI Kit - Bootstrap
• Analytics - Google Analytics
• Hosting - TBD

📚 Guide

Styles

You can edit Bootstrap SASS variables in the global stylesheet located at src/styles/global.scss. 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 Bootstrap docs to see if you can do what need by tweaking a SASS variable.

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 src/components/Navbar.scss. We ensure custom styles are scoped to their component by prepending the classname with the component name (such as .Navbar__brand). 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.

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>
  );
}

Deployment

Build your front-end for deployment

npm run build

Then upload or deploy to your host. Exact details depend on your chosen host.

Your host may automatically read your environment variables from your .env file. If not, be sure to add each variable from .env to your host through their own UI. You can skip the ones in the lower section of .env (prepended with "REACT_APP_") because those were already bundled into your front-end when you ran npm run build.

Have your host run node api to serve your web app. This will run a Node server that handles both your API endpoints and front-end. By default your server will be listening on port 8080, but if your host expects a different port then you can set that by specifying a PORT environment variable. Some hosts will automatically set this environment variable to their desired port.

You can find extended information and host-specific details in the Create React App deployment docs.

Other

This project was created using Divjoy, the React codebase generator. You can find more info in the Divjoy Docs.