I built & deployed my first useful webapp over the past week. A friend in with a background in public health teed up a perfectly-sized intro project, a tool to check extended COVID test expiration dates without trawling through PDFs on the FDA website. I’ve been a software engineer for years and have wanted to learn how to build frontend UIs for a while, after realizing the relative chaos and churn in that field during the early 2010s seems to have been resolved and the toolchain seems pretty mature.
Starting the project
I had heard good things about the next.js framework, and digging a little deeper indicated it supported static websites and server-side rendering, perfect for a tool that provides a UI to filter through into data exported from a spreadsheet.
I started by working through the tutorial project with the hope that I could adapt it to build a single-page form, but it turned out to be a blog without Typescript support, and thus not easy to adapt to my purposes. I still learned a lot of useful concepts about pre-rendering and static generation that helped me decide where in the framework to do my CSV processing at build-time.
Since I realized my project would be form-based, I went looking for a useful component library that offered a ‘combobox’ component useful for filtering data. I found Mantine, an open-source project with good Next.js and Typescript support and nice combobox options and datepickers.
Building the project
I started a new project from scratch per the Mantine instructions, even though they advised me to use their template. I should have used their template, because it came with a lot of useful features like testing prebuilt for me that I ended up laboriously porting from the template into my project. Whoops. I learned a decent amount about Next.js configuration conventions from that process, however.
I wrote a function code to process COVID test data from a CSV export from a spreadsheet compiled by my friend, and called it in getStaticProps to populate the index page with the test data.
Then I browsed Mantine components and found that Select seemed like a good fit to dig into the test data, because it has a searchable mode that allows users to filter a big dropdown by typing in parts of the term they’re looking for.
I also tried & abandoned the Datepicker for expiration dates after realizing that Select was a better match for that too, but it’s a very nice component.
Then I used the onChange prop of Mantine components & React’s useState hook to implement filtration logic as the form is filled, and to provide an updated expiration dat upon form completion.
Deployment
I decided to use Netlify to deploy at the advice of another friend and because it has a generous free tier. It has an extensive & simple GitHub integration that provides a ton of useful CI/CD features like automatic preview deployments for PRs. Good job to them, the tool is a pleasure to use.
Challenges overcome
I’d done a bit of frontend at various jobs before to pitch in, so I know a bit about Javascript and Typescript and React. I also spent some time learning Typescript better via Execute Program. So my main challenge was navigating the huge Javascript/Typescript ecosystem, and building something useful, and internalizing React’s programming model well enough to be able to troubleshoot my application effectively.