Serverless — Handstandclub [Step 2]

This is the second step in my journey to become a senior developer. My goal is to take ownership of a big project from zero.

The checklist for this stage is:

1. Setup firebase and firestore
2. Add initial products to firestore
3. Deploy to environments

Missed things that I realised later

1. GTM tracking by environments
2. Error management

Progress

1. Setup firebase and firestore

This is very easy step. It just needs to go to firebase to the project that was created originally for the hosting and setup both firebase and firestore. It can also be done from the CLI but seemed easier from the dashboard. During the setup it generates a firebase configuration that is what is needed to connect with the “backend”. It looks like this:

const firebaseConfig = {
  apiKey: <API_KEY>,
  authDomain: <AUTH_DOMAIN>,
  projectId: <PROJECT>,
  storageBucket: <STORAGE_BUCKET>,
  messagingSenderId: <MESSAGING_ID>,
  appId: <APP_ID>
};

Firebase acts like an API that can work either as REST or realtime. Most of projects also need a database and that is firestore. It’s a No SQL database similar to MongoDB.

This article covers how to setup firebase and firestore easily.

2. Add initial products to firestore

On step 1 of the journey I only created a layout and used the products directly from a hardcoded array. All of the products were added to firestore using firebase. The main issue that I found is that as auth is not configured I had to update the rules from firebase to allow writing the items could be added.

3. Deploy to environments

This didn’t require much changes, only adding the firebase config in the github secrets and in the github workflow.

4. GTM tracking by environments

I followed this great article from MarketLytics that covers how to set up different GTM by environments. This will split the Analytics info so there is less noise allowing 2 split views: production and other environments (currently local is the other being used).

Also, Analytics allows to updated the custom dashboard so I have updated to be able to see the main things at this stage:

• Overview
• Sessions by channel grouping
• Users by country
• Users activity over time

5. Error management

This is a big topic in it’s own. It’s definitively something I need to have a strategy. For now, I just wanted to kick off so I build around it. I have only added an Error Boundary in case things fail it’s managed in some way.

Retro

What went well?

• There is good progress. I’m sticking to the initial plan and delivering above and beyond.
• A database will allow to grow faster.
• Improvements in Analytics and started taking into account Errors.

What could be improved?

• Organising better — I’m realising that is taking me a lot of time searching for information and thinking what is the best way to do it. The work is not very intensive when knowing exactly what needs to be done by I feel I spend a lot of time thinking and exploring options rather than doing. Taking into account that I do this during my free time it feels a little bit frustrating. A lot of times I start to explore ideas with are separate from the current task. Things that I would need to do in the future but it’s not today’s priorities. Probably the best is to find a better way to organise, store the ideas somewhere to be picked up later. => Action: trello board.
• Lack of metrics. It’s kind of difficult to evaluate progress without a value to compare. How do I know if I have performed better or worse than last month? At work we use a system of points per each piece of work that is helpful. Maybe it’s an option. Other alternative would be focusing on growth like visits to the website and then providing a value per functionality. This needs some further thought.

Actions

• Create a Trello Board to organize the ideas and work to be done.

Delivery

Analytics

The updates to the dashboard.

Website

There is not many visible changes here. The website looks almost the same but now the products come from firebase. I would expect the data to appear properly but this is most of what appears.

Firestore

XHR firebase

WS firebase

That’s all for now. If you have any comments or suggestions please let me know :)