One great part about being able to code is that you can turn an idea in to a reality. However much that sounds like a clichè, it is true, and I’m a firm believer of developing side projects of random ideas that a developer has because it helps maintain excitement and offers chances to learn.
One such project I have decided to work on over the course of the last 9 or so months is a list app called Listy I know what you’re thinking - “that’s a boring app to build and there are countless numbers of list apps in tutorials”, but there are a few reasons I wanted to develop a list app.
Here’s the link to Listy.
Why a list app?
I love real ale. There are so many different brewery’s, types, tastes, colours etc. when it comes to trying different ales, that it’s hard to keep track of what you’ve tasted, and more importantly, how good the ale was! I originally wanted to make an app which would allow me to log my ales, and give it a rating. There are apps out there that do that already, but that fact it would have been so simple to build made me want to start.
After I started building, I wanted to expand on the idea of a list/rating app, and add the ability to assign an image to each beer. This was a feature that I couldn’t find in the popular ale-rating apps out there, so it made me want to build it even more.
I’d soon opened a Trello board and added a bunch of other ideas (I’ll go through some more of the features later), at which point it was becoming more than just a simple app. I thought that instead of making the app with the tools and technologies I always use like React and Redux, I wanted to use the opportunity to expand knowledge in something I don’t use that often. I decided to utilise Typescript alongside React.
The app features
As mentioned before, the app was originally designed to list beers, rate them, and add a photo. During the couple of hours a week of development over the last six months, I added more features to give the app a bit more functionality. Here are some of the features:
Rather than just listing beers to rate, I expanded the application to handle multiple lists. This would allow me to rate anything like films, meals etc.
Multiple list types
Instead of just adding a rating list for beer, I wanted to use the opportunity to use the app for to-do lists also. This would mean the user will be able to add different types of lists, allowing the app to be used for shopping lists, to-do lists etc.
Register and log in with different user accounts
This was something I wanted to add in so my girlfriend could use the app for our shopping list each week instead of dragging the primitive piece of paper and a leaky pen around with us. She’s since informed me that she won’t be using the app for shopping at all because she’s a “shopping traditionalist” - my words, not hers. It will be be good for others to use though, especially since I’ll be making the code open source.
Add images to lists
As well as adding images to list items, I wanted the ability to add images to the list as a whole. Something small, but it would allow the incorporation of the list image in the UI of the app - perhaps in the header when viewing the list items.
Like I said earlier, I used the opportunity to develop Typescript alongside a larger project. It was a chance to experiment with the features of Typescript, as well as new libraries and tools spanning the front and back end of the app.
The app is built with React and Typescript on the front-end - specifically using the Typescript-React-Starter repo which I found to be excellent. This was a huge benefit because I came away learning a little more about React at the same time as learning the React and Typescript combo, and Typescript on it’s own. I’d developed the app to use “services” on the front-end which separated some of the application logic away from React in order to experience Typescript separately.
Also on the front-end is Apollo’s GraphQL implementation. I’ve used this a few times over the last year or two, but again, the opportunity to use it in-depth with what was becoming more than just a hello world application was hard to ignore. GraphQL is absolutely brilliant by the way.
The back end of the app is build using Node with Express. I’m making my own Apollo Server for the app to consume GraphQL data, as well as a Mongo database. As the app has grown more, I’d have liked to go back and integrate a Postgres database instead, but I wanted to get something finished so I can move on to something else. I’m not saying Mongo is not the right decision here, but I’ve used it so much that it’s not a learning experience anymore. But there’s always the next project!
At the time of writing this post, I have got to the point where all the features listed have been implemented. The design is not completely done yet - here’s a quick preview:
I plan to release the source code in the next couple of weeks, and then write another post which goes in to a fair amount of detail in to what I learned about Typescript and it’s integration with React.
After that, the final addition is to make the app a PWA, giving the ability for offline usage, saving to mobile screen etc. which is something that goes hand-in-hand with this type of app perfectly.
Thanks for reading. Get in touch if you want to know more, and more importantly, if you have any suggestions!