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 
- Realtime notifications & alerts
- Comments with Markdown support
- Edit comments with Markdown preview
- Pagination & many more…
 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.
How did you make the animated demo ??
He linked to site: https://loopa-news.herokuapp.com/
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!
Thanks a lot for the app. We were rewriting a (side) project that uses Phoenix channel with Vue, and I was struggling with how to integrate the socket object with Vuex, which seemed to result in a total mess and impenetrable bugs. Elixir code is so much easier to organize than JS… Your approach of 1. separating the socket module and 2. storing the socket as a private variable instead of part of the state in the Vuex store makes a ton of sense and simplifies the logic so much. I’m gonna try out the same approach