👉 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 - Material UI
• Hosting - Netlify

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

Deployment

Install the Netlify CLI

npm install netlify-cli -g

Link codebase to a Netlify project (choose the "create and deploy manually" option)

netlify init

Add each variable from your .env file to your Netlify project, including ones prefixed with "REACT_APP_". You can also use the Netlify UI for this by going to your Site settings → Build & Deploy → Environment.

netlify env:set VARIABLE_NAME value

Build for production

npm run build

Then run this command to deploy to Netlify

netlify deploy

See the Netlify docs for more details.

Other

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