Ham Radio Logbook in React

Updated July 2023

I've had some kind of website (self-hosted or otherwise) for more than seven years (since I was 13!). Except for stretches of using a static site generator in 2021 and 2023, they've all been done from scratch in raw HTML and CSS. Despite this, I'd never done any serious Javascript, ever. The most I'd done was the w3schools tutorial, and that was back in middle school.

I figured it was time to learn it, especially since I know several people who have good jobs in frontend development. I decided to learn React, since that's what most of those people use, and the idea of being able to whip up good-looking UIs fairly quickly is appealing to me.

My first React project was a bare-bones ham radio logbook, which I called "wzlog", after my callsign, VE9WZ.

Screenshot
wzlog running in Firefox

I built it using the MUI toolkit. As I said, it's quite barebones, and doesn't yet do importing/exporting to ADIF, but it does indeed log contacts. It also allows you to fill in the current UTC date and time, and it won't let you log a contact unless at least the date, time, and callsign are filled in.

After getting it up and running as a web app, I decided to try and build it as an Android app as well.

Screenshot
wzlog running as an Android app on my Galaxy A51

I used Capacitor to export it to an Android project, and built the APK in Android Studio.

I'm very impressed with React. Now that I've built a project, I'm confident that I'd be able to get a nice frontend up and running in fairly little time. With no prior experience in Javascript, and relying only on the React tutorial and the MUI documentation, I was able to learn the basics of React and build this project in just over a day. I may take this project further, but it was mainly for practice. You can check it out on GitHub.

Creative Commons Licence