loading...
Cover image for First Ever DEV Contest: Build a Realtime App with Pusher
The DEV Team

First Ever DEV Contest: Build a Realtime App with Pusher

jess profile image Jess Lee (she/her) Updated on ・2 min read

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!

The DEV Team

The team behind this very platform. 😄

Discussion

markdown guide
 

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 😄

 

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?

 

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.

 

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

 

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.

 

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!

 

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

 

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

 

Is the application state strongly consistent?

 
 

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
 

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

 

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.

 

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

 
 
 

How is pusher better than socket.io ?

 

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 :)

 

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.

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

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.

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.

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

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.

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

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?

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

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.

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

 
 

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

 

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

 

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 😁 .

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.

 
 

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

 
 
 

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

 
 

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.

 

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 :)

 

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!

 
 
 
 

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

 

I've used Pusher once for my recent college project so I kind of know how it works😃. Now to come up with an awesome idea 🙌.

Just to be sure, we can make web apps too, or is it limited to mobile apps?

 

Absolutely, all types of apps are equally welcome 📱💻⌚️🕹👾

 

That's so cool! I've really got to come up with a good way to show the greatness of Pusher☺️

Yaaay! 🚀Looking fwd to see what you build!

 

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.

 

Fun!! :) Now if only I could think of something unique. Give me a few days.

 
 

$250 at the DEV.to shop, that's enough to buy every item on sale (if you combine it with the 25% off sustaining members get)... 😉

 

Would definitely recommend the ol' one-of-each purchasing strategy! 😎🦄

 
 

I want to believe that this is not restricted to any geographical zone

 

Of course - everyone is welcome!

(Unless you're in space 👩‍🚀👨‍🚀🚀🛰, last time I checked it was difficult to ship rewards up there. You'd need to land first).

 

Question: if I plan on writing several posts to document the progress on my project, should I tag every post with pushercontest, or only the submitting entry?

 

I would think so. You could link to the progress posts in the final submitting entry?

But maybe this is one for the DEV.to team to answer - they know the platform best.

 

Hey @avalander ! Go ahead and tag every post with pushercontest!

 
 

Can't wait to submit something! Working on this now!

 

So.. Where are the projects and where are the results? Who won? I'm really interested in seeing what came of this but I'm in the dark here.

 
 

I'm probably not going to enter multiple apps, but would that theoretically be allowed?

 

It's 100% allowed, it's not a school exam 😉

 

Can we improve the app even if we've submitted the entry. Would the new version be judged?

 

Yep! We'll be reviewing submissions starting May 25 so you have up until then :)

 

any React developers in the house...My app just doesn't seem to be working(only the pusher integration part).