Every now and then we get a chance to work on some of our own projects and experiments outside of client work. This post is about one such project, called Creative Status, which you can check out at creativestatus.io on your mobile.
The idea came from our comrade Blaz Robar. Blaz was looking to create an Instagram-like ‘app’ for designers and creatives to be able to share photos of their work via mobile. Obviously we wanted to test the water and didn’t have the time to go native and build for Android or iPhone devices, so we decided to approach the app as a mobile site.
Frontend
For the front-end we decided to use the Foundation grid, which is what we lean towards for our commercial projects too. Foundation has a simple to use responsive grid-system that is quick and easy to work with, meaning we didn’t have to spend any time creating our own structural markup and CSS.
Users & Content
The next challenge was to setup the user system, fortunately WP has registration and log-in built in, the only missing functionality required was the ability for a user to ‘follow’ another user, and for a user to ‘like’ a photo. This functionality was easily catered for using post_meta and user_meta. We simply use the meta values to store post ID’s or user ID’s against another user’s ID natively via basic WordPress set and get meta functions.
Photo Upload
The biggest challenge of course would be photo upload.
After some Googling we discovered a JS library called Plupload. Plupload allows you to select photos from the phone natively and also allows you to tap into the camera on iPhone to prompt the user to take a new photo if need be.
The photos themselves are then simply stored as ‘posts’. We have the following components handling each bit of Instagram-like functionality:
Summary
User Registration and Log-in: Default WordPress
Image upload: Plupload passing image to a custom ‘create_post’ function to store a standard WordPress post
User Follow/Like: Default WordPress meta (post_meta and user_meta)
Frontend: HTML5 and CSS3 using Foundation 3.