[Deprecated] A clone of Instagram built in HTML with hull.io
You don't need an account on hull.io to use it locally, the
appIdis 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 !
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.
The steps below are tailored for Mac environments : Linux should mostly work the same.
Hullagram is built around the following apis of Hull
You can find an introduction on how Hull components work here.
The document body initially contains only 2 components :
Then when the user is connected via Twitter, the app component take over the whole page and starts to act as the main controller.
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
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
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 componentsmain template
Just displaying a user profile, the component is here
We use the apis available on iOS6+ to have access to the camera, and a little trickery to give it a nice appearance.
The pictures are then uploaded to a HullStore (wich is an S3 bucket with CORS activated) via the packaged
The uploader component then reacts to events emmited by theaura / hull app).
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.
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
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
orgUrlin the Hull.init method (which is in located in the index.html file).
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
Here are a few ideas for further improvement :
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
Your idea here… ?