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

Chat / Discussions
, ,
1

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.

Demo

You can play with the demo here.

17 Likes
2

How did you make the animated demo ??

1 Like
3

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?

1 Like
4

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

1 Like
5

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

1 Like
6

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

3 Likes
7

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

2 Likes
8

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

2 Likes
9

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:

3 Likes
10

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

1 Like