Over the past few months I’ve been tracking my progress toward goals through a routine I call “Monday Metrics”.
In the beginning I print out eight to twelve pieces of paper with 4 or 5 questions on them. These are questions like “How many miles did you run this week?” or “How many new candidates joined Employbl?”.
On Monday evenings I look back at my workout log, database or Google Analytics and records my answers on a piece of paper.
The time has come; enter technology.
Instead of recording this information on loose pieces of paper and stashing them away in a drawer I want to be able to record my responses in the computer. That way I can see my progress over time.
Plus it’s a good excuse to play with new technology.
Choose your tech stack
What are you going to use to build it?
I’m pretty set on Netlify for the frontend. They make it easy to deploy front end applications with HTTPS/SSL, connected to Git, easy deployment, all the good stuff.
It’ll be a static site generated with vue-cli since I’m more familiar with Vue than React at the moment.
Where the decisions get tricky for me are in the data storage layer. I’ve worked with Laravel and MySQL, MongoDB with Node.js and Firebase a long time ago.
The new hotness is Serverless and Netlify offers the ability to trigger Lambda Functions (Lambda Functions on Netlify).
That is definitely dope, but it doesn’t help me store my data. Lambda functions are spun up and deleted for the life of the request.
After some research these are the options I came up with, circa April 2019:
Option 1: No code ❌
There’s a whole “you can build things without learning to code” movement going on right now led by guys like Pieter Levels and Ben Tossell. It’s certainly worth thinking about. Do I really need to build this myself?
There’s a community out there on IndieHackers that provides support for internet entrepreneurs, some that code, others who don’t.
Of all the tools in the “you don’t have to code” toolbelt Webflow looks the most promising to me for building websites.
They have some generous pricing tiers, with two free sites. It’s tempting but to not get stuck in a rabbit hole on this simple project I’m going to keep looking...
Option 2: Airtable API 🏆
What I’m going to do is build a static site with Vue.js, host it on Netlify and then have Netlify Functions invoke the Airtable API to store my data.
My data will be stored in Airtable, which I’m already using and love. It’s easy to group sort, search and filter from any web browser. Plus, it’s free and there’s no database to worry about.
Before presenting how to build this thing I’d like to lay out some more technical options for the non-Airtable fans...
Firebase: I mentioned Firebase earlier. I know they have an awesome real time data store but don’t know what the ecosystem has become since I last used it. They offer authentication and more.
MongoDB: I bet we could create a MongoDB database and host it on mLab. Then our Lambda functions would connect and write to the database on every request. MongoDB offers best practices for working with Lambda functions here.
DynamoDB: Not for the faint of heart. To use this you’ll probably want to have some prior xp working directly with AWS.
Host a server: The more traditional option for building an app like this is to build a server out of your programming language of choice (Go, Python, PHP, Node.js, Java, Ruby, Elixir etc..) and then connect to a database like MySQL or anything.
I’ve got experience deploying Laravel apps using Laravel Forge and Node.js apps to Heroku but for the purposes of this project let’s use the new new serverless way.
Netlify Forms + Zapier + Airtable: Instead of using Netlify Functions we could submit the form using Netlify’s built in form handling and then connect Netlify to Airtable with a Zapier integration. The Netlify to Airtable documentation is available here. If you’re already using Zapier and not interested in the Lambda functions this could be a good option.
Create the frontend
Now that we’ve decided what tech stack to use (Netlify + Netlify Functions + Airtable API) it’s time to create a frontend application and deploy it to Netlify.
These are the options I chose when generating my Vue app with vue-cli:
For adding a record, since I’m the only one using the website, I’m going to drop in an Airtable Form to easily add records to my Airtable spreadsheet.
The tradeoff here with pasting in an embed code is that the website is bound to my specific form and spreadsheet, meaning other people can’t use their own spreadsheets with their own weekly goals. I can come back to this later if I want to spend more time and make the project usable for other people!
What’s immediately concerning about pasting the embed link on the website is that anyone on the internet can enter data into this form. That doesn’t help me in tracking my weekly progress. 😜
Airtable offers configuration options but I don’t see a way to specify that only one specific person can enter data into the form. (Which is totally understandable, seems like a fringe usecase here.)
Secure the frontend
As you might expect, Netlify has some badass authentication capabilities baked into the platform.
To take advantage of these features we need a Netlify app. Deploy to Netlify with a few commands:
$ npm run build $ npm install netlify-cli -g $ netlify deploy
Specify the deploy path as
dist. That’s the folder that gets created by running the “build” command.
This will set you up with a “Live Draft URL” and url for “Logs”. There’s even more good stuff having to do with CDNs and build processes that Netlify does with this
netlify deploy command to make deployment easier.
The next thing I did was invite myself and enable Identity on the Netlify app console. Then followed a tutorial about all the Vue code required to manage front end authentication state. This can be super tricky. I recommend checking out the blog post linked below and the source code on GitHub.
Super helpful tutorial on the Netlify blog here.
I think I went the more complex route coding this up myself with Vue and Vuex. There is the netlify/netlify-identity-widget that could make this simpler.
Ultimately I did not get this app working as I hoped. I found it difficult to approve users when developing locally. On the Netlify dashboard I didn’t see a clear way to see if users had been approved. When clicking the confirmation email I had trouble setting up Vue to approve the user.
I still think Netlify Identity and Netlify Functions are a great way to build and deploy apps but I clearly have more to learn in this space.
I’ll be heading to the next Netlify meetup in San Francisco to learn more and hopefully fix my application.