The HackerNoon Mobile: The Developer's Perspective and The World Wide Writer Release [Version 1.9]

The HackerNoon Mobile app (available on Apple & Google ) released in 2023 Q4 with the purpose of increasing access to the entire HackerNoon library. The mobile app facilitates readership as it was one of the main motives of the app. Almost everything we do on the web, is simpler on mobile, since it provides a personalized experience, and you can enjoy the main feature of the app from anywhere at any time. Release 1.9, live today, is our largest improvement yet, most notably with 12 languages available and our in-app writing experience. Cheers to the world wide writer!

Main Features:

1. Read - the entire 100k+ story HackerNoon library is available.
2. Audio Player Playlist- listen to articles and create playlists with your favorite stories.
3. Writing (NEW!) - ability to write and submit stories to human editors.
4. Polls & Comments - vote on and discuss the latest technology trends.

On the mobile app you can also see pages such as the TechBeat page with the trending stories of the day, Curation page with articles curated by the topics you like, category/tagged pages which also curate articles by topic, and more. With this 1.9 release, we’ve now added translations and writing on the app soon, so it just keep getting better.

From a developer perspective, the mobile app was much needed. It was mentioned in almost every HackerNoon product meeting prior to its release. For some reason, many conversations led to:

It will be good if we had a mobile app to do x y or z.

As a dev and someone who loves challenges, I always asked myself why is it so hard to just build a mobile app. After the fact, the answer was simpler than what I thought.

How It Happened?

Turns out I came across the Ionic Framework a few years ago and thought it was interesting but never really wrote any code to test it out. At that time, the framework only worked with Angular which probably impacted my decision on trying it out, taking in consideration that I am more of a React developer. Back then, Ionic was not as popular, and just the idea of creating a hybrid application didn’t fit in a lot of people’s mind. Anyhow, one time while on a product meeting, they were talking about the mobile app and I decided to take a look back at Ionic and guess what, they have expanded their framework to Vue and React which either or, I am really comfortable with.

The first thing I did was to install the framework and create a quick Android app. I was impressed by how easy and understanding process was. Being able to just drop a few components and have a mobile app its crazy to think of, but Ionic made it possible to just run some commands and have an app build in multiple platforms including iOS and Android. I felt really comfortable with the framework and I kind of new at that moment that I was up to the challenge. The coincidence came after, as I saw a new project about creating the first HackerNoon mobile app. I quickly picket up and started working on it.

The Process

I first started by installing Ionic in my Linux machine, created a brand new app, and researched some of their documentation. Ran these magic commands to start developing: npm install -g @ionic/cli ionic start // create ionic serve // run locally After playing with it, I then started moving components from the HackerNoon web version into this new project. Within a few hours I created a few pages. The HackerNoon designers (@Devans & @Kien) really did a great job matching everything and giving the app a good essence and look. Most of it was developed the same way you would develop in react, except Ionic uses Typescript, good for them. My linux machine was a good starting point where I developed almost 50% of the app based on Android, but was having a hard time testing the iOS version. There was a work around with Linux which was to install Mac OS on a virtual machine, to then install XCode, and then test the app on IOS, but then I couldn’t deal with the lagging and slowness. Once I was confident with the progress of the app, I ended up making the decision of upgrading my MacBook Pro in order to start developing for iOS. So far, it was a good decision as it showed me in many levels the importance of developing for all platforms, even though I still love Linux. So working on this app with my new MacBook Pro was really eye opening.

The challenges

This was a learning experience full of challenges to overcome. Even the simplest bug took hours to figure out. Gladly, I was documenting every time I got stuck, so that it doesn’t happen the next time. Being the lead developer of this project, I had to make some hard choices in terms of the infrastructure of the app, build the entire api, and at the same time learn Ionic and get used to it. Here were some of the main challenges:

1. Debugging/testing: all devs know how important testing is when developing an application of any level. When working on the mobile app, I first started developing on the web. I actually thought that I had to deploy every time in order to test on mobile. I spent a lit of time just because I didn’t know that Ionic had a way of testing on mobile but locally. So most of the time, my css or some of the event handlers will break because its not the same implementation. After testing on mobile locally, the process because more fluid.
2. Notifications: When I first started working on the mobile app, I saw two interesting plugins that I could use for notifications which were Local Notifications and Push Notifications. Local notifications, are notifications managed locally on the app, without interacting with a backend server. I automatically thought that local notifications was the right and faster to implement choice, so I implemented it pretty easy. However, it was not what we were looking for. Push notifications was the way to go, but it was a bit harder to implement and it needed extra set up, and a backend server. We keep it simple by just sending one notification at noon mountain time every day, although we might want to send a bit more. If you have the mobile app and accepted notifications, you should be getting this type of notification about HackerNoon top story of the day.
3. The playlist/player: This is one of the app’s main features. It was joyful to build but painful to debug simply because it has to many functionalities. Making sure every button does what its suppose to do was kind of time consuming when testing. It was weird to build the story audio player as I tried multiple audio plugins to work on mobile. The main issue I encountered was that I build the player but the the audio didn’t play or the quality of the audio was really bad. Sometimes audio will work on development mode but not on production. What actually worked was the native Audio api. It was straight forward after that, just pass the source url and add the action buttons. The playlist was less of a challenge since all it takes is saving the stories on the database in order to create a playlist. Functionalities like having the playlist in order, changing voices, re-ordering, and the ability to add an entire group of stories to your playlist was really cool to implement. Maybe in the future we can have public playlists where you can see what other people are listening, with their concern of course. Here how my playlist looks right now:
4. Ionic updates vs iOS updates vs Xcode updates: I think this was the most frustrating part, when you have a really nice version working 100% and then booom it doesn’t work, or it doesn’t load, or it doesn’t log in. I remember having input forms working on Ionic but then upgraded Ionic versions and the input events weren’t working, therefore causing me to think the errors were on the backend. Or testing the app to then realize that I can’t no longer see the logs on safari because I updated my phone and that feature was no longer supported by apple. Or trying to build a new version of the app but faild because xcode updated and something needed to be changed on my code. Those were really frustrating moments and time consuming. At least it only happened while on development 👍.
5. Google Login on Android: This has been one of the bugs of the app, Android users literally couldn’t login using the google method. This was a crazy bug because it happened in production. Although it was really simple, it was also part of the learning process when it comes to mobile development. Turns out that there’s two types of keys needed for google login, one on development that is set up on firebase, and another one on production that also need to be set up in firebase. The issue here is that google play store actually produces a production key that need to replace the development key. There was no way of me knowing that and resulted in hours spent trying to figure out what was the issue. It took less that 30 seconds to fix once I figured out all needed was to replace the keys.
6. Writing: … this was really a roller coaster. The main issue was just finding and editor that would work on mobile and Ionic. I tried about 20 different editors, and most of then failed on mobile while working perfectly on the web. Some didn’t load the keyboard, some write different letters that the ones being pressed, and some just couldn’t get installed. When I finally found one that worked, then it was supper laggy while typing so it was really tedious. Thankfully, I gave it a shot at another editor, QuillJS(!), and it seems to be working better than expected. Thats actually the editor I’m using to write this story. This feature basically kept new updates from being released because we really wanted to allow users to write on the mobile app.

What I liked?

The entire development process was so cool and I definitely recommend other developers to give it a shot. The more I worked with the app the more I got used to it and became more comfortable with the development process. It was really satisfying to see the app on my phone and navigating through all the pages. The most impressive feature to me was the playlist/player as its something organic by HackerNoon and one of the main features of the app. The push notifications was the feature that I probably learned the most as it was something totally new and I got to see how mobile notifications work, and such knowledge can definitely be applied in the future to other features.

If you don’t have it yet, please download the app and share your thoughts in the comments ⬇️. ✌️

Here is the Apple Version:

Here is the Android Version: