My First Real React App
I built something with React. Yes, I’ve built some smaller things with React, but they were created by either following a tutorial or building upon an existing web app. Now, I decided to build something half useful from the ground up.
View the live app here.
I’ve always had the idea to build an app that would allow users to record their wifi speeds at different public locations. The idea being to create a place where people can check the speed of a coffee shop or library prior to visiting the location. This would help those trying to plan where they want to go if they want to get a bit of work done at a place that offers wifi.
The plan was to build out this app, get millions of users, and then eventually sell it off to Google so they can incorporate it into their product suite. Just kidding. The plan was actually to build something that could do the very basics of the wifi app I just described above using React and some sort of database. Why React? Because it is highly used and has some great performance benefits associated with it.
I chose Firebase to use with React since I tweeted about my idea and how I was pondering on which database to use. One of the responses I got was from Laurence Moroney, who works on the Google Firebase team and he (obviously) recommended that I use Firebase. I had heard of Firebase by some other people and have heard that it was easy to use, so I went ahead and decided to use it for the app.
I started out building out the main UI and functionality for the application. Basically I needed a way for someone to input data and a way to present the data. Once that was completed, I went ahead and started hooking up Firebase with React. Fortunately, there are some great Youtube videos explaining how to use Firebase, so it wasn’t too much trouble.
I ended up incorporating user authentication into the app just because I wanted to practice how to implement such a feature in my React app. I don’t think it’s ideal that I’ve setup the app to REQUIRE users to login to view the data, but I learned a lot from doing so. For example it forced me to learn how to use higher order components in React in order to check user authorization and prevent routes from being accessed from non authenticated users.
Once I got the app working half decently, I sent it over to one of my developer friends who tested out the app. He pointed out that I needed to do a lot more form validation, so that’s what I did next. He also posted many inappropriate entries (i.e. “8=====D”), so that prompted me to create a way to easily delete entries.
Then I showed the app to some more people and quickly realized I needed to put more of an emphasis on the mobile experience of the app. Most people trying to view the app were doing so through a mobile browser. There were a bunch of bugs on mobile I had to address.
Now, I’ve got the app in a good place, but there is SO much more I can add to improve upon it. For example, I’d like to incorporate a Map view to show the location of the submission entries. I’d also like to have a better way to aggregate the data for specific locations, because right now everything is added to a table and there are no way of filtering the data (only sorting is enabled). Oh, I also want to incorporate a way to automatically retrieve wifi speed data from a person’s computer so they don’t have to use an external website to do so.
I honestly built this app just to get some more experience with React and have a solid project to showcase within my portfolio. However, it was quite motivating to work on something that I saw could be of value to me and other people. I did end up looking up similar apps AFTER I had done all of this work and found that, sure enough, there is already a hugely popular mobile app that does what my app does (and much more). That realization dampened my level of enthusiasm a bit since I thought I was the only one working on such an app!
Not sure how much more I’ll end up working on the app, but if other’s want to contribute, that would be great! Take a look at the project on Github here.
