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.serveror$ 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 thebuild/build.jsscript and will copy the produced files to thepriv/static/js/andpriv/static/css/directories)
To deploy this application on Heroku:
- Follow this guide in the Phoenix website.