Stories! Stories are everywhere these days. Snapchat, Instagram, Facebook, Facebook Messenger and Whatsapp all have stories. Hell, it’s only a matter of time before Microsoft Excel gets a stories update.
[][1]
In any case, if you want to build an app like Snapchat or build an app like Instagram, there is an easy way to do so. The focus of this tutorial will be about building the story functionality of Snapchat and Instagram into an app. We’ll save the whole disappearing message thing for a later date.
Okay, so you might be thinking that this is going to be a whole lot of work. Guess what? It’s not. This is all thanks to an amazing open source library on GitHub called Zuck.js.
Zuck.js
Zuck.js is a javascript library that easily allows you to add stories into an app. It already comes ready to handle opening stories, cube animation effects and giving you the clean Instagram or Snapchat look. It really makes building stories super easy to do! So because this is a javascript library, we are going to build a webapp that can run in the phone’s browser. It’s going to be very basic and look something like this:
[][2]
Setting up the HTML
To get started, let’s create a basic HTML file:
<metacharset=“utf-8”>
<metahttp-equiv=“X-UA-Compatible"content=“IE=edge”>
<metaname=“description"content=”">
<metaname=“viewport"content=“width=device-width, initial-scale=1”>
<linkrel=“stylesheet"type=“text/css"href=”./vendor/zuck.js-master/zuck.css”>
<linkrel=“stylesheet"type=“text/css"href=”./vendor/zuck.js-master/skins/snapgram.css”>
<divid=“stories”>
<scriptsrc=”./vendor/zuck.js-master/zuck.js”>
<scriptsrc="./js/main.js">
Make sure that you download the Zuck js library and placed it somewhere in your project structure so that you can link to it. In this HTML file, I linked to the Zucks CSS stylesheet and the Zuck skin that I want to use. Inside the body, the only thing that I need is a div. This div will be passed to Zuck so that it can render the stories to it. Finally, I imported the Zuck javascript library then my main javascript code.
The Javascript
Now, in my main js file, I start by defining a function that will return an object with the properties specified:
// Using object short-hand (id: id)
return {
id,
type,
length,
src,
preview,
link,
seen,
time,
};
}
</div>
In that function, I pass in a whole bunch of parameters. It then outputs an object with those parameters. Keep in mind, I am using the property shorthand. So instead of saying {id: id} it’s just {id}.
Next, initialize the Zuck library with the below code:
<div>
const stories = new Zuck(‘stories’, {
backNative:true,
autoFullScreen:‘false’,
skin:‘Snapgram’,
avatars:’true’,
list:false,
cubeEffect:’true',
localStorage:true,
stories: [],
});
</div>
When initializing the Zuck object, make sure that the ‘stories’ parameter matches the div id that you defined in your HTML. Afterwards, I just loaded the Zuck library with the skin I wanted and also passed in a couple of options. You can find all the available options outlined in the Zuck readme.
Finally, let’s add a story to the story array. Inside of the array, add the following object:
<div>
stories: [
{
id:‘vision’,
name:‘Tech’,
link:’’,
lastUpdated:1492665454,
items: [
buildItem(‘1’, ‘photo’, 3, ‘ https://pbs.twimg.com/profile_images/782474226020200448/zDo-gAo0_400x400.jpg' , ‘’, false, 1492665454),
buildItem(‘2’, ‘photo’, 3, ‘ https://vignette4.wikia.nocookie.net/ironman/images/5/59/Robert-Downey-Jr-Tony-Stark-Iron-Man-3-Marvel-Disney.jpg/revision/latest?cb=20130611164804' , ‘’, ‘’, false, 1492665454),
buildItem(‘3’, ‘video’, 0, ‘ https://scontent-gru2-2.cdninstagram.com/t50.2886-16/14965218_193969377722724_482497862983221248_n.mp4' , ‘ https://scontent-gru2-2.cdninstagram.com/t51.2885-15/e15/10597412_455246124639813_1360162248_n.jpg' , ‘’, false, 1492665454),
],
}],
</div>
This essentially will build a single story that contains three items. The items can be a mixture of photos or videos. You can also adjust the length of each story item. Zuck js works just like Snapchat and Instagram. So if the user has already seen the story (hence the seen boolean) it will automatically proceed to the next item.
So now you have everything you need for your basic Snapchat app. If you open up your Index.html file in the browser, you should see the single story listed. Clicking on it will open up the story in a viewer. From this point, you could make it more dynamic by pulling in stories from a REST endpoint or the user’s gallery if you wanted. To get this on Android or iOS simply wrap the app in a webview.
<a href="https://github.com/DaveBben/Snapchat-Stories" target="_blank" rel="noopener">You can download the full code on Github</a>
[1]: https://jsdeveloper.io/wp-content/uploads/2017/10/C7dfS_CWwAAFL4A.jpg
[2]: https://jsdeveloper.io/wp-content/uploads/2017/10/build-an-app-like-snapchat.png