Real Time Social News App Built From Scratch with Phoenix, Vue and Vuex

Tags: #<Tag:0x00007f114289d348> #<Tag:0x00007f114289d1b8>


Loopa News is basically an open source realtime URL sharing app that pretends to serve as a mid size example to learn how to build modern reactive SPAs. In this project you will find how to implement important features/services such as:

  • User Accounts (Sign Up, Sign In, Sign Out & Change Password)
  • Authentication with JSON Web Tokens
  • Reactive RESTful APIs [1]
  • Realtime notifications & alerts
  • Comments with Markdown support
  • Edit comments with Markdown preview
  • Pagination & many more…

[1] React to model changes from the controller and broadcast them to all the clients subscribed to a particular Phoenix channel.


You can play with the demo here.

Code Examples Using a Vuex Websocket Bridge Between Phoenix & Vue

How did you make the animated demo ??


He linked to site:

Or do you mean how did he make the screen recording? There is a ton of screen recording software out there, what OS are you on if so?


Meant to say: how was the screen recording generated? I’m on Ubuntu Linux.


I use KDenLive, I use KDE on Ubuntu. RecordMyDesktop is one I hear a lot about but I’ve not used. I also often just use ffmpeg itself straight quite often (especially while doing screencasts, plus it itself can output straight to gif via image converters).


Thanks for those tips. BTW I’ve had good luck recording CLI demos using asciinema.


Hi @AndyL, I recorded the screen, edited the video and exported the project as a .gif with Camtasia for Mac, but as @OvermindDL1 said before, there are plenty of open source softwares to do the same


Cool! I didn’t know about asciinema, thanks for mentioning it!


I set up asciinema to generate the demos with a script (example). Real handy when you want to tweak or upgrade the demo to a new software version.

@angarsk8 - sorry for hijacking your Loopa Thread with this demo stuff. Loopa looks great very nicely done and thanks for sharing! :wink: