Andela24
is a React Powered News Feed App.- It has the following features;
- Login via Google
- Allows users to select news sources
- Allows users to sort news article based on the sorting parameter available
- Sorting can either be by - * Top * Latest * Popular
- Allows users to save favorite news
- Allows users to share interesting news on social media
- A demo of the app can be access on heroku via here
- The following depencies are required by the app during developmment
- Babel-register - This framework helps to compile from es6 to es5
- css-loader - The css-loader is used with webpack and it interprets @import and url() like import/require()
- enzyme - Enzyme is used together with mocha, chai and expect.js to test this application
- eslint - This is a javascript syntax highlighter used to highligh syntax error 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 highligh errors
- extract-text-webpack-plugin - It's used to move all the css imported into the application into a separate file.
- file-loader - It enables the app to load files directly into scripts
- jsdom, jsdom-global, mocha-jsdom, mock-local-storage - Used to emulate web browser during application testing
- node-sass, sass-loader - This enables the app to use sass (.scss) directly in scripts
- nyc - Used with mocha for test coverage report
- sinon - Used with mocha and enzyme for mocking React components during test
- url-loader - It enables the app to use background images in the scss files
- webpack-dev-middleware - Serves files to server during development
- webpack-hot-middleware - It enables the browser to reload automatically when changes are made to the app
- axios - Used to make GET requests to external API's
- babel-cli - It enables the app scripts to be tested with babel from the command line
- babel-core - It compiles es6 used in the app to es5
- babel-eslint - Used with ESlint to lint syntax errors
- babel-loader - Used with Webpack to transpile javascript codes
- babel-plugin-react-html-attrs - It help convert JSX
class
attribute intoclassName
- coveralls - Display test coverage
- express - Used as the web server for this application
- extract-text-webpack-plugin - Moves the app's css into a separate file
- flux - It enables the app to implement the flux architecture
- history - Allows the app to implement history in routes.
- json-loader - Enables the app to inport json files.
- lodash - Used to perform filter on objects
- node-localstorage - Used to mock localStorage during testing
- react - It enables the app to use the React architecture
- react - Used with react-dom enables the app to use the React architecture
- react-google-login - Enables authentication with Google
- react-router-dom - Used to perform app routing
- webpack - Used to bundle the app's js and scss files for usage in the browser
- webpack-dev-server - Serves as the server during development
- Materialize CSS - All part of the app was styled with this css framework.
- Material Icons - Iconic font provided by Google.
- Navigate to a directory of choice on
terminal
. - Clone this repository on that directory.
- Using SSH;
>`git clone git@github.com:Boluwatifes/andela24.git`
- Using HTTP;
>`git clone https://github.com/Boluwatifes/andela24.git`
- Navigate to the repo's folder on your computer
cd andela24/
- Install the app's dependencied
npm install
- Run the app
npm start
- The tests have been written using Mocha and Enzyme.
- They are run using the
coverage
tool in order to generate test coverage reports. - To run the tests, navigate to the project's root folder
- Run the following commands.
npm test