• Finish the setting page
• Improve observability
  • Send data to LGTM Grafana Cloud

🛠️ What I Worked On

Observability

This was more for my Gophercon talk, but I fixed the local LGTM stack setup so that we can send logs, metrics and traces and view it all in Grafana. Then correleate them correctly and move between them in the GUI.

Worked on the terraform code to then create the same stack in Grafana cloud to setup the LGTM stack. Including deploying an alloy agent on my VPS. So we can send all of our OTLP data their and have consumed by the Grafana cloud.

Setting Page

Started work on the settings page to allow the user to update various settings about the organization. Such as the name, logo and description.

Added ways for user to change their org name, avatar and description.

✅ Wins

• Learnt a lot more about OTLP observability

⚠️ Challenges

• Didn’t work much on this project got busy with real life

💡 What I Learned

• How to correlate logs, traces and metrics in the Grafana UI using the LGTM stack.

⏭️ Next Build Log Objectives

• Finish the setting page

• Mark feedback public/private
• Start on settings page

🛠️ What I Worked On

Mark feedback as private/public

Logged in users can mark feedback as private so it won’t be shown on the public dashboard.

Gitlab Dependency Proxy

I started using the Gitlab dependency proxy so that we can pull in image from Docker hub using Gitlab to avoid hiting rate limits. But also means we can use image cache which should makes jobs a quicker when pulling say postgres.

Add Dev Environment

Previously there was just a local and production environment. Now there is a development environment we can deploy to. This is now done CI on a MR via GitLab CI.

It is available at: https://dev.voxicle.app

Fix generate CI job

For a while the CI job to check if generated code was correct was failing with extra CSS classes in the tailwind generated file. For the life of me I couldn’t work out why. Recently I decided to have a crack, testing it locally with gitlab-ci-local. In the end it seemed to be caused by mockery. After moving mockery under the tailwind cli tool it seemed to work fine. But again I have no clue why, it had extra classes like sr-only but doing a grep (or ripgrep) for the generated mocks there was no sr-only. So I still don’t know why this fixed anything. Will need to investigate more later.

  generate:
    desc: Generates all the code needed for the project i.e. sqlc, templ & tailwindcss
    cmds:
      - templ generate
      - tailwindcss -i ./static/css/tailwind.css -o ./static/css/styles.css --minify
      - mockery --all
      - sqlc generate
      - gomod2nix generate
      - task: format

✅ Wins

⚠️ Challenges

• Getting the GitLab proxy to work took longer than expected
• Trying to work out how much is left in this app before I should start sharing with people and collecting real feedback
• Why moving mockery under tailwindcss works

💡 What I Learned

• The GitLab dependency proxy doesn’t work for personal projects, they need to be in a group i.e. not hmajid2301/voxicle but voxicle/voxicle

⏭️ Next Build Log Objectives

• Finish the setting page
• Improve observability
  • Send data to LGTM Grafana Cloud

• Public page for feedback
  • private and public feedbacks
  • allow anonymous voting

🛠️ What I Worked On

Public Feedback Dashboard

We started of with this:

And finish with this

Users can now do the almost everything they can when logged in but when anonymous. We attach a deviceID cookie to them to be able to spot if its the same user. This only works for the same device and until they clear their cookies but should be good enough for most of the users I think for now.

DevEx improvements

Add mprocs to be able to nicely manage running multiple commands in parallel and need leaving floating processes running. Such as being ableto watch file changes with templ and tailwindcss and also start the hot reloaded web service with air.

Try to run dependencies using docker-compose vs services in Gitlab CI. So we don’t have to make changes in multiple places.

Also started a new tab in zellij to be able to run some common commands easily, I just need to go into the pane and hit enter i.e. zellij run -- task lint.

OpenTofu

There are lots of stuff I setup manually and I would like to move into code, declaratively using terraform/open tofu. In this case:

• cloudflare DNS

Observability

I have been working on my slides for my Gophercon talk about otel and observability, so I have been fixing gaps and the broken setup in Voxicle. So now we have logs, metrics and traces viewable in a locally running instance of Grafana. It will be easy enough to set this up in production to point to which ever tool I decide to use.

✅ Wins

• Subdomains take you to voxicle i.e. orga.voxicle.app
• Public page shows public feedbacks
• Made some DevEx improvements, taskfiles, gitlab CI
• Made my infra setup more declarative with OpenTofu

⚠️ Challenges

• Getting podman to work with the dind service in Gitlab CI
  • Going down a rabbit hole of trying to run podman vs using the Docker daemon inside

💡 What I Learned

• How to setup open tofu new project

⏭️ Next Build Log Objectives

• Mark feedback public/private
• Start on settings page

⏮️ Previous Build Log Objectives

• ✅ Better error modals (fixed)
• ✅ Start working on public page
• ✅ Multi tenant sub domains
  • i.e. org1.voxicle.app

🛠️ What I Worked On

Error Modal Bug

I have some middleware that will show an error modal when we return an error back to the client. I may change this to be a toast for certain actions vs a full on modal but we can do that in the middleware.

There was a bug where the modal wouldn’t work insted it would return the status code and HTML like so:

401 Unauthorized (Failed to login.)<div>...</div>

Set HX-Retarget, to replace other items i.e. not #feedback_list but we want to update #error_modal_container. So in the middleware we now set this header, with an error modal.

w.Header().Set("HX-Retarget", "#error_modal_container")
w.Header().Set("Content-Type", "text/html")

With the following script, to show the modal after a HTMX swap:

<script>
    document.body.addEventListener('htmx:afterSwap', function(evt) {
      if (evt.detail.target.id === 'error_modal_container') {
        document.getElementById('error_modal')?.showModal();
      }
    });
</script>

hx-indicator trigger

For really fast request we don’t want to show the loading spinner quickly and then hide it. So for the first x seconds don’t show the loading spinner wait say 1 second then show it. So it is less likely to flash on screen and disappear. Which doesn’t provide an amazing experience for the user, of course there is a chance that this could still happen.

I fixed it by doing something like this, when we make a request to our backend.

<span id="delete-indicator" class="hidden justify-center items-center transition duration-300 delay-2000 hx-indicator">
    <span class="loading loading-spinner"></span>
    <span class="ml-2">Sending...</span>
</span>

Public Feedback Page

One of the main features of the web app is allowing other people to vote on features, so we allow anonymous votes. So decided to manage anonymous votes in its own table, which keeps track of a device_id. A long lived cookie we populate. Which of course means you can vote again from another device. But this is a good enough trade off.

So started work to show the feedbacks on a single public page, which a user can then filter on like the private one but then also vote for it anonymously or if you are logged in the vote counts as normal.

Subdomains

Part of the public page is allowing the app to handle subdomains i.e. org1.voxicle.app/public/feedback to show the public feedback page.

Refactored Schema

Remove organization_id and replaced with slug as this is already unique and means we have to do fewer looks up to the DB. Involved a long migration script and updating tests and some code as well.

✅ Wins

• Error modal fixed
• Worked out how to handle anonymous votes

⚠️ Challenges

• Not understanding why hx-swap-oob wouldn’t work with HX-Retarget.

💡 What I Learned

• (remembered) HTMX only swaps by default on 200 HTTP Status code
  • <meta name="htmx-config" content='{"responseHandling": [{"code":"...", "swap": true}]}'/>
• hx-swap-oob used for other changes first container is replaced, we can use hx-retarget

⏭️ Next Build Log Objectives

• Public page for feedback
  • private and public feedbacks
  • allow anonymous voting

• Implement Authorization using RLS in Postgres
• Better error modals (fixed)

🛠️ What I Worked On

🔒 Row Level Security (Authorization)

Row Level Security for Feedback and Upvotes. With row level security we can add policies and use config variables. Such that we set the organization ID and users can only get feedback that is part of their organization. This means we can simplify our SQL queries with fewer joins and fewer where clauses. Making them easier to read. Essentially it lets us do a simple form of authorization inside the web app.

An example on select statements for the user voxicle.

create policy feedback_select_policy on public.feedback
for select to voxicle
using (
    organization_id = current_setting('app.current_org_id')::uuid
);

Where we then have some “hooks” in pgx which look like this when we configure it. Where the auth is set in the ctx in some middleware. It does make testing a bit more awkward but its a fine trade off.

pgxConfig.BeforeAcquire = func(a context.Context, conn *pgx.Conn) bool {
    state := auth.GetFromContext(a)
    if state.OrgID != uuid.Nil {
        _, err := conn.Exec(a, "SELECT set_config('app.current_org_id', $1, false);", state.OrgID)
        if err != nil {
            // TODO: log the error
            panic(err)
        }
    }

    return true
}

pgxConfig.AfterRelease = func(conn *pgx.Conn) bool {
    _, err := conn.Exec(context.Background(), "SELECT set_config('app.current_org_id', $1, false);", uuid.Nil)
    if err != nil {
        // TODO: log the error
        panic(err)
    }
    return true
}

I will do a write up/video on how I setup this up with sqlc, goose and pgx.

✏️ Refactor

Refactored the get feedback query to not include upvotes, split that into another query. More DB queries by they are simpler, and easier to understand now. Can change later if the app feels sluggish, needs to do some profiling.

🧪 Tests

Added more tests for upvotes, unit tests, integration tests and E2E tests (playwright). Made it so the tests can run in parallel -parallel 10 (GOMAXPROCS). This has caused the run time to decrease by about 50% in CI. Even though there are actually more tests now.

✅ Wins

• RLS meant we could simplify our queries
• Added more tests
• Made the tests run faster in CI
  • Run them in parallel

⚠️ Challenges

Implementing RLS took a longer to implement than I expected. Spent the better part of a week on it. Has issues because I was testing with a super user on postgres i.e. the default one in Docker. It took using AI to give me the hint what could be the issues.

💡 What I Learned

RLS - Doesn’t apply to super users so needed to create a separate user i.e. voxicle for local tests. Vs using postgres the default admin user in Docker.

That you need to be careful running tests with t.Parallel in table test See more here.

⏭️ Next Weeks Objectives

• Better error modals (fixed)
• Start working on public page
• Multi tenant sub domains
  • i.e. org1.voxicle.app

Last Week

• Fixed my Tailwind LSP for a better DevEx
• Improved my Gitlab CI file when building the dev Docker image
• Improved the UI
• Allow users to change the sort filters i.e. latest or oldest

Next Week

• Implement Authorization using RLS in Postgres
• Better error modals (fixed)

Again got really busy with some personal stuff, and stuff at work so didn’t really have much motivation to work on this project. But I have been forcing myself to code, so at least make some progeres.

I did the following:

• Worked out we can use row level security in Postgres for better authorization
• Added lots more tests
• Edit Feedback
  • Dynamic URL using Alpine
• Figure out duplication bug
• Filter on search
• More filter options

Next Week

Next week I want to;

• Tidy up the UI for main feedback page
• Better error modals
• Implement RLS in Postgres

Some stuff kept me busy so I couldn’t really work on my project work.

I did the following:

• Added tests
  • E2E with new skeleton
  • How to debug E2E tests with delve (i.e. the server running separately)
• Fixed a bunch of TODOs in the code base
• Delete feedback

However I got a busy with other random pieces of work that come up that kept me busy. Hopefully this week will be more productive.

Next Week

Next week I want to;

• Figure out duplication bug
• Filter on search
• More filter options

I did the following:

• Finish core feedback page
  • Add new feedback
  • upvote
  • display as list or grid
• Stretch
  • try to implement basic RBAC (more of a PoC)

However I got a busy with other random pieces of work that come up that kept me busy. Hopefully this week will be more productive.

Next Week

Next week I want to;

• Finish core feedback page
  • search
  • display as list or grid
  • email updates when a feature has been completed
  • more filter options
• Stretch
  • public/private views

Carry on working on the core feature set and make it so we can share with other people.

On my list of tasks I had the following:

• Fix auth refresh token flow not fully working
• Add span information to the auth middleware
• Simplify templ with pop drilling
• Update project name

And managed to do all of them, even starting to work the core feedback part of the application i.e. allowing users to actually add feedback to the project. I rebranded the app from Go Feedback to Voxicle (which means voice and cycle).

Link to new URL: https://voxicle.app

Next Week

Next week I want to;

• Finish core feedback page
  • Add new feedback
  • upvote
  • search
  • display as list or grid
  • email updates when a feature has been completed
• Stretch
  • try to implement basic RBAC (more of a PoC)
  • public/private views

Now onto the core features of the app, that users actually want to use. We can actually then start to ship the app and share with some early users and get some feedback hopefully.

I decided to use wristband to the tenant and then organization on my side of the app. I am not fully happy with it. During sign up the user creates a tenant but that might be confusing to the customer vs telling them its an organization. But it does mean a new user is created and tenant on both wristband side and in the service database.

Then I moved onto working on the subscription logic with paddle. Updated the pricing page to pull in data from the backend when populating the page. Also integrating the overlay checkout, which is the simplest way to integrate paddle with my app. I cannot style it as much as the inline one, but it involves writing less JS. So I will use that for now. I am finishing off the subscription webhook logic, to create the data on our side.

Next week

Next week I want to;

• Fix auth refresh token flow not fully working
• Add span information to the auth middleware
• Simplify templ with pop drilling
• Update project name

Go Feedback can be confused with the Go programming language. I spoke to the Go team and they said I could either change the mascot. or the name. I wasn’t super fond of the name much so will look to rebrand and update everywhere its called Go Feedback.

I finished off the auth flow this week, decided to move over to using the wristband UI instead of using my own components. It ended up being a lot of code which was nice to actually delete and I think the wristband setup is pretty nice and slick. I had to adjust slightly how I will create users in my own DB but it wasn’t a big deal.

I also migrated some of my UI to use the DaisyUI library, which should simplify the amount of CSS I have to manage on my own.

I also started the onboarding flow, after the user has signed up where they create a new organization. Which should be finished early next week.

Last year, I worked on two main side projects:

• OptiNix: CLI tool to easily find nix options.
• Banter Bus: My third attempt at building a browser based multi-player game.

Whilst Banter Bus is not fully done, I got it to an almost working state and at some point will go back and fix a bunch of the bugs and add some new features.

However, I finally decided I wanted to try my hand at building something that I could try to make some money from. Whilst also learning more about business, product design etc. How can I launch an actual product vs building something? Purely for fun.

So I decided to build Go Feedback, a tool which makes it easier to collect user feedback. For once, it’s also not open source, i.e. anyone can view my code (for now). Which is not something I’ve really done.

Either way, my thinking was, I wanted to build something and just learn. If nothing else, I can likely re-use the existing code I write. Such as the auth, subscription logic or even the structure of the landing page.

Funnily enough, at the beginning of the year, I really wanted to dive into game dev. But gave myself one month to finish Banter Bus (end of Jan). In that time, my passion of game dev died down, which is probably proved my heart wasn’t in it.

Being a backend developer by working on this “micro-saas” there is a lot I can learn from building my own app vs making a game which I cannot really incorporate in my day-to-day job.

Week 1

The first week I build out the landing page, I am great at frontend dev. I decided to use HTMX, alpinejs and tailwindcss. I ended up using tailwindai to help create the page. I also ended up choosing to use a theme similar to the Daisy UI cupcake theme.

I put down all the big features/ideas I had that businesses might find useful and created mock-ups for them again mostly using AI to help me. Due to inexperience in front-end development, and to be honest, currently my lack of interest to learn it properly.

I added a fake door as a waitlist to gauge interest, which currently only me and my friends have used.

Week 2

This week I spent mostly building out the auth part, i.e. login, signup and logout. I wanted to try to use the magic link email flow. To make it as easy as possible for the user to sign up without needing a password. They just need click a link in an email they are sent.

I was originally going to use clerk, but had issues (could just have been me) integrating cleanly with my backend and ended up moving over to wristband.dev. Whilst I have experience maintaining auth services, I haven’t really ever had to build it out myself for a web app. So it was a good learning experience for me.

I also learnt about other random things like CSRF and how to avoid that.

Building in public

I want to try to build in public, to collect feedback and to keep myself honest. It would also be a nice diary to track my own progress. I don’t really want to use Twitter, which lots of the “indie hacker” builder community seem to use. So I am going to try to use:

• peerlist
• bluesky

And maintain weekly blog posts, maybe even YouTube or TikTok videos to show off the progress. Some weeks there will likely be nothing to really show off.