TOP NEWS WORLDWIDE

Installation instructions

Clone the repo with:

git clone https://github.com/fac-17/PFAK-week5.git

Install all dependencies with:

npm install

The project requires you to have a file .env in main directory, containing the API key. Our team will provide you with tha content of that file on request. Alternativel, you can get your own API key and add a .env file to the root folder with:

DB_APIKEYNEWS=your_own_APIkey

Once you have all dependencies and the API key, you can run the server with:

npm start

Third-party resources

News API: https://newsapi.org/

User Journey

Our user is a traveller or language learner wants to find out the trending headlines in a country of interest. The app returns the top three headlines for the selected country.

The user can use one of the four quick search buttons, or select the country from a drop down menu.

Edge Case

If the user, does not select a country before clicking the search button, an alert message will pop up.

Design and Architecture

• File structure: all client-side files in public folder, all server-side files in src folder

• All client-side JS in index.js

• One front-end API call directed to our server

• One back-end API call directed to external news API

• Design intentions: serious, minimal, high-end

• Mobile first design

• Design Wireframes:

Workflow

Code of Conduct

• code written in ES6
• Always use ===
• Everyone needs to understand each step before moving on
• Listen to other people
• Everyone pairs with everyone
• 20/20/20 rule
• BEM class naming
• mobile first
• instant feedback
• Name branches with feature/... and fix/...
• Stick to pure functions
• Test first!!!
• Don't push to master
• Other pair reviews pull request

Wednesday

All in mob programming/group discussion:

• Set up lint
• Set up Travis
• Test Travis
• Code of coduct
• Time for ideation and research
• Decide on idea
• Write up architecture (mob)
• Discuss and set up file structure
• Create a server

Thursday

• Create a test for router (pair)
• Create a router (pair)
• Create handlers (pair)
  • Create home handler
  • Create css/js/image etc handler
  • Create API call handler
• Create a Request module for API call (pair)
• Set up eventlistener for button click (mob)
• Create a front end call to backend (mob)
• Add callback functions to front end call (mob)
• Create a back-end call to external API (mob)
• Create Callback functions in front end API (pair)
  • filter or reduce results
  • Access information to display
  • Add DOM manipulation to display information
• Set up basic html, cs, script.js (pair)
• Add drop down list for country selection (pair)
• Style articles (pair)

Stretch Goals

• Add alt text to images (> DOM manipulation)
• Change all vars to let
• Test pure functions
• Modularise Code
• Write Readme
• Add continuous integration and code coverage badges to readme
• Use CodeCov to track test coverage
• Create an svg map to select the country

What we struggled with 😠

• Adding the API key

What we learned 😆

• Finally understood how the front-end talks to the back-end
• Network tab in Inspect
• dotenv works better than env2 (we learnt to always look at the weekly downloads - many downloads are a positive sign )