DEV Community

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!

Discussion (79)

pic
Editor guide
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
carloslfu profile image
Carlos Galarza

Challenge accepted ;)

Collapse
ben profile image
Ben Halpern

Good luck!

Collapse
jess profile image
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
rhymes profile image
Collapse
knyzorg profile image
Slava Knyazev

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
knyzorg profile image
Slava Knyazev

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
mehraas profile image
Ashish Mehra

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

Collapse
jess profile image
Jess Lee (she/her) Author

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
theplantbaseddeveloper profile image
Stefanni Brasil

Oh my god, this is amazing!!

Collapse
ben profile image
Collapse
jordanosterberg profile image
Jordan Osterberg

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

Collapse
ben profile image
Collapse
jess profile image
Jess Lee (she/her) Author

🎉🎉🎉🎉🎉

Collapse
yechielk profile image
Yechiel Kalmenson

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

Collapse
jess profile image
Jess Lee (she/her) Author

The hardest part 😉

Collapse
asapabedi 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

Really excited for this!

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 (she/her) Author

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
_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
generalboomstick 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 (she/her) Author

Whoo!!! 👏👏👏👏

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.

Collapse
napoleon039 profile image
Nihar Raote

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?

Collapse
zmarkan profile image
Zan Markan

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

Collapse
napoleon039 profile image
Nihar Raote

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

Thread Thread
zmarkan profile image
Zan Markan

Yaaay! 🚀Looking fwd to see what you build!

Collapse
yechielk profile image
Yechiel Kalmenson

$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)... 😉

Collapse
peter profile image
Peter Kim Frank

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

Collapse
yechielk profile image
Yechiel Kalmenson

Unicorn included?

Collapse
deannaswallow profile image
Deanna Swallow

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

Collapse
ben profile image
Ben Halpern

Yay! Look out for the idea thread 😄

Collapse
deannaswallow profile image
Deanna Swallow

I'm there! Let's do this!

Thread Thread
jess profile image
Collapse
rebirthtobi profile image
Tobi

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

Collapse
zmarkan profile image
Zan Markan • Edited

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

Collapse
avalander profile image
Avalander

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?

Collapse
jess profile image
Jess Lee (she/her) Author

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

Collapse
avalander profile image
Avalander

Thanks! :)

Collapse
zmarkan profile image
Zan Markan

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.

Collapse
felixking profile image
Levitikon

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.

Collapse
jess profile image
Collapse
_bigblind profile image
Frederik 👨‍💻➡️🌐 Creemers • Edited

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

Collapse
zmarkan profile image
Zan Markan

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

Collapse
nektro profile image
Meghan (she/her)

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

Collapse
himanshuc3 profile image
Himanshu

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

Collapse
jess profile image
Jess Lee (she/her) Author

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

Collapse
himanshuc3 profile image
Himanshu

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