README.md

About The Project

This repository contains all frontend and backend code used for creating hiveonboard.com - a landing page for people who are interested in the HIVE blockchain project and want to get involved. One of most important use cases is a simple to use account creation flow.

The app is build on ReactJS for frontend, NodeJS for backend and makes use of several open source libs - covered at the end of this file.

More about the project is covered on @hiveonboard blog on HIVE: https://peakd.com/@hiveonboard

Getting Started

Prerequisites

This project uses Firebase for easy deployable and scalable infrastructure. In order to deploy this project you have to create a free account.

It's also possible to run this app on a linux machine with self hosted webserver, db and nodejs backend. Feel free to make a fork and adjust it to your needs.

Installation

• Fork the repository

git clone https://github.com/christianfuerst/hiveonboard

• Install frontend dependencies

cd hiveonboard
npm install

• Install backend dependencies

cd functions
npm install

• Change back to root directory and install Firebase CLI

cd ..
npm install -g firebase-tools

• Sign into Firebase using your Google account

firebase login

• Go to Firebase console -> Create new project

• Go to Firebase project -> Create Web-App and follow the instructions

• Create a new file /config/firebase.json using the template file in the same folder

• Put in your settings from the Web-App you just created

• Go to Firebase project -> Database and create a cloud firestore instance in your region

• Go to Firebase project -> Authentication and enable Phone Sign-In

• Create file .firebaserc on root folder using this template and insert your project name

{
  "projects": {
    "default": "your-project-name"
  }
}

Configuration

• Create a new file /functions/config.json from the template file in the same folder

{
  "account": "INSERT-HIVE-ACCOUNT",
  "password": "INSERT-HIVE-ACTIVE-KEY",
  "rcThreshold": 30,
  "creator_instances": [
    {
      "creator": "NAME-OF-WHALE-ACCOUNT",
      "endpoint": "ENDPOINT-URI",
      "apiKey": "YOUR-API-KEY"
    }
  ]
}

• The file contains the HIVE account which will be used to claim account creation tickets and create accounts from this tickets
• Optional: Add API enabled https://github.com/fbslo/creator instances to use additional account, where keys aren't under your control. If no instance is available leave an empty array [].

Build and Deploy

• Build a production build for the React app

npm run build

• Deploy to Firebase

firebase deploy

Run the app in development mode

npm start

Dependencies (frontend)

• @hiveio/hive-js: Hive.js the JavaScript API for Hive blockchain
• @material-ui/core: React components that implement Google's Material Design.
• @material-ui/lab: Material-UI Lab - Incubator for Material-UI React components.
• @mui-treasury/components:
• @testing-library/jest-dom: Custom jest matchers to test the state of the DOM
• @testing-library/react: Simple and complete React DOM testing utilities that encourage good testing practices.
• @testing-library/user-event: Simulate user events for react-testing-library
• clsx: A tiny (229B) utility for constructing className strings conditionally.
• firebase: Firebase JavaScript library for web and Node.js
• formik: Forms in React, without tears
• lodash: Lodash modular utilities.
• react: React is a JavaScript library for building user interfaces.
• react-dom: React package for working with the DOM.
• react-phone-input-2: A react component to format phone numbers
• react-router-dom: DOM bindings for React Router
• react-scripts: Configuration and scripts for Create React App.
• reactfire: Firebase library for React
• yup: Dead simple Object schema validation

Dependencies (backend)

• @hivechain/dhive: Hive blockchain RPC client library
• axios: Promise based HTTP client for the browser and node.js
• firebase-admin: Firebase admin SDK for Node.js
• firebase-functions: Firebase SDK for Cloud Functions
• lodash: Lodash modular utilities.