Install dependencies
npm install
Update your .env
file with values for each environment variable
API_KEY=AIzaSyBkkFF0XhNZeWuDmOfEhsgdfX1VBG7WTas
etc ...
Run your local database
Note: Local database is powered by json-server and writes to db.json
. It's just for prototyping. You'll need to update api/_db.js
and connect to your database of choice before deployment.
npm run json-server
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
This project uses the following libraries and services:
- Framework - Create React App with React Router
- UI Kit - Material UI
- Authentication - Firebase Auth
- Database - TBD
- Payments - Stripe
- Newsletter - Mailchimp
- Contact Form - Formspree
- Analytics - Google Analytics
- Hosting - TBD
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("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
This project was created using Divjoy, the React codebase generator. You can find more info in the Divjoy Docs.