My First JavaScript Web App using Firebase and React

I built my first JavaScript Web App as a way to streamline our team’s sprint retrospective session. Our team follows the Start, Stop, Continue, More of, Less of Wheel retrospective technique as it encourages each team member to come up with ideas for team-based improvement.

The Process

  1. Draw a circle on a white board, dividing it into 5 sections: “Start”, “Stop”, “Continue”, “More of” and “Less of.”
  2. Each team member comments on a post-it note and sticks it on the circle on the category it belongs to.
  3. Discuss each comment among the team.

Why make this app?

  1. Save Time. The average time of our retrospective sessions is 1 hour. That’s a long time!
  2. Save Trees. We wasted a lot of post-it notes per session.
  3. I wanted to build something using React.

Why Firebase?

I wanted a way to handle constantly changing data by multiple concurrent users in real-time, without refreshing the page. Firebase is essentially a real-time database that triggers an event on the app as changes occurs on the data. This allows you to update your app without having to refresh the page.

Firebase is an easy choice against other real-time application frameworks such as Socket.IO since you do not have to build a backend infrastructure, all you need to figure out is how to handle the data as it changes on your app.

I chose Firebase because its free and easy to use. They answer my hosting (Yes, Firebase can host your web app) and storage (Yup, they can host your database, too!) needs so I can just focus on the app itself.

The App

Here is my baby. Yes, I need to change the name. Source: Github

Once you’re in, it will ask you to join or create a session. Try joining session ‘test’ using any name.

To get started, all you need to do is click on a category on the circle and submit your comment. It will update the Review List on the right hand side with whatever you submitted.

It’s a simple app but it’s enough to save my team a lot of time.

As we all know, time is money.


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s