Newsman

A number one destination for latest, up-to-the-minute and historic news :newspaper: currated from over 75,000 trusted worldwide sources :information_source:.

Newsman is built with vue, vuetify and lots love :heart: :sparkling_heart:, and deployed on netlify.

Because of our believe in being progressive, we believe ths is just a work in progress :construction:. But, feel free to explore :ringed_planet: Newsman, thank you friend.

Explore the docs »

View Demo · Report Bug · Request Feature

Table of contents

• Project Title

• Table of contents

• Getting started

• Prerequisites

• Project structure

• Project setup

  • Install all packages, plugins and dependencies
  • Compiles and hot-reloads for development
  • Compiles and minifies for production
  • Run your unit tests
  • Lints and fixes files
  • Customize configuration
  • How to use / About the App

• Built with

• Some ignored / pended features

• Authors

• License

• Contributing

• Acknowledgments

(Back to top)

Project structure

The following is a description of the folders in this project, and how they are used. Our Application Stack is Vuetify (HTML5 with WAI-ARIA), CSS3 and VueJS (Javascript).

Application Source HTML, CSS & Javascript Files:

• public: Application Static Assets

  • index.html: Application entry wrapper

• src: Main application resources

  • assets: Application assets like font, images and styles

  • fonts: Application fonts

  • images: Application images

  • styles: Application styles

  • components: Application reusable components files

  • plugins: Application plugins

  • router: Application routes defination

  • store: Application state management folder (for vuex)

  • modules: Application submodules for state management

  • utils: Application utility folder

  • services: Application api connection and helpers folder

  • views: Application entry point for our routes

  • layout: Application repeated components on major pages

  • pages: Application other destinations (excluding home)

  • main.js: Main vue application entry file

Development Content - used to automate development & testing:

• tests: Application test

  • unit: Application unit testing folder
  • setupTests.js: Application test setup bootstrapped file

• .env: Application environment variables

• .env.production: Application production environment variables

• eslintrc.js: Eslint configuration for the app which includes airbnb linting / style guide settings

• .gitignore: Application ignored files for commits

• babel.config.js: Babel configuration for the app

• package.json: Package file for Node that gets used during npm install

• README.md: Developer Instructions

Third Party Content ( !.gitignored ):

• node_modules: Third Party Libraries installed via package.json during npm install

(Back to top)

Getting Started

These instructions will get you a copy of the project up and running on your local machine for development and testing purposes.

(Back to top)

Prerequisites

The things you will need in order to use the app and how to install them

• Before you begin, ensure you have the latest node installed on your computer - Node.js 14.16.1 was used for this

Check with:

# ensure Node.js is >= 14.16.1
vue --version

• Also ensure you have the latest vue cli installed - Vue CLI 3.O was used for this

Check with:

# ensure Vue CLI is >= 3.0
vue --version

(Back to top)

Project setup

This will walk you through how to setup the app on your local computer and/or machine.

Install all packages, plugins and dependencies

npm install

Compiles and hot-reloads for development

npm run serve

Compiles and minifies for production

npm run build

Run your unit tests

npm run test:unit

Lints and fixes files

npm run lint

Customize configuration

See Configuration Reference.

How to use / About the App

The home screen shows the available top headlines at the moment. Presently, the default is Nigeria and news source can be selected from the "news source" button on the home screen. A news or article can be searched while on the home screen using any combination of keywords. It is a web app and requires internet to operate. Arguably, the app only needs internet to start, if the user will not use more than the fetched news on initial load.

Screenshots

(Back to top)

Built with

• Vue 2 - The progressive javasript framework used

• Material Design - The design pattern used, with the help of vuetifyjs which included material colors and material icons that was used

• External libraries used in this project includes:

  • NewsAPI - A simple, easy-to-use REST API to search over 75,000 worldwide sources for current and historic news articles published.
  • Day.js - A fast 2kB javascript date utility library
  • Vue Router - The official router for Vue.js
  • Vuex - A state management pattern + library for Vue.js applications
  • vue-meta - A HTML Metadata manager for Vue.js
  • Airbnb JavaScript Style Guide - A HTML Metadata manager for Vue.js
  • Jest - A JavaScript testing framework

(Back to top)

Some ignored / pended features

• [ ] Data optimization was ignored as the app loads all data required on initial load thereby making it overhead cost of usage relatively costly for a user.
• [ ] Country selection is not available neither is geolocation detection present.
• [ ] Local storage implementation for history. Current app session manages the storage instead.
• [ ] AI or Smart suggestion of "also read". Currently, it is based on the API default sorting of "publishedAt".
• [ ] Refresh of "selected news pages"
• [ ] Delay to simulate the loading of the "selected news pages".
• [ ] Delay to simulate the fetching of datas in all sections after first loading.
• [ ] Full app testing and test coverage

Authors

• Mubarak SULAYMAN - @mubaraksulayman

See also the list of contributors who participated in this project.

(Back to top)

License

This project is licensed under the MIT License.

(Back to top)

Contributing

Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.

Please make sure to update tests as appropriate.

(Back to top)

Acknowledgments

• Inspiration was drawn from jb-engine / challenges on github

(Back to top)