#instakarma

#instakarma

Front end development

Type of work
Front end development

Languages and Tech
HTML, CSS, jQuery, Instagram API

Date
Winter 2015

Project Link
  Website


Have you ever wondered what your total like count would be for all your Instagram posts would be? Given the obsessive state of today's social media, Instagram users have become more critical of their post statistics, where upload times are even precisely calculated in order to optimize the most likes. This semi-egotistical notion of counting likes along with the incentive to learn some web dev was the drive to create #instakarma, a front-end web applcation that does (nearly) just that.

Design

With a singular purpose to count an Instagram's user in mind, the design of the application was evaluated through a minimalist approach. The web app mainly focused the user's attention to their tally count, while enabling them with an action to recount their likes. Overloading the visual interface with additional functionality would have retracted from the application's main purpose.

Personalization was achieved by pulling visual media from Instagram's API and covering the app's background with the user's images. Visual and color cues from Instagram's mobile application were borrowed to evoke familiarity to existing users. For example, Instagram's notification 'chat bubble' was recycled as the tally count component, and the blue buttons from the mobile app's home row reinforced the interactivity of the recount button. Reusing Instagram's design influences along with adding a visual layer of personalization results in a familiar, intuitive experience for the user.

Each screen display is personalized for each user.

Each screen display feels personal for each user through the familiarity of their own images.

Cross-device responsiveness was also a key design decision for the application. Designing for two breakpoints—mobile and desktop—enables the user to interact with the app through a greater array of devices. Limiting the application solely as a desktop web app would comprimise its accessibility, and the app's especially shareable nature would be diminished.

Each screen display is personalized for each user.

#instakarma is responsive for both mobile and desktop screens.

Development

#instakarma was also a fun exercise of developing a web application from start to completion. Entirely existing as a front-end application, I was able to focus on writing the client-side functionality of the app without worrying about any technical intricacies in the backend.

With regards to the UI implementation, responsive design was achieved through writing custom CSS media queries. SASS was used in writing the stylesheets to benefit from selector nesting and variables.

jQuery was the primary Javascript library for the web app as it provides convenience with AJAX and event handling for the developer. The application relies on communicating with Instagram's API in order to retrieve user data, and jQuery was instrumental to the implementation as it enabled me to handle HTTP request/responses with greater convenience. Less lines of code are written when leveraging jQuery's AJAX library methods in comparison to a standard Javascript implementation. Event handling was also optimized for the developer as the jQuery library includes abbreviated methods that make it easy for the developer to implement.

The application needed to frequently interact Instagram's API, making #instakarma one of my first web projects with sufficient AJAX programming. Writing the app enabled me to learn how to aunthenticate a user through their API token method and request the user's specific media assets. The original intention of the app was to tally the likes of all the user's photos, but due to the API's paginated responses, #instakarma only tallies the user's 20 most recent media. Implementing the complete functionality of the application could be achieved by writing a request loop that iterates through all the user's media until the last post is reached.