hullagram

by hull-graveyard

hull-graveyard /hullagram

[Deprecated] A clone of Instagram built in HTML with hull.io

129 Stars 41 Forks Last release: Not found 57 Commits 0 Releases

Available items

No Items, yet!

The developer of this repository has not created any items for sale yet. Need a bug fixed? Help with integration? A different license? Create a request here:

About this project

This project is built on the Hull platform, with Aura, Backbone.js, Ratchet and lots of other cool libraries.

You don't need an account on hull.io to use it locally, the

appId
is already present in this app.

Implement cool features (see the last paragraph for ideas), contribute to this repo and we'll give you an early access to Hull so you can build and deploy your own apps !


Hullagram

This is a fully contained demo of what you can achieve with hull.

It's somewhat of a clone of Instagram. View demo

Currently, we use Ratchet, so it will work only on Webkit browsers, iOS and Android.

  • Login with Twitter
  • Upload photos
  • Like them
  • Comment on them
  • List you Twitter friends who also use the app
  • Get the public activity feed
  • See what your friends have done

Best of all, it has no server code and barely any Javascript. Prepare to be amazed.

The steps below are tailored for Mac environments : Linux should mostly work the same.


Anatomy

Hullagram is built around the following apis of Hull

The code is a mix of custom components and packaged components distributed via hull. Most of the packaged components are skinned by overriding default templates

Top level components

You can find an introduction on how Hull components work here.

The document body initially contains only 2 components :

  • hullagram is a container that displays the login screen if the current user is not connected, and the app component if he is.
  • uploader is used to display overlay notifications during file uploads.

Then when the user is connected via Twitter, the app component take over the whole page and starts to act as the main controller.

Screens

#/pictures

The first screen is the public activity feed of the app.

It is implemented in the pictures widget

The data is fetched from the Activities API

The like buttons & like counts on the images comme from a component distributed with hull ([email protected]) and that is just skinned here

#/likes

The pictures displayed are those liked by the current user.

It is implemented in the likes component

The data is fetched from the Likes API

#/friends

Here we display the list of people that the current user follows on Twitter that also have a profile on the app.

We use the packaged components

[email protected]
and just override its main template

#/profile

Just displaying a user profile, the component is here

#/comments

Comments use the packaged component [email protected], with a local template override.

Taking pictures

We use the apis available on iOS6+ to have access to the camera, and a little trickery to give it a nice appearance.


Upload

The pictures are then uploaded to a HullStore (wich is an S3 bucket with CORS activated) via the packaged

[email protected]
component.

The uploader component then reacts to events emmited by the

[email protected]
component to display upload status info. (by the way, it's a good example of the way components are supposed to interact in a components based aura / hull app).

Publication

Once the component is uploaded, the user gets a chance to review and describe it before its actual publication.

Confirming the publication then stores the picture as an Image that belongs to the user.


Installing

First, clone this repository :

git clone git://github.com/hull/hullagram.git

Install node.js (Only used for building the app, not needed for deployment)

grunt-cli as a global module. It's amazing so you should do it anyways.

[sudo] npm install grunt-cli -g

then install grunt and it's modules in the project's folder.

cd hullagram/
npm install

Running the app

To run the app locally, run:

grunt server

Deploying the app

App & Organization Setup on hull

Go to your org's dashboard and setup a few services :

Required services :

Optional anlytics services :

Then create a new hull app.

Don't forget to whitelist your domains and to setup your

appId
and
orgUrl
in the Hull.init method (which is in located in the index.html file).

Deployment on Heroku

First create your heroku app if it's not done yet :

heroku create my-own-hullagram

Build your app for deployement, and commit the compiled version:

git checkout -b deploy
grunt build
git add -f dist
git commit -m "Deployment build"

Deploy your app to heroku:

git push [email protected]:my-own-hullagram.git `git subtree split --prefix dist deploy`:master --force
open http://my-own-hullagram.herokuapp.com

Next steps

Here are a few ideas for further improvement :

  • Photo Filters With caman.js/vintage.js or https://github.com/kudakurage/CSS-PhotoEditor-for-iOS6 + svg foreignObject + canvas drawImage()

  • Tapping once on an image in a feed could open a detail view

  • Tapping on the likes count cell in a profile view could show likes

  • Doubletapping an image could like/unlike it

  • Pull to refresh

  • Add error handling to image uploads

  • PushState support

  • Your idea here… ?

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.