InstaClock — AngularJS + Instagram + Clock

Alvaro Flores
AngularJS and stuff
2 min readJan 5, 2015

--

A clock showing the most popular photos on Instagram by day, hour, minutes and seconds.

This first weekend of the year i decided to get my hands on an idea i’d while ago. This was, show the most populars photos on Instagram but for day, hours, minutes and seconds in a clock or something like that.

The Instagram API have a method (media/popular) which gives you the most popular photos on that moment, but as i want to show it by some specific periods of time i need to store that data on a database.

The database selected was MySQL, mainly because i’d a server running that so it was easier. The structure of the table is the following.

ID_POP: Primary key
ID_INSTAGRAM: field to store the Instagram ID
LIKES: Store the number of likes of the photo
DATE_CREATED: Publish’s Timestamp
DATE_INSERT: Timestamp of the moment the script get the photo and insert it in the database
DATA: Data of the photo, encoded on json.

So in the backend are two scripts, the first one running every minute to fetch the most popular photos on that moment, it stores it on the database, the logic is simple, if the photo already exist, updates the LIKES and DATA fields, if not, insert. The other script is for fetch the photos by the periods and is called by the frontend every minute.

For the frontend the selected framework was AngularJS, i know, it’s kind of too much for such a simple app, but it makes the development a lot easier. Also use Bootstrap 3 and Font Awesome.

And that’s it! check out the result here

--

--

Alvaro Flores
AngularJS and stuff

0x68 0x6f 0x6c 0x61 0x20 0x74 0x75 0x69 0x77 0x6f 0x72 0x6c 0x64 0x21 0x20 0x66 0x6f 0x6c 0x6c 0x6f 0x77 0x6d 0x65 0x20 0x3b 0x29