Designing a web-app

As mentioned previously, I'm steadily beginning work on the web-application, that is going to supplement the app. But before setting out to make a whole new application of any kind, you should really design it first, trust I've tried without doing it first... Of course, I did already have the design language I'm going for (from the mobile app). But taking a design from mobile, and making it usable on bigger screens, it's not an easy job! Oh.. I've also begun marketing on SoMe.

This week's progress

Nearly forgot that this isn't just about this week's progress, but also last week's progress. Firstly, I have to say that most of the progress, is actually just me learning a lot. I have NEVER built an actual website from the bottom, I have done a tiny bit of work in HTML and CSS. I have also had a lot of progress on the mobile app, with mostly bug fixes and smoothing out the experience.

Getting my first paying customer

99kr. ($15 ish).

Getting my first support request

The same time with my first paying customer, I get the first support request. It will never be a good feeling, to have unhappy customers or customers who have problems with your product. But with a product that is still in beta, this will happen, and it will probably happen more than I would like. But what I've learned from this experience, is that if you have an unhappy customer, and you show that you listen, they will be extremely happy. They will probably have an even better experience, than if it just worked in the first place, but no... I won't be doing any of this on purpose.

Backend work

Doing backend is really not my strong suit, but it has to be done no matter what. I have had a problem, where the frontend isn't notified when there's an update in the backend. Updates in the backend in my case, happens when a recording is done being transcribed (kind of a big deal). Up until now I've been procrastinating on this particular issue, because it meant that I would have to learn some new things... Those new things are called GraphQL, which turns out to be quite awesome!

And how is it GraphQL is so awesome, and what even is it!? If you wan't the best explanation go watch this video: GraphQL Explained in 100 Seconds - YouTube But to make it short, GraphQL is a query language, where you can read and mutate data in a database. The big player in this space has been REST for many years, but REST does have some problems. Firstly with REST, if you wan't to make a query for a subset of data, you will have to fetch all the data and subset it yourself. As an example, if I went to McDonalds and ordered a burger, I would get a burger with all the ingredients in it. While with GraphQL, you choose what you want, when making the query in the first place. This means I can get a cheeseburger without cheese, without having to take you cheese out myself. The same applies when mutating data (editing).

The database I'm using, is a DynamoDB database connected to AppSync. When I'm making changes to the database with the frontend, I'm using Amplify, which sends queries/mutations to AppSync, and from here AppSync will make the changes in DynamoDB. AppSync will then handle notifying the frontend, when changes are made to the backend.

When a recording is done transcribing, a Lambda function is triggered. This function will then do the necessary changes to the backend, by marking the recording done in the database. Before, how this was done by just changing the DynamoDB table directly, using the DynamoDB API built into Lambda. But this quickly became a problem, because this went behind AppSync, and therefore AppSync wasn't notifying the frontend of the changes made. I have been using a quick fix for this on the frontend, by clearing the DataStore data every time a user reloads the recordings page. But this have caused longer load times, and the facts that the users have to manually reload the page, to get updates.

But I have now updated the Lambda function, to make GraphQL mutations directly to AppSync. This actually haven't solved the problem, because there's a bug in Amplify-flutter, that needs fixing... But it does work on the web-app!

Web-app

Speaking of the web-app! Let's take a look at how progress is on it. As mentioned earlier, it isn't particularly easy to change a mobile design to work on desktop. But I think that I've found a good sweet spot, that is between simplicity and functionality. Below, you can see my design mockups, using the same language I used in the app, I hope to make it familiar and easy to use.

I've mostly been working on getting the UI up and running, which have been giving my HTML and CSS skills a true challenge. God bless Stackoverflow and W3Schools. Oh yeah, if having to deal with learning HTML and CSS isn't enough, I've also had to learn TypeScript. With getting to learn both JS and TS, I'm really beginning to appreciate Dart (The language Flutter uses). Maybe this is because I've used Dart for much longer, but it just feels so much simpler to me. But this is a fun challenge I must say, I'm all for it!

While working on the login page first, I also started to implement Amplify, to give me the ability to login already. Connecting to the same Amplify project, was actually surprisingly easy, I had expected much worse at least... But you know what they say in programming, "If it feels too easy, then it probably is", I'll just sit here and wait for it to bite me back.

What I've had the time to do, is making the login page and the home page (recordings page). As mentioned, I've already implemented the login mechanism on the login page, signups and forgot passwords is still yet to be implemented. On the home page I've gotten it to make a query, to get the signed in user's recordings. When loading the page, it will check if you're already logged in, and of course send you directly to the home page, if that's the case. Let's take a look at how it looks!

The login button will activate when both fields are filled with valid info.

If there wasn't any recordings to load, it will of course say that.

SoMe ads

I've talked about it for a long time, and now is finally the time. As of Wednesday, I've begun my Meta advertising campaign. For the rest of April, I've put in 5000 DKK for Meta to use, and I will be exited to see how this goes. As of right now, the ads have been viewed by 1450 individual people, and unfortunately 0 have clicked the ads. It's my first investment in the company, I'm not 100% sure I will get back on, but it's also something I have to do.

Bug fixes and other stuff

In three app update since the last (real) blog post, there have been quite a lot of bug fixes and small things added. Let's just quickly go through them...

1. A disclaimer before uploading a recording - I've gotten a lot of feedback, saying that the AI transcription isn't as accurate as they would expect. This problem isn't something I can't fix myself, hence adding a disclaimer saying that you shouldn't expect a finished result directly from the AI. I have always known this would be something the users would comment on, which is why I have spent so much time, making the editing tools.
2. Added a message with an estimate, of the time it will take for the AI to do its work. It's a rough estimate, but it's better than nothing.
3. The delete account button wasn't working on Android, this was a bug in Amplify, so I've just implemented a workaround.
4. The app sometimes crashed when signing in/out, not the biggest problem, but still gave a bad experience, for those who ran into it.
5. Visual bugs with darkmode on some page (the text wasn't changing color).
6. App crashing when picking larger files on Android. This is a problem with the file picking plugin I'm using, but a small change fixed this issue.
7. The checkout page sometimes wasn't loading. This was a big oversight from my side, but it was quickly fixed.
8. You can now press the return button on the keyboard, to login on the login page.

I will of course continue to work on making it a more smooth experience using the app, but it does require a lot of work. Bug fixing will always be my highest priority in development.

What's next?

This is already the longest post I've made, so I will make this quick... But I will of course continue work on the web-app. I'm also looking forward to see the results of my ad investment, I'm not expecting the world, but it will be exiting to see!

See you again next week!

Phew this was a long read... But I hope that it gave a good insight, into how it is to begin learning web development! I won't take up more of your time, have a good weekend.

PS. Happy Race Week 😉