Setup a planning tool for your scrum team : open-source (FERN stack)

7 min readFeb 29, 2024

You need a basic JavaScript & React understanding and should be able to run few CLI commands on the terminal. In 30–45 mins you will have your own sprint planning tool up and running.

However before you embark on setting up this project, it is highly recommended to go over the demo first :

Open-Source : Not a Planning poker. New Way.

If you work in an agile setting and conduct planning ceremonies, then this story might be useful to you.

jha-amarjit.medium.com

12 Steps across 4 categories :
1. Firebase Infrastructure setup
2. Get a pair of captcha key
3. Fork Git project, make necessary edits
4. Deploy

Preconditions :

1. A Google account, which you would use to set this up
2. A system with NodeJs version 18 (critical). If you are running any other version, recommend to switch to 18, finish this work and then switch back to your previous version
2. NPM installed
3. Visual studio code
4. And have a notepad open

1. Setup a Firebase project

Head over to https://firebase.google.com and click on “Get started”.
In the following step click on “Add project” option.
Enter a name for the project eg. “StorySizer”
In the next step say “No” to Google Analytics
Click on “Create project”
Once done click on continue.

It would take you to your firebase project console.

2. Add a Web Project instance

Click on the web-app icon as highlighted in the screenshot below
In the next screen enter a name for the app eg. story-sizer-web and ensure to check Firebase Hosting option

In next screen — copy the firebaseConfig settings and keep it safe in a notepad. We gonna need that soon.

Click “Next” & Next again and complete the setup

3. Configure a resource location (region)

Select an appropriate region where your data needs to reside.

From firebase console, go to project settings and then select the region. Remember once a region is selected, it can not be changed again. Pay extra care.

For a India scenario, in the example below we have asia-south1 selected which represents Mumbai region.

Whatever region that you select add it to the notepad, we gonna need it.

4. Enable Authentication Type

Enable anonymous login. Anonymous login enforces the user-specific security and firebase rules without requiring credentials or having the user perform any kind of sign up or login manually.

5. Setup Firestore Database

NoSQL database for holding the data.

Select option “Firestore database”
Click on “Create Database” button
Ensure to select the same location as selected in step 3
Go ahead with “production mode” selected and click on “Create” button

Don’t worry about the script. That will be changed with script at later stages.

6. Enable Blaze plan for your project

I know it may’ve intimidated you but let me assure you. An individual team never incurs any cost. However you can set a budget-alert of Rs 100 (little over a dollar), in case anything goes wrong you can get an alert to act upon it.

In order to verify the credit card Google will charge your card a tiny amount ie. Rs 2, which shall be refunded later as well.

For information, this project usage following firebase infrastructure. To be able to use them the project has to be on the Blaze plan.

Functions — NodeJs backend for API purposes
Firestore — NoSQL database
Hosting — Hosts the front-end website

You should find the option to upgrade to blaze plan at the bottom left corner of the firebase console.

7. Acquire a pair of Google reCAPTCHA key

Head over to https://www.google.com/recaptcha/admin/create

reCAPTCHA is used for the purpose of authenticating human interactions :)

Enter a label eg. Story Sizer
Select score based V3 ( Verifies requests with a score)
White list 2 domains :

1. localhost
2. A domain that you will receive after deployment. We have it covered in step 12.

In next screen — copy the site key and secret key and keep it safe in a notepad. We gonna need them soon.

8. Fork the Git repo on your local machine

Project location

GitHub - jhaspider/pointastory: Planning tool for your scrum team - open-source ( FERN stack )

Planning tool for your scrum team - open-source ( FERN stack ) - jhaspider/pointastory

github.com

Open the project in an IDE eg. Visual Studio Code
Open a terminal and CD into the project directory

9. Do some installations

In the following sections, pls read the inline comments for help.

#Install dependencies for firebase function
$cd functions
$npm install
$cd ..

# Installs all the packages
$npm install

# Install firebase tools at the global scope, helps you run firebase command from terminal
# Firebase CLI is critical to complete the deployment
$npm install -g firebase-tools

10. Login to firebase on your terminal

# For the following firebase commands to work, you must have 
# installed firebase-tools successfully in the previous step

# Ensure no other firebase session is on
$firebase logout

# Ensure to use the same gmail account that you used in Step 1
# It will launch your default browser to perform the login step
$firebase login

# After login, if you hit the following command, 
# you should be able to see the project you just created on Firebase.
$firebase projects:list

11. Code level configurations and deployment

In the previous steps you were asked to copy and save firebase projects settings, region/location and reCAPTCHA keys. Its time to use them in code.

Pls read the inline comments below, carefully. Ensure that you are still at the root of the project.

# Create copies of the settings_template.json as settings.json
$cp src/settings_template.json src/settings.json
$cp functions/src/settings_template.json functions/src/settings.json
$cp .firebaserc_template .firebaserc

// Open .firebaerc in Visual Studio

// Copy projectId from the firebase settings saved in Notepad
{
  "projects": {
    "default": "<YOUR_PROJECT_ID>"
  }
}

Deploy functions (apis) :

// Open functions/src/settings.json in Visual Studio

// Configure reCAPTCHA secret key & region
// Careful here - There were 2 keys which were acquired from reCAPTCHA
// use the Secret key (Not Site Key)
{
  "captchSecret": "<YOUR_CAPTCHA_SECRET_KEY>"
  "region": "<REGION>" // region that you saved in Step 6
}

# Deploy functions and acquire an API base url

# This is deploying the back-end
# Run following command from terminal
# Ensure to use the same terminal instance where firebase login was performed
$firebase deploy --only functions


# If deployment goes through successfully, 
# you should be able to see a an URL printed on the terminal itself, 
# somewhat similar to one given below
# EG. https://asia-south1-storysizer-xxxxx.cloudfunctions.net

# Copy that without the trailing slash and keep it safe. 
# We gonna need that in next step

Deploy firestore (NoSQL database indexes) :

# Deploy Firestore
# The NoSQL database along with required indexes
$firebase deploy --only firestore

Deploy front-end :

// Open src/settings.json in Visual Studio

// If you have completed all the step previously,
// you must be having all these information handy

{
  "captchaSiteKey": "<YOUR_CAPTCHA_SITE_KEY>",
  "apiBaseUrl": "<YOUR_API_BASE_URL>",
  "firebase": {
    "apiKey": "<YOUR_API_KEY>",
    "authDomain": "<YOUR_AUTH_DOMAIN>",
    "projectId": "<YOUR_PROJECT_ID>",
    "storageBucket": "<YOUR_STORAGE_BUCKET>",
    "messagingSenderId": "<YOUR_MESSAGING_SENDER_ID>",
    "appId": "<YOUR_APP_ID>"
  }
}

# Deploy the front-end

# Build the project
$npm run build

# Deploy to firebase
$firebase deploy --only hosting

# If the deployment goes through successfully
# you would see a hosted url printed on the terminal
# EG. https://storysizer-xxxxx.web.app

# This is the url that you & your team should use to run the projects
# Copy and Save the URL. We will have to white list this on reCAPTCHA ( Which was due in Step 7)

12. White list the domain at reCAPTCHA

Head over to https://www.google.com/recaptcha/admin
Ensure that the reCAPTCHA instance that you created atstep 7 is selected.
Click on the settings icon
On the next screen, under domain section, white list the domain eg. https://storysizer-xxxxx.web.app. Enter the domain without https.