How I built an app in a week and how you can too

Creating apps takes time but focus on the right parts and get the first version of your app ready in one week!

Sometimes I envy artists. Musicians, for example, they can write a new song and record it, all in the same day. If I were a musician I’d know how to get famous: write one song every day. Are you a writer? Crank out 12 novels a year by writing 1666 words a day. Put in the work and you’ll get there. Unfortunately, I don’t have that kind of skills. I am only an average programmer. That’s what I used to think at least. Until it hit me: “Wait… What did I say? I’m a programmer, right? What am I fuzzing about? Why don’t I crank out an app every day?” What happened is that I lost perspective. I could envision how someone else should advance their careers. But in my own career, I was lost. I knew how others should do stuff, but I only realized recently I could do the same thing. So, I set myself up for a challenge. Build an app in one week, one app in a day seemed a bit too gushy. 168 Hours on the clock, let’s do this.

“Those who say, ‘It can’t be done,’ are usually interrupted by others doing it.” — Joel A. Barker

Hours remaining: 168

My background in writing apps is very limited. To be honest, I had written one or two Android apps by following a tutorial. Experience with iOS: zero, as in a Tesla’s emission. By today’s standards supporting one operating system is like trying to walk on one leg. So, how will I ever be able to write an app in one week without experience? I had to cheat. A lot of people and companies nowadays also cheat this way. Examples of these cheats are Facebook, Instagram, Tesla, AirBnB… You will know how I am going to cheat when I tell you about my web experience. I’ve built a few web apps with a JavaScript framework called React developed by Facebook. That same company also created React Native. React Native runs your JavaScript code like a native Android or iOS app. I figured since the React and React Native are similar I could build an iOS and Android app in record time. On the backend, I also need something fast. So, I’ll use Firebase, because it’s quick and easy. The title of this article suggests it all worked out… But did I finish my app in one week? You’ll find out later.

Hours remaining: 167

The first step picking the tech stack: done! Next up: THE BIG APP IDEA. This step usually is the hardest part for me. I can come up with lots of ideas. But half of them end up being already done by others and the other half of my ideas are never ‘it’. My app doesn’t have to be unique. It doesn’t have to be disrupting, but whenever I build something I want it to serve a purpose. Stupid idealism… Why do I want it to have a purpose? Because I feel like I’m wasting my time otherwise. But by debating over what to build I’m burning my remaining 167 hours. I was about to lower my standards when out of the blue a colleague approached me. He remembered I once told him I like to code. I don’t work for a tech company so I am the only one who could discern Java from JavaScript there. He said: ‘Hey, you can build apps right? Why not build an app as a replacement for the narrowcasting system’. At our company, we have a lot of screens displaying information for all employees. This system is quite expensive and we’d often stare at black screens. So, I said to him: ‘Give me a week’. Lady Luck threw the idea I was looking for right into my lap. The idea was to build a simple app that would display relevant information to employees. That’s a purpose, right?!

Hours remaining: 162

I’m on a roll. Now it’s time to get clacking on the keyboard! Wait, wait, wait, not yet. First, we have to make a plan. So far, I got the tech stack and the idea. Since it’s a simple app I thought it would be enough to draw a few wireframes. On those sketches, you can see the look and functionality of the app. Although I’m not design-oriented I like this step. By sketching on a piece of paper I can come up with cool results fast. I tried a few ideas but went with the simplest option. I could always change the design later. The most important part for me was getting the core functionality on paper. Those functions were:

• User has the ability to login
• Home screen shows the following tabs: news, events, info, logout button
• The ‘news’ tab shows current news items
• The ‘events’ tab shows upcoming event
• The ‘info’ tab shows basic stuff like important phone numbers

A few simple user stories and some sketches later I was ready for the real work.

Hours remaining: 144

Day one was a success. I now have a rough idea what I’m going to build. To build it all from scratch didn’t seem like a good idea. I went out to find the best React Native boilerplate that would connect to Firebase. On my search, I found amazing stuff. For example, I found a boilerplate that uses CodePush by Microsoft to push updates of the app Over The Air (OTA). No need for going through the App Store again. That would make updates very easy. I found more! I found a boilerplate that was almost too good to be true. It could connect to Firebase, push updates OTA and deliver remote notifications (OneSignal). This boilerplate seemed like heaven, it could do everything I wanted and more. I envisioned it all, my app will be in the top of the stores in no time. Once I started using the boilerplate it all seemed to work. Yes, it seemed to work. You can hear the ‘but’ coming. The boilerplate was so big and so awesome. But whenever I tried to make changes I kept breaking something. Boilerplates can get cramped with features, which is cool, but sometimes it’s too much. The boilerplate I fell in love with so much became my biggest frustration. My life flashed by in front of my eyes... I saw the remaining hours tick by… That’s when I decided the boilerplate full of features wasn’t for me. We parted ways, the boilerplate ran towards the real pros, I went on the search again for a simpler plate.

Hours remaining: 135

Working with all those boilerplates took way too long. I was well behind schedule. The thing I decided to do, is something you should do too. It’s easy to get overwhelmed when you are no Apple/Google/AirBnB pro. I decided to start from a standard boilerplate. The React community offers one called Create React Native App. By starting fresh I had to put in place the Firebase connection myself. That was actually a piece of cake with the help of an official Firebase tutorial. By following this tutorial, I made great headway on the basic functionality of the app. Because without a way to get the news items from the database the app wouldn’t be useful. Getting the connection to this database was a welcome morale boost.

“I’ve missed more than 9000 shots in my career. I’ve lost almost 300 games. 26 times, I’ve been trusted to take the game winning shot and missed. I’ve failed over and over and over again in my life. And that is why I succeed.”  — Michael Jordan

Hours remaining: 120

The company I was building this app for isn’t very keen on sharing data with strangers. So, I had to figure out a way to protect it. After setting up the right rules, I trusted the security of Firebase. But the app was still displaying news freely. To protect the data from malicious onlookers I figured a login system would be what I needed. To signup for the app you had to enter a company email address and you had to verify the address. That way only real employees could get an account to get past the login page. I wasn’t sure this was going to work. I was afraid the spam filters would think the verification message was dangerous. Luckily, this wasn’t the case. Firebase doesn’t let you change the verification message itself. This way spam filters will recognize it as a safe message.

Hours remaining: 96

The basic functionality: check. I was back on schedule, which felt good, but looking at the app made me vomit because of its ugliness. It wasn’t user-friendly or even useful at all yet. The next couple of hours I set out to polish the design and connect the features I’d built so far together. Like I said before; designing isn’t my strongest asset, but I’ll give it my all. While coding I ran into a few problems. For example, figuring out the right way to set up navigation. Also, too much time went into finding the right files in my directory and in which folder I should store what. While looking for a way to make my directory look clean I stumbled on Organizing a React Native Project. This helped a great deal in the time I spent looking for files. I also found a useful post on separating your screen in components. The idea is that every component on the screen should be a separate component in your code.

Hours remaining: 72

Halfway through this project and it’s starting to look like something! After three days of relentless coding, I felt a little dent in my motivation. I can only focus for so long. I decided to do something else for a bit. A few months ago I took part in the email course #dailysvgimages by Coding Artist. During this course, I learned to create fun images. This app needed something to please the eye, so I used the free SVG editor Vectr to create an icon for the app. Pretty fun to do.
It’s Dutch, don’t worry if you think it looks like gibberish. Hours remaining: 48
Taking a short break from programming helped. It renewed my energy, drive and passion to finish the code for this app. I finished the basics, but it was still buggy. The last 10% of a project always takes the longest. If you don’t believe me read this article. Like the article mentions, I put off all the boring parts to the end. I also came up with lots of changes during development. Because fo this finishing the minimum viable product (MVP) was kind of boring. Sometimes it was even frustrating so I don’t have a lot to say about that part. Remember you have to get through this part to create a good product.

“If there is no struggle, there is no progress. “— Frederick Douglass

Hours remaining: 24

The last day started, it’s a Sunday so I’ll have lots of time to work on the app right? I still have to fix a lot of bugs, for example, the app forgot how to load data from my backend. So I could use a full day to finish it. Even though I had a whole day to work out the last kinks I didn’t spend it all on the app. The problem with having a lot of time is that you also have a lot of time to procrastinate. When I have 20 hours left on the clock I have time to watch a funny video on YouTube right? It’s only 3 minutes and 15 seconds, that shouldn’t be a problem. After finishing the video I look at the clock again and it shows I have 13 hours left. Okay… That was quick… Losing those hours sounds like a waste, but it’s actually my way of making a deadline. I know a lot of college students can relate. Getting closer to a deadline makes all the creative juices start to flow. Those juices need some stirring to achieve greatness. A deadline far in the future doesn’t stir the juices at all. It’s like the juices freeze on hearing of a deadline more than 3 hours away. So with the juices flowing and the renewed energy I set out to hammer down the bugs.

Hours remaining: 0

It’s the end of the week, 168 hours later. Of course, I didn’t spend all those hours on the app, I still need to work during the day and sleep during the night. It’s always hard to say whether I achieve a goal related to programming. Programming is never done. This is definitely not the latest version of the app, I’m sure you won’t even recognize it in a few weeks. But I think I achieved my goal since the app does what it’s supposed to do and it doesn’t look too ugly. The makers of WhatsApp or Instagram or whatever would laugh out loud when I show them my work. I have a lot to learn on the design side of programming, that’s what I’ll focus on next. But the result of this week’s hard work makes me very proud. This was a first time building an app for both Android and iOS. A huge milestone in my programming journey.
Thanks for reading my story about how I built an Android and iOS app in one week. You can find the code on my GitHub. Before you head off, there’s one more thing I want to tell you. It’s the main reason I wrote this post:
You can do this too. Hereby I challenge you to build an app in one week!

If you liked this post please vote so other people will see it too. Check out more of my blogs at ditisAnton.nl.