Building My First Project and What I Learned Along the Way

UPDATE: As of 07/30/18, Instagram updated the public access to its media JSON so you now have to log into instagram.com in the browser in order to use Evertab. But now you get to see media of private accounts you follow as well!

While I learned a great lot during my time at Grace Hopper Academy, I’ve never built anything on my own. I’ve always had a team. Being on a team was great, especially with some of the smartest, hardest working people in I know in my life. However, it never forced me to learn on my own. I learned, and I definitely contributed a great lot, but there was always a dependence, a thought in the back of my head going, “eh it’s okay if I don’t know, my team will take care of it and teach me.”

Now that I’ve graduated, the training wheels are off. There is no more safety net. I am a “Software Engineer” now. I need to have the confidence of making things and learning things on my my own.

At first I was pushing it off, mainly due to the fear that, what if I start and I run into roadblocks and I can’t resolve them? What if I am trying to use my new skills and then realize I haven’t actually learned anything? What if after all the hard work and time, I just end up not being cut out to be a Software Engineer? And everything would be a waste.

But then, I had a “get it together, woman” moment. I know I can do it. I know I am not stupid. I know I’m capable. So I started working on a Chrome extension.

Conception

I decided to make something that replaces the default new tab page. I originally got the idea from using Momentum. Then my friend Rachel made Archillension. After goggling at both of these beautifully made extensions, I started asking, “well, what if I want to make something that uses pictures from @assemblyapp, a company that has a mobile app where people can create graphic designs.” I am always excited when they post a new picture and I want to have them on my new tab page!

Eventually, I decided to make an extension that is super customizable and people can put in any Instagram account and hashtag and it’ll pull those pictures from its API and put them on the new tab page.

With with in mind, I started my #IMadeAThing journey.

Instagram API is A Pain to Work With 😱

When I was doing my research, I came across the knowledge that https://www.instagram.com/[user_id]/media would get you a JSON object of all that person’s information (latest 20 posts). So I figured, “great! I can just send an ajax get request! That’s easy enough!” But then I learned about CORS.

The Cross-Origin Resource Sharing (CORS) mechanism stops cross-domain data access and thus preventing my extension from getting data from instagram.com. So, I decided to use the Instagram API. Enter first roadblock. What is the redirect URI for a chrome extension that has no server? After a long time of Stackoverflowing, I decided to make an Instagram account for my extension just so that I can use the URL.

Instagram is super strict on what sandbox users can and cannot access from its API. Here is my second roadblock: developers can no longer use the API for “one-off” projects, meaning they can’t search for media using a tag. Since it really isn’t a roadblock I could hop over, I swerved: my extension can only display media from a specified username.

After setting up HTML/CSS (which was the end of me), I learned how to pull content from the Instagram API. But then comes my third roadblock. I could only pull from my own account since sandbox users can only view media of other sandbox users to your app (to get sandbox users on your app, you would need to invite them and they would have to accept). Therefore, being the only user of the extension, only my access token would work.

Well, why don’t I get access to development mode! Yes, that’s my fourth roadblock (or roadblock 3.1). Instagram only allows development access to their API for certain use cases.

Half of these options gave me the “not supported” message. Even for the ones they support, they required me to fill out an application which includes a video screencast. So I made a screencast, all the while knowing that there was a 99% chance they wouldn’t approve. (Also, kudos to Instagram for being so secure 👏.)

Then I sort of just sank into my pillow, mourning over all my efforts of building what I had so far.

After sulking for about 30 minutes, there came another “get it together, woman” moment. I thought to myself, “there’s gotta be a way.” So I went back to my trusty boyfriend, a.k.a. Google.

Turned Out my Googling Skills Failed Me

If you haven’t thought of it by now up to this point, there it is. $.getJSON. How. Did. I. Miss. It?!?!!? I had certainly tried to find out how to grab the urls from https://www.instagram.com/[user_id]/media. And I had somehow let this $.getJSON gem slipped through.

With this newfound knowledge, I was both excited and a bit sad. Excited because I could continue to make a thing, I was also sad because I ended up not using a lot of code I spent a lot of time writing. But the excitement certainly exceeded the sadness (especially knowing that now I don’t have to worry about storing access tokens securely). So I went back at it. And then… all of a sudden, it’s done.

Evertab

After countless hours, my extension, Evertab, is finally done (get it here 😃). I named it Evertab because it’s an ever-changing tab and I designed the logo using Assembly, of course.

I am pretty sure I shed a tear as I was trying my out my new creation.

Since Evertab takes any public Instagram handles, there are countless combinations of photos. I sat at my desk, spending an hour trying out different handles and every time, it was a new experience!

What I Learned, Both as a Developer and as A Person

Looking back, none of my roadblocks were really roadblocks. There were merely difficulties for an inexperienced developer. But you know what, I am VERY proud of myself. It being the first solo project I worked on, it means a lot to me. It was definitely a journey and I learned so many things along the way.

Below are the few things I learned:

Technically

Details of building a chrome extension

From creating a manifest file to publishing the extension, there were different Chrome methods I had to include. I love seeing what new things do!

Web Storage API

It was like magic seeing data persists.

Instagram API

Even though I did not end up using it, I did spend a lot of quality time with the documentation. I’m confident when I do need to use it, it wouldn’t be a trek across fiery pits.

jQuery, HTML5 && CSS

I wouldn’t say I learned these from doing this project. They were all things I knew before but forgot (some of it) due to lack of frequent use. There were definitely a lot of “oh yeah, that” moments. And I certainly polished my flexbox skills.

Project Management

I learned how to manage my time for a project. It is definitely possible to follow the agile methodology by yourself. I also learned that next time, I should spend more time researching before actually going into coding. It would prevent another $.getJSON moment and would save valuable time.

Personally
I grew a lot on this journey. There were a lot of times when I wanted to give up but every time that happens I pulled myself out of it. I learned that as long as I keep pushing, anything is doable. It gave me a surge of confidence and I am super excited to work on my next project, which is a full stack portfolio site.

I found that whenever I encounter a roadblock and it seems there’s no way out, tell myself this, “there’s gotta be a way!” And surely, I will find a way.

I can see my future holding a lot more different projects. And I also cannot wait to get a job as a professional engineer (yes, I am looking! See my resume here!) I am not a “Software Engineer”, I am a Software Engineer.

But for now, please enjoy Evertab (see screenshots below) and leave me reviews!

Oh and I also learned how to write a blog post.

— love, Kaisin 🐙