The Technology Behind Carnivore Coach
Tags: angular, typescript, android
Published: 2019-11-10 16:18:24

Carnivore Coach is an Android app that I designed to help people track their progress on the carnivore (zero-carb) diet. I wrote about [the business decisions behind Carnivore Coach](https://www.zakmiller.com/posts/carnivore-coach-business/), but today I'm going to talk about the tech stack and the reasoning behind it.

## Mobile Framework and Language
When it comes to mobile development you have a few options:

1. Native (Java/Kotlin or Objective-C/Swift)
1. Web Technologies + Cordova
1. Xamarin (C#)
1. Flutter (Dart)

There are some genuine tradeoffs here:

 - Native is fast but specific to either Android or iOS
 - Flutter is not quite as fast and is sort of arcane technology, but it lets you deploy on both platforms.
 - Xamarin lets you write in C# (a language I'm very familiar with) and deploy on both platforms, but the functionality is limited and slower than Flutter.
 - Web technologies are slowest of all, but the Ionic/Cordova ecosystem has a lot of great components, and it also lets you deploy to iOS or Android.

I chose web technologies for a simple reason: I wanted to get better at Angular and Typescript. I didn't know whether Carnivore Coach would make me any money, but I could guarantee that I would learn some technologies useful to me.

I used v4 of the [Ionic Framework](https://ionicframework.com/docs/api) which I would highly recommend if you want to write an Angular app for mobile. I have heard good things about [React Native](https://facebook.github.io/react-native/) but I wanted to learn more about Angular so it was off the table immediately.

Ionic really shines in a couple of areas:

- It provides web components that mimic the look and feel of native controls, so you don't have to worry about styling HTML elements in a native-esque way.
- It has libraries that abstract away native functionality (e.g. storing data locally, interacting with Facebook auth, etc) and will work with the same code on both Android and iOS, so you can just write the code once.

Ionic also integrates with Cordova to the degree that you don't ever really have to worry about it.

## Backend

When it came to the backend, I chose [Firebase](https://firebase.google.com/).

I just needed:

- Account management and auth
- A place to store some data (e.g. resources to learn more about the diet, food statistics).
- The users' data so that they could go back and review it (e.g. what they ate, their weight, etc).

This was mostly painless to set up using Firebase, and I plan on using Firebase in the future wherever I can. You can read about how I ran into a little bit of pain with [Ionic Firebase Auth](https://www.zakmiller.com/posts/why-ionics-firebase-authentication-package-sucks/), but the fact that _I didn't have to write any backend code at all_ really sold me. It's funny, because I've always been a backend developer, but I guess I'm more excited about quickly building things than backend design because I was happy to outsource all that work to Firebase.

## The Website

I knew that I wanted to have a website to help market Carnivore Coach. As usual, my goal was to have something that looked professional and had the functionality I wanted, without spending any more time or money than necessary.

### Hosting
I heard about Netlify on [Traversy Media's Youtube Channel](https://www.youtube.com/channel/UC29ju8bIPH5as8OGnQzwJyA) and it seemed like a great option. Basically, Netlify hosts websites created with a static site generator. It's free for a single user and makes it very easy to set up HTTPS and auto-deploys when you push to GitHub.

### Technology
I hadn't had any prior exposure to static site generators, but it looked like the two options were [Jekyll](https://jekyllrb.com/) and [Hugo](https://gohugo.io/). I assumed both would be fine, but went with Hugo because it was newer and I was more interested in Golang than Node.js.

It took me a couple of weeks to become really comfortable with Hugo, but I probably could have reduced that time if I had spent less time trying to figure things out and more time [reading the docs](https://gohugo.io/documentation/). I wrote about how to [filter posts with a tag using Hugo](https://www.zakmiller.com/posts/filter-post-with-tag-hugo/), one of the more interesting problems I ran into.

## At the End of the Day

I'm happy with the technologies I chose. I was able to get all of this done in my free time over about a month. That's not bad for not being very familiar with Angular, and having basically zero experience with mobile development, and no experience with Hugo.

If I was going to develop another mobile app, then I'd be tempted to go fully native. When the app starts up it has this annoying blue Ionic graphic, and it does seem a little slower than I'd like. That's really my only complaint.