DEV Community

Cover image for First Ever DEV Contest: Build a Realtime App with Pusher
Jess Lee Subscriber for The DEV Team

Posted on • Updated on

First Ever DEV Contest: Build a Realtime App with Pusher

Welcome to the first-ever DEV contest! Organizing an event like this is something we’ve been wanting to do for a while and we’re super excited to be teaming up with Pusher, our first platinum sponsor. They’ve been wonderful partners so far. In fact, we use the Pusher Channels API to support the dev.to live chat (if you’ve been to one of our workshops, you’ll know what I mean). They truly make the process of building real-time apps seamless and we’re excited to see what you can do with their technology.

The theme of this contest is to create a real-time app or a hack that uses Pusher Channels real-time API. To get started developing apps with Pusher Channels, you can check out the tutorials section on Pusher.com. We’re not looking for super polished/scalable/backwards-compatible submissions but we are looking for projects that work. Judging will be based on how innovative/fun/clever/useful your idea is and how well you’ve executed said idea. Bonus points for documentation in the form of dev.to posts 😛

There will be two grand prize winners -- the community grand prize winner and the panel grand prize winner. The community grand prize winner will be selected based on the community’s reaction, (highest number of hearts and unicorns ❤️ 🦄) and the panel grand prize winner will be selected by the DEV and Pusher teams. We’ll also be giving away prizes to ten runner-ups.

How to submit a project 📨

All projects need to be submitted to dev.to by May, 25, 2018 at 11:59 pm EDT. You can submit your project by creating a submission post -- please use this template. In the post, you will include:

  • Link to live project demo
  • Link to code
  • Description of how you built the project
  • Links to additional posts you may have written along the way to document your progress

How to vote for your favorite project ⭐️

Even if you don’t submit a project, we hope you check out all the cool things the community is building and vote on your favorite! Your vote has a direct impact on who receives the community grand prize.

Prizing 🎁

Community Grand Prize (1)

Panel Grand Prize (1)

Runner-Up Prize (10)

  • $50 gift card to Adafruit
  • $50 Coupon to the DEV Shop
  • Pusher Swag
  • A DEV Badge 😉

Important Dates 🗓

05/01: Start Hacking!
05/25: Submit your project by 12pm EST
05/31: Winners announced!

Top comments (79)

Collapse
 
ben profile image
Ben Halpern

I think this is a great way to build a portfolio. Winners and runner-ups will all get ample recognition for their efforts.

I'll plan to make some threads where folks can chat through some ideas or get feedback. Look out for that in the coming days/weeks.

Otherwise happy to talk more about this here. We're building internally with the Pusher API and will be releasing details on that but I also plan to hack together something fun for the contest. I won't be eligible for the prize though 😄

Collapse
 
cdvillard profile image
Charles D. Villard

To clarify for the pedantics like myself, we're talking about using the Pusher APIs and not any specific dev.to endpoints correct? Or are those available for use in the contest and I'm just behind on how fast everything is growing here?

Collapse
 
zmarkan profile image
Zan Markan

Yeah - the idea is to build something with Pusher Channels. You'd control both the server and client components.

I don't know whether DEV.to expose any of their endpoints.

Collapse
 
lacanlale profile image
Jonathan Lacanlale

Awesome! If we submit mobile applications, should it be a video of the app working as the demo?

Collapse
 
ben profile image
Ben Halpern

You have freedom in terms of how you present the idea, but anything to best demonstrate it is a good idea. Videos, gifs, embeds, anything you can to show the submission in all its splendor.

Collapse
 
zmarkan profile image
Zan Markan

Hello everyone 👋 I'm a developer evangelist at Pusher.

I'm super proud to work with the DEV team on this, and eager to see what cool stuff you folks build this month!

I'm also available to answer any Pusher Channels related questions (and help out with any other questions where I can). Either tweet me @zmarkan me or email me at zan [at] pusher.com :)

Happy building!

Collapse
 
iyanuashiri profile image
Iyanuoluwa Ajao

Can we use any Pusher products for the app we build? For instance, I'm interested in the Textsync API. It is realtime and a Pusher product

Collapse
 
zmarkan profile image
Zan Markan

The requirement is that you use Channels, but you can of course use any other products as well 😉

Collapse
 
kayis profile image
K

Is the application state strongly consistent?

Collapse
 
rhymes profile image
rhymes

gif

Collapse
 
kayis profile image
K • Edited

Sounds cool.

So the constraints are using the channels API and not the chat/editor stuff.

And iff I got this correctly after reading the docs, the constraints of this API are:

  • 100 connections max
  • 200k msgs/day for all events
    • the delivered msgs are counted here, not the published ones
    • 10 connections * 1 msg published == 10 msg delivered

  • 10 msgs/sec for client events

  • 10 KB/msg
Collapse
 
zmarkan profile image
Zan Markan

Correct - for the submissions to qualify the projects need to use Channels.

Of course, you are free to use any other APIs or services as well - and that includes Pusher products :)

And regarding the limits in the free/sandbox tier:

The rest is correct

Collapse
 
ben profile image
Ben Halpern

I believe the 100 connections is specifically for the presence channels. I don't think that's a constraint on other uses of the product. But we'll get more of the Pusher folks in here to clarify anything.

Collapse
 
pmbanugo profile image
Peter Mbanugo

I think 10 connections * 1 message = 11 messages in total

Collapse
 
kayis profile image
K

Ah, right.

Collapse
 
carloslfu profile image
Carlos Galarza

Challenge accepted ;)

Collapse
 
ben profile image
Ben Halpern

Good luck!

Collapse
 
jess profile image
Jess Lee

🙌🙌🙌

Collapse
 
mehraas profile image
Ashish Mehra

This is amazing.I'm up for the contest 🙌

Collapse
 
jess profile image
Jess Lee

Whoo! Any idea of what you'll be building?!

Collapse
 
mehraas profile image
Ashish Mehra • Edited

Right now, I don't have any idea about the thing I'm going to build.But first thing I'll do is to understand the working of pusher 😁 .

Thread Thread
 
zmarkan profile image
Zan Markan

Excellent! 🚀
Feel free to ping me if you'd like me to clarify anything, and I invite you to check out our tutorials page for the inspiration.

Thread Thread
 
mehraas profile image
Ashish Mehra

Thanks! :-)

Collapse
 
stefannibrasil profile image
Stefanni Brasil

Oh my god, this is amazing!!

Collapse
 
ben profile image
Ben Halpern

Yay!

Collapse
 
vezyank profile image
Slava

How is pusher better than socket.io ?

Collapse
 
zmarkan profile image
Zan Markan

Hey, I'm a developer evangelist at Pusher.

I don't see it as a better/worse kind of deal.

Both Pusher Channels and socket.io allow you to publish and subscribe to messages in realtime using the WebSocket protocol.

The main difference is that Channels is a hosted service/API, and with socket.io you need to manage the deployment yourself.
In general, you need to do less work to get started with Channels, and once it comes to scaling that really becomes a LOT less work :)

Collapse
 
kayis profile image
K

The use-cases of Channels are also a bit more narrow.

It seems to me that the main idea behind channels is, that you publish changes from the server to the client.

For example, I change a blog-post and people on dev.to get notified that there was an update to that post.

While socket.io lets you publish events from the clients, that go over your server logic to other clients.

Thread Thread
 
zmarkan profile image
Zan Markan • Edited

While that's true for Public channels (the simplest use-case) - the Channels API supports client events too - using either Private or Presence channels.

pusher.com/docs/client_api_guide/c...

The tl;dr; version is:

  • You need to have some authorization logic implemented - so you know which user is which, and then you can trigger events from users.
  • You also need to enable them in the dashboard - it's under the App Settings tab
  • That's where the rate limiting (10 messages per user per second) comes into effect - as clients could generate a LOT of events very quickly
Thread Thread
 
kayis profile image
K

But can I control the client events on my server somehow?

For example, if I want to create a game, I need pipe the client events through some server side logic.

Thread Thread
 
zmarkan profile image
Zan Markan • Edited

You could do that using WebHooks, they allow you to capture all client events on the server - pusher.com/docs/webhooks#client_ev...

Alternatively you could create an API through which the clients would communicate, and the server would broadcast the events.
It really depends on your particular use-case, what kind of events will your clients be creating, and what makes the most sense for it.

Webhooks wouldn't for instance allow you to block client events, only observe them.

Thread Thread
 
vezyank profile image
Slava

How easy would it be to move from socket.io to pusher and vice-versa?

Thread Thread
 
zmarkan profile image
Zan Markan • Edited

As the core concepts of subscriptions, channels, and events are quite similar, it should be a fairly quick migration - but of course it all depends on your concrete project and implementation.

Thread Thread
 
kayis profile image
K • Edited

Is there a way to close user connections on the server?

Thread Thread
 
zmarkan profile image
Zan Markan

I'll double check but I don't think so.

You could send a message to a particular user that you wish to disconnect and handle that clientside.

What is your use-case for this?

Thread Thread
 
kayis profile image
K

I want to use presence channels for games. When a game is finished, the users should be removed from the channel.

Thread Thread
 
zmarkan profile image
Zan Markan

Ah yeah - just send a message that tells the clients to unsub from the channel, that should be the best way.

I've asked the team working on Channels and we don't support terminating connections from the server.

Thread Thread
 
kayis profile image
K

Well, guess for this contest it should be enough, thank you.

Collapse
 
midblue profile image
Jasper Stephenson

I'm curious to compare the two, also!

Collapse
 
zmarkan profile image
Zan Markan

Hey, I've answered it above: dev.to/zmarkan/comment/37jf

Collapse
 
yechielk profile image
Yechiel Kalmenson

Oooohhh, now to come up with an idea... 🤔

Collapse
 
jess profile image
Jess Lee

The hardest part 😉

Collapse
 
jordanosterberg profile image
Jordan Osterberg

Seems quite interesting. I'll definitely be submitting something!

Collapse
 
jess profile image
Jess Lee

🎉🎉🎉🎉🎉

Collapse
 
ben profile image
Ben Halpern

Awesome

Collapse
 
_shahroznawaz profile image
Shahroz Nawaz

I recently developed a small chat app for playing purpose:

Tools Used:

  1. Pusher
  2. Onesignal
  3. Toastr

This is basically a chat ap you can use random names and chat with people textually. Also, you will get toast/push notifications :D

Demo link: phpstack-71265-406587.cloudwaysapp...

You need to subscribe on the red icon on right side :D

Collapse
 
erikthered profile image
Erik Nelson

Is this contest individual or are we allowed to work in teams? My brother has been wanting to get into doing more development stuff so I thought this might be a good opportunity to work with him on something.

Collapse
 
jess profile image
Jess Lee

Hey Erik! You can absolutely work on teams but you'll have to share the prizing. Once you're ready, you can email me at jess@dev.to and I can include your brother as a co-author on your submission :)

Collapse
 
beard_corsini profile image
Andrew Corsini

Super excited for this! I just came up with an idea I want to implement, so this contest will be great at helping me drive this project. And this will be my first programming contest! Can't wait to see all the awesome submissions!

Collapse
 
jess profile image
Jess Lee

Whoo!!! 👏👏👏👏

Collapse
 
edet profile image
Abednego Edet • Edited

Started

Work

in Progress

Work In Progress
Collapse
 
zmarkan profile image
Zan Markan

Awesome! Eager to see what build! :)

Collapse
 
itmayziii profile image
Tommy May III

Alright after a couple days of thought, I’m thinking I’m doing a server monitoring app that reports real time memory, cpu, etc... usage etc... maybe integrate with digital ocean APIs to change the servers from the UI.

I’m thinking all JavaScript. Node JS and react on the front end( I don’t know react but it’s a good way to learn) and RxJS to show the data real time.

If anyone wants to pair on this, respond soon before I’m too far in development.