/headlines

A news feed app built with React

Primary LanguageJavaScript

license Build Status CircleCI Code Climate Coverage Status Test Coverage

Newslines - One stop source for the latest headlines

Introduction

  • Newslines is a News Feed app written in React.
  • It has the following features:
    • Login via Google
    • Login via GitHub
    • Allow users select news sources
    • Allow users sort news article based on the following sorting options
      • Top
      • Latest
    • Allow users read a news article in-app and from original source
    • Allow users share news article on social media
    • Allow users save news article
  • A live version of the app is deployed on heroku via here

Project Dependencies

Dependencies

  • axios - Used to make HTTP requests to external API's
  • babel-core - It compiles es6 used in the app to es5
  • babel-loader - Used with Webpack to transpile javascript codes
  • babel-preset-airbnb, babel-preset-es2015, babel-preset-react, babel-preset-stage-0 - These packages provide Babel presets for React plugins, es2015 plugins, stage 0 plugins and transforming JavaScript for Airbnb
  • css-loader - The css-loader is used with webpack and it interprets @import and url() like import/require()
  • express - Used as the web server for this application
  • flux - It enables the app to implement the flux architecture
  • firebase - Enables authentication with Google and for saving data to the database
  • moment - Used to format date and time
  • node-sass, sass-loader - This enables the app to use sass (.scss) directly in scripts
  • node-env-file - Parse and load environment files
  • react - It enables the app to use the React architecture
  • react-alert - A simple react alert (toaster style) component
  • react-dom - This package serves as the entry point of the DOM-related rendering paths. It is intended to be paired with the isomorphic React
  • react-router - Used to perform app routing
  • react-share - Provides social media share icons
  • script-loader - A JavaScript loader plugin for webpack
  • style-loader - A CSS style loader plugin for webpack
  • webpack - Used to bundle the app's js and scss files for usage in the browser

Development Dependencies

The following dependencies are required by the app during development

  • babel-eslint - Used with ESLint to lint syntax errors
  • babel-polyfill - Provides Promise support as polyfills in PhantomJS
  • coveralls - Display test coverage
  • enzyme - Enzyme is used together with mocha, chai and expect.js to test this application
  • eslint - This is a javascript syntax highlighter used to highlight syntax errors during the development of this app
  • eslint-config-airbnb, eslint-plugin-import, eslint-plugin-jsx-a11y, eslint-plugin-react - These are ESLint packages containing all of ESLint rules and they are used in this application to define rules and highlight errors
  • karma - Used for running tests
  • karma-chai-plugins - Chai browser plugins set for Karma
  • karma-chrome-launcher - Launcher for Google Chrome, Google Chrome Canary and Google Chromium
  • karma-coverage - Used for reporting test coverage
  • karma-coveralls - Used with Karma for sending test coverage
  • karma-mocha - Adapter for the Mocha testing framework
  • karma-mocha-reporter - Karma reporter plugin with mocha style logging
  • karma-phantomjs-launcher - Launcher for PhantomJS
  • karma-sourcemap-loader - Preprocessor that locates and loads existing source maps
  • karma-webpack - Use webpack to preprocess files in karma
  • mocha - Mocha is a simple, flexible, fun JavaScript test framework for node.js and the browser
  • react-addons-test-utils - This package provides the React TestUtils add-on
  • react-test-renderer - This package provides two React renderers that can be used for testing purposes:
    • Test renderer - Renders React components to pure JavaScript objects without depending on the DOM or a native mobile environment
    • Shallow renderer - Shallow rendering lets you render a component "one level deep" and assert facts about what its render method returns, without worrying about the behavior of child components, which are not instantiated or rendered
  • sinon - Used with mocha and enzyme for mocking React components during test

Front End Dependencies

Installation and setup

  • Navigate to a directory using your favourite terminal.

  • Clone this repository on that directory.

  • Using SSH; $ git clone git@github.com:codejockie/headlines.git

  • Using HTTP; $ git clone https://github.com/codejockie/headlines.git

  • Navigate to the repo's directory

  • $ cd headlines

  • Install the app's dependencies

  • $ npm install

  • Run the app

  • $ npm start

Tests

  • The tests were written using Enzyme, Karma, and Mocha.
  • The test coverage is generated by karma-coverage package
  • To run tests, navigate to the project's root directory
  • Run the following commands.
  • $ npm test

How to contribute

To contribute, fork this repo to your private repository and create a pull request based on the feature you want to add.

Disclaimer

This app and its functions are limited by time constraint and is in no way at its best.

FAQ

  • Can I fork the repo?
    • Feel free
  • Can I contribute to the project?
    • Feel free

License

(The MIT License)

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the 'Software'), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED 'AS IS', WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

Author

John Kennedy - @codejockie