Loopa News is an open source social news app (ala Hacker News) built from scratch with Phoenix, Vue, Vue Router and Vuex. Inspired by Microscope, a popular tutorial app developed with Meteor.

Loopa News is basically a 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 available here.

To start this application locally:

• Make sure you have installed Elixir, Erlang, Phoenix, Node and PostgreSQL
• Install the Mix dependencies: $ mix deps.get
• Create, migrate and seed the development database: $ mix ecto.setup
• Start the Phoenix Server: $ mix phoenix.server or $ iex -S mix phoenix.server
• Install the NPM packages $ cd client/ && npm install
• Start the Express development server: $ npm run dev

To build the frontend for production:

• In the client directory, run $ npm run build (this will execute the build/build.js script and will copy the produced files to the priv/static/js/ and priv/static/css/ directories)

To deploy this application on Heroku:

• Follow this guide in the Phoenix website.

MIT