Makerdock

A platform for developer so share and discuss their projects

How to start contributing?

Comment on any issue that you want to pick up

👉 Get Started

Install dependencies

npm install

Create a file .env, copy the contents from .env.example.

cp .env.example .env

Create a firebase project, check this for more info. You would have to enable firestore, firebase google auth and create a service account and copy the values to the .env file.

Run the development server

npm run dev

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 - Next.js
UI Kit - Bulma
Authentication - Firebase Auth
Newsletter - Mailchimp
Analytics - Google Analytics
Hosting - Vercel

Setting up the Project

Fork the repo and clone it to your local machine.
For the project to work you have to setup a firebase project. Create a Project from the firebase console.
Enable firestore in your project and firebase auth (google and sign-in password) in your firebase console.
Once that is done, duplicate the .env.example file and rename it to just .env. Grab the keys from firebase console and paste it in the .env file.
Run npm install to install the dependencies and npm run dev to start the project. More details are available in the guide section.
To check your local deployment, login to vercel and link your github repo that you forked to it.
Whitelist vercel domains on your firebase auth Authorized Domains as well.

📚 Guide

Styles

You can edit Bulma 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 Bulma elements with custom style check the Bulma 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 the built-in Next.js router and its convenient useRouter hook. Learn more in the Next.js docs.

import Link from "next/link";
import { useRouter } from "next/router";

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 href="/about">
        <a>About</a>
      </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 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
  // It's okay if uid is undefined while auth is still loading
  // The hook will return a "loading" status until it has a uid
  const uid = auth.user ? auth.user.uid : undefined;
  const { data: items, status } = useItemsByOwner(uid);

  // Once we items data then render ItemsList component
  return (
    <div>
      {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 Next.js documentation 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.