My First App: A Reflection On What It Took To Get Here

yummygif preview

My First App: A Reflection On What It Took To Get Here

YuumyGIF was my first app and it took a lot to get here. Its a visual recipe mobile app that consumes the public API from Reddit. The recipes come from the /r/GifRecipes and /r/RecipeGIFs sub-reddits. The app uses Google’s Firebase back-end for authentication. That was my goal and that’s what I set out to develop as an MVP. I started with almost no programming experience. Lets get in to my reflection on what it took to get here.

My main motivation to become a self-taught developer was to solve a person problem. The problem is my perspective on travel planning and timing. This app would also be my first major app that could sync with a desktop and mobile application.

Something was bugging me about making my first major app also my first app to launch. I’ve heard warnings that everyone’s first app typically fails. So, I wanted to take a few steps back and develop something easier from start to finish. This would allow me to understand what the entire process is like. After the launch and pitching the MVP to some users, it become much more than that. I’ll have to cover what its like to start having users in another blog post.

Habits will break or make you

Starting out reflected on a few lessons learned from new habits I tried to form or break. I came up with a few reasons why I either failed or succeeded at them. It comes down to keeping momentum and staying persistent. Here are some guiding tips that I would tell anyone getting started:

  1. Learn something new everyday to keep up the momentum. This could be by coding, taking a lesson or listening to a coding podcast. Listening to videos or podcasts help you learn the lingo and help you communicate when you need to ask for help.
  2. Choose a programming language and stick with it.
  3. Learn what you need to learn at the time you need to learn it.
  4. If you need a day off or a short break from coding take time work on your user interface and user experience skills. After all, you’re not going to put in all this work to make an app that looks bad and/or gives the user a bad experience.
  5. Learn the types of tools that web development teams use to manage their projects like Trello.
  6. Listen to podcasts by entrepreneurs like Pat Flynn, Tim Ferriss or Gary Vaynerchuk. Not only are they a great source of motivation but they have a ton of great startup advice.

This may seem like a lot but you might end up being a one man shop unless you can hire help. If you worked at a web development company you’d have help from specialized teams. These teams might be ui/ux, front-end, back-end developers, dev ops and/or a project manager. Guess what? That’s all you. Good luck, right? Failing in one of those areas might mean you deliver a sub-par application. Starting out, that end up being what you deliver. I want their to be undeniable evidence that I tried my best to develop a well-rounded app.

Let’s get a little more specific about what I wanted my first major app to do:

  1. Sync between desktop and mobile devices
  2. Authenticate Users
  3. Offline first
  4. Mobile first design
  5. Maximize code base use between all platforms (Desktop, iOS, Android, etc.)

I’ll admit, I built my first website when I was around 15 so I already knew some HTML, CSS, PHP, jQuery and Javascript. I had an idea of what was possible on the onset.

I got it into my mind that I would learn the MEAN stack. Which is MongoDB, Express, Angular and Node. This was back when Angular 1.x was a popular framework to learn and Angular 2.x was very early in its development. I also found out that I could build a mobile app with only Javascript using Ionic which as also based on Angular.

Choose a Language.

I made a decision to learn Javascript which is the common language across a lot of options. I also decided that I wouldn’t try any other language for the time being such as Ruby, PHP or Python. It’s not that I wouldn’t want too, I would love too but this is something I do with my limited spare time after work. I’m not a software developer my trade. It was also nice to know the front-end and back-end would be Javascript. One less language to learn, one less chance throwing up my hands and giving up. This is what I meant by learning what you need to learn when you need to learn it.

From this point on I spent the next 8 months learning HTML, CSS, vanilla Javascript, UI and UX. While I spent a lot of time in HTML and CSS, I also knew when I got the front-end, I would spend tons of time in those areas.

I got started with these 2 awesome books by John Duckett. One is on HTML/CSS and the other is Javascript/Jquery. Once I got through those books, I got started video courses with Treehouse. I can’t recall their specific titles but they have tracks for How to build a Website, Becoming a Web Developer, Basic Javascript, Full Stack Javascript and Advanced Javascript. Combined it was a few hundred hours of courses. The instructors are great. You can do coding exercises on the website itself and practice what you were recently taught. I wouldn’t move on until I understood the code and could do it without looking back.

After hundreds of hours on Treehouse, I didn’t want to keep paying monthly for the membership. I stumbled upon “Javascript: Understanding the Weird Parts” by Tony Alicea on YouTube. After watching that, I bought the rest of course on Udemy. With Udemy you pay once and the content is yours to keep and rewatch as much as you want without feeling rushed. Treehouse does have its benefits in that the content has flow and consistency. If I were to start over, I would follow the same path starting with Treehouse.

Courses

Here are the courses I’ve taken on Udemy that’s taken me to where I am today. This is about the order I took them in as well:

  1. Javascript the weird parts – Tony Alicea
  2. Learn and Understand Node Js – Tony Alicea
  3. The Complete Node.JS Developer Course (1st Edition) – There’s a newer one out now.
  4. SASS Workflow
  5. Learn and Understand AngularJS – Tony Alicea (1.x)
  6. Ionic 1: From Web to Mobile – Asim Hussain
  7. All about NodeJS – Sachin Bhatnagar
  8. Introduction to Typescript
  9. Angular 2 Master Class – Alejandro Rengel
  10. Angular 2 with Typescript for Beginners – Mosh Hamedani
  11. Mobile App Design In Sketch 3: UX and UI Design
  12. Angular 2: From Theory to Practice

I also completed 2 e-books from a couple great Ionic/Mobile app developers/bloggers:

  1. Josh Morony’s Ionic Expert Edition Book
  2. Jave Bratt – Building Apps with Ionic and Firebase

By now its been about 7-8 months of a combination of video courses, blogs and books. I consumed at least 1,000 hours of video content if not more. At this point I had to say “stop, pencils down” and only seek further knowledge when I need to know it or reference it. There are no tutorials or courses that’s going to build your app for you. Its time to take what you’ve learned and start building! Once I got started, my knowledge took off like a hockey stick. I’m not going to lie, there were plenty of “troughs of sorrow” type moments where I didn’t think I could pull it off. But you’ll begin to notice a pattern that you’ll usually figure it out as long as you don’t stop trying. Those breakthroughs are were you are solidifying your new skills. Failure is where you learn the most.

Let’s get back to more specifics about YummyGIF. I’ll glaze over the fact that I have been working on my main application for at least 3-4 months. It wasn’t until later that I realized that I need to take a step back and get a small win under my belt. I love to cook and those fast cooking videos are a great way to come up with cooking ideas. So, I thought I would make an app that made it easy to skim through some of the latest ones posted to reddit.

If we go back to the introduction it you’ll remember that it required few things which was:

  1. An API to source recipe gifs (Reddit)
  2. Authentication to let users create, read, update and delete recipes.
  3. Work on Android/iOS.

In my course work, I learned a lot about Application Program Interfaces or API’s. These API’s let you pull data from websites that make their data available to the public. I also learned about NoSQL, Data Modeling and User Authentication.

There’s no way you wouldn’t have heard about Firebase by now if you followed a similar path. It’s real- time NoSQL database that also has authentication and security rules built in. It’s way more powerful than my use case calls for but I wanted to try it out anyway.

A Doable Challenge

I figured it would be a doable challenge. I could build this app and use everything that I’ve learned. From prototyping ui/ux all the way from front-end to back-end. It would be a “full stack” hybrid javascript app. It would work for Android and the Apple store. My goal was to complete it by January 2017.

If you’re a developer, its important for you to learn what it takes to build an app from scratch. It can help you understand what it takes to be the customer. I’ve read that some companies do that its valuable.If you’re a few steps behind me or thinking about learning to code, it’s worth it. I hoped this lengthy blog post gives you some advice on what it takes to learn to build your first app.