/Loopa-News

Realtime social news app developed from scratch with Phoenix, Vue and Vuex

Primary LanguageJavaScriptMIT LicenseMIT

Loopa News - Yet Another URL Sharing App ⚡

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.

Features

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

Demo available here.

Demo GIF

Setup

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.

License

MIT