I’m building an app on Twitch. Here’s an outline of what’s going on. You watch here.
I’d like make a non-trivial web application that is both (1) useful to me on a daily basis and (2) I can use as a test-bed for experimentation with different tech. Functionality-wise, I imagine it will end up being a smörgåsbord of things I need (calories/exercise tracking, expense tracking, simple notes, todo lists, daily habits, what have you). Tech-wise, it will start as a classic Rails app, but once this is done, I might do things like:
- Create a GraphQL API and build a React SPA front end
- Build separate mobile clients with iOS, Android, React Native, Flutter, etc.
- Use it to experiment with some frameworks I don’t know (e.g. build an Angular/Svelte frontend, reimplement in in Phoenix or Remix with the same database, etc.)
- Build a TUI client, a Windows Desktop client, a macOS client, an Electron client, or even an Apple Watch app
- Use it as a testbed when I want to learn something new (e.g. a new end-to-end testing framework, storybook, relay instead of Apollo) or build some tool (e.g. a Rails request explorer, or a small GraphQL-aware component library for React)
- Try new ideas in a familiar codebase
- Have somewhere to try the next new tool that pops up in the JavaScript word (e.g. would have loved to have something like that when vite came out)
There’s quite a lot of scope here, so it will probably be a very long journey. On one hand, I’m looking for something concrete to do while I’m streaming on twitch. On the other, most production systems I currently interact with are not nimble enough to experiment with. And on the third hand, I might end up using some of this functionality.
I’m going to start with a calorie tracker + a recipe book. Once this is done, I’ll move to some other functionality or other tech.
I’ve tried a bunch of methods to manage weight, but what ultimately ended up working for me is The Hacker’s Diet. It’s the oldest idea in the book – just track calorie intake – and unsurprisingly, it works beautifully. Where it becomes tricky, is that you usually don’t know how the calories the food you eat (e.g. when ordering a pizza). That made me cook more regularly, weight all the ingredients + the end result. It currently is annoyingly analog, so let’s use some software the help.
Feature-wise, let’s start with:
- Keep a daily log of (a) weight and (b) food eaten.
- Should be able to track weight daily and see a long-term chart with progress
- Should be able to track every single meal with its calories “cost” and how I am doing against budget
- Should be able to look back and see how we’ll I’ve done in the last few months (change in weight, how regular I was to sticking to the diet, and so on)
- Keep a list of recipes
- A list of ingredients with calories per unit (because I’m tired of looking up how much kcal onions are)
- A list of recipes that define ingredients with quantities, so I know how much kcal a dish is
- Ability to keep notes and ideas on the recipes (I often want to do something differently next time)
- Keep a log of dishes being cooked
- Use it to log a “cooking session” every time I cook something
- Be able to modify the ingredients for that particular session (e.g. used a different quantity or a different product)
- Be able to give it the weight of the dish and get a kcal/100gr value.
Other things will probably come up as we go.
I am going to start with a standard Rails application. I’ll revisit some of those decisions later, the but the initial goal will be to get it working end-to-end, and only then I’m going to start polishing things. That is, I’d rather get a usable working bare-bone app first and then add polish, instead of spending too much time on a single feature to make it perfect.
- I’ll start with Tailwind. I might eventually rip it out and replace it with custom CSS, but I don’t want to bother with this initially. It’s quite nice for moving quickly. Making it maintainable will require extracting some components (maybe with ViewComponent), but initially I’m just going to create a bit of a mess and tidy it up later.
- I’m keen try using Hotwire in anger, before I move to a full-blown React app. But even then, I’m going to start with zero (or very little) JavaScript initially. Once it works, I’ll try to make it nicer and more interactive with Hotwire. This would mean clunkier interface initially (going to a separate page to edit something), but I’ll fix it later. I’m also keen to experiment with htmx, but I’m not sure how much sense that will make in Rails (as Hotwire is essentially the same thing, but for Rails).
- It’s not going to be responsive initially. It will probably be high up on my list of things to fix, as I would interact with it mostly on the phone, but let’s get the functionality to work first.
- When the time for JavaScript comes, it will be vanilla JavaScript and nobuild.
I will be using Rails 8, which is a beta at the time of writing, and latest Ruby.
Once this is done, I’m keen to make a React client with GraphQL. This time I will switch to TypeScript, Apollo, and vite. After I’ve done this, I would have exhausted the technologies I use on a daily basis, and it will either be (1) a new technology or (2) more scope.
The initial scope may not be complicated enough to be interesting to wrap into an SPA. If that ends up being that case, I will add some more complexity, before moving to the SPA.
Started a new rails project and spend some time building a list of recipes. I haven't started a fresh Rails project in a while, and it was a bit of a struggle to figure out how some things are done these days. Wasn't gonna go for hotwire initally, but ended up there somehow. Left a big mess, but that's alright, as we will clean it up next time.