https://github.com/Angarsk8/Loopa-News

Realtime social news app developed from scratch with Elixir, Phoenix, Vue and Vuex
https://github.com/Angarsk8/Loopa-News

elixir phoenix realtime vue vuex

Last synced: 3 months ago
JSON representation

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

• Host: GitHub
• URL: https://github.com/Angarsk8/Loopa-News
• Owner: Angarsk8
• License: mit
• Created: 2016-12-14T18:20:09.000Z (about 8 years ago)
• Default Branch: master
• Last Pushed: 2017-01-30T06:58:03.000Z (almost 8 years ago)
• Last Synced: 2024-07-31T01:23:29.265Z (5 months ago)
• Topics: elixir, phoenix, realtime, vue, vuex
• Language: JavaScript
• Homepage: https://loopa-news.herokuapp.com
• Size: 44.2 MB
• Stars: 320
• Watchers: 15
• Forks: 31
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

• awesome-vue - Loopa-News - News?style=social) - 开源社会新闻应用 (应用实例)
• open-production-web-projects - Loopa News - Realtime social news app developed from scratch with Elixir, Phoenix, Vue and Vuex (Elixir / Phoenix)
• awesome-github-vue - Loopa-News - 开源社会新闻应用 (应用实例)
• awesome-github-vue - Loopa-News - 开源社会新闻应用 (应用实例)
• awesome - Loopa-News - 开源社会新闻应用 (应用实例)

README

        
# Loopa News - Yet Another URL Sharing App ⚡

**Loopa News** is an open source social news app  (ala [Hacker News](https://news.ycombinator.com)) built from scratch with [Phoenix](http://www.phoenixframework.org/), [Vue](https://vuejs.org/), [Vue Router](https://github.com/vuejs/vue-router) and [Vuex](https://vuex.vuejs.org/en/intro.html). Inspired by [Microscope](https://github.com/DiscoverMeteor/Microscope), a popular tutorial app developed with [Meteor](https://www.meteor.com/).

## 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 [**SPA**](https://en.wikipedia.org/wiki/Single-page_application)s. 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](https://loopa-news.herokuapp.com/).

![Demo GIF](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](http://www.phoenixframework.org/docs/heroku) in the Phoenix website.

## License

[MIT](LICENSE)