How to build a social camera app in under 4 hours

It’s never been this easy.

This post assumes you’ve built a website before and are familiar with HTML, CSS and JavaScript. We will be using React.js as our tool of choice, so it will obviously help you if you have worked with it before. (But don’t fret if you haven’t, you’ll still be able to understand what’s happening just fine. React is extremely logical.)

What we’re gonna build

A very simple camera app that automatically saves photos into the cloud and shares them with anyone our users invite to their “server”. (Think apple’s photo-stream, but much much easier to set up and manage.)

Our app will be split into 2 main parts, the camera and the library, later we’ll tweak it more and add more functionality, but those are what we’ll start with today. The camera should be as fast, fun and snappy as possible. The library will be very basic for the time being and simply display full-size photos taken by the users.

For navigation between camera and library we’ll implement a Snapchat-esque swiping mechanism.

What it’s going to look like

Take a picture (left) — View everyone’s pics (right)

Here we go!

We’re going to build this app as a “room” for Bebo. Bebo automatically handles all of our user management, gives us access to the native device camera input and lets us store our user’s uploaded images and the corresponding database entries for free. (an unlimited amount of both) Additionally all existing Bebo users will immediately be able to take advantage of the new “room” we are building.

To hook into the Bebo functionality we’ll need to include the Bebo SDK in our index.html, thankfully that’s as easy as adding Google Analytics to a website:

That was all the HTML we’ll write for this app, from here on out we’ll be writing React (JSX). Let’s start by bootstrapping our <App /> component and rendering it into the DOM:

As you can see we’re waiting until the Bebo SDK is ready and then we’re rendering our initial App component into the empty div in the index.html.

The React side of things:

We’re going to be building a total of 4 React components.

• <App /> will hold most of our logic and all of our to-level state
• <Camera /> will render the Camera view
• <Library /> will hold our Library view and hold the current…
• <Photo /> will render the currently selected photo into the <Library/>

I’m going to cut out all the less-important boiler-plate code out of the following examples to keep them concise, you can find all of the full source-files here.

All set? Let’s start with the:

<App />

I’m going to cut out all the less-important boiler-plate code out of the following examples to keep them concise, you can find all of the full source-files here.

We’re going to have a constructor in out <App /> component that will not only set our initial state but also bind convenience functions we’ll use for interacting with the database the Bebo SDK provides for us:

Simple enough so far? Okay, moving on. Next we’ll hook up the lifecycle methods:

We’ll also need to be able to take a photo, so let’s hook that up real quick:

Lastly we’ll need to set up the render() method for our <App />:

That’s it four our <App />, we’ll be setting up the camera next, you can find the full App.js here.

<Camera />

This one is very simple, importantly we’ll leave the background transparent because we want the device Camera we turned on in our <App /> to be visible. All we add to that are some controls, take a picture…

flip the camera…

… and go to the library:

Okay, finally let’s define our render() method:

That’s it for the camera. Now for the…

<Library />

The library doesn’t do that much, it handles the index of the current photo the user is looking at, other than that it only calls the <App /> occasionally to load more images once it’s near the end of the initial 50. Let’s see what that looks like:

That’s it, let’s render it and move on:

Okay, we have one last thing we need to do and that is render the actual photos in the library. And that’s all we do, the <Photo /> component has no state, all it does is render the photo object the library supplies; here it is:

Finishing up

the final project structure

That’s it, we’re done. All that’s left to do is to sprinkle some CSS on it and we have a fully functional “room” that runs inside Bebo on both iOS and Android.

You can go to bebo.com and download the App to see it in action, or if you want to check out the full source code it’s available here.

I’ll be improving this “room” over the coming week, if you want to learn how to take advantage of notifications inside of Bebo or how to set up an image editor á la Snapchat using HTML5 canvas in React you should consider following me on Medium. :)

If you have questions or suggestions or if you want to get started building your own Bebo “rooms” please feel free to reach out on twitter, I’m @jnsdls.