https://github.com/sarpongabasimi/newssummaryapp

The purpose of this application was to learn how to build a frontend application that could grab all the headlines from the Guardian newspaper API and display them on a page.
https://github.com/sarpongabasimi/newssummaryapp

Last synced: 28 days ago
JSON representation

The purpose of this application was to learn how to build a frontend application that could grab all the headlines from the Guardian newspaper API and display them on a page.

• Host: GitHub
• URL: https://github.com/sarpongabasimi/newssummaryapp
• Owner: SarpongAbasimi
• Created: 2019-05-18T19:50:04.000Z (over 5 years ago)
• Default Branch: master
• Last Pushed: 2022-12-12T01:56:19.000Z (about 2 years ago)
• Last Synced: 2023-03-07T22:39:05.873Z (almost 2 years ago)
• Language: JavaScript
• Homepage: https://sarpongabasimi.github.io/NewsSummaryApp/
• Size: 1.77 MB
• Stars: 0
• Watchers: 0
• Forks: 0
• Open Issues: 6
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        


Makers week 7. News Summary challenge.



> To my pair partner for code review.

- First of all, sorry that I am late today. I am coming to Makers from Birmingham.

- Secondly, I did the weekend challenge using ReactJs.

- Lastly, please give me a feedback on my test suite and how readable my codebase is.



User Stories.



- As a busy politician.

- So I know what the big stories of the day are (Done).

- I can click a link to see the original news article (Done).

- I can see a summary of a news article (Done).

- I can see a picture to illustrate each news article when I browse headlines (Done)

- I can read the site comfortably on my phone (In Progress)

- I can see whizzy animations in the app (Done)



How To Use Application.



- ``Fork`` and ``clone`` this repo.

- In terminal cd into ``app``.

- Run ``npm install``.

- To run test type ``npm run cypress``.

- To start server ``npm start``

- Copy and paste this in the browser ``http://localhost:3000/``.

- You might not see anything because the ``API`` key is not in your cloned folder.

- You can visit here **[here](https://open-platform.theguardian.com/access/)**.

- Register to get an ``apiKey``.

- Inside of src create a ``config.js`` file.

- create an object called ``apiKey``.

- Inside this object cteate a key called ``guardian``.

- The value of this key should be ``https://content.guardianapis.com/search?&page-size=30&show-fields=starRating,headline,trailText,thumbnail,short-url&`` plus your ``API key``.

- Finally export the object that you created like so ``export const apiKey``.

- This is what you should see.

![ezgif com-video-to-gif](https://user-images.githubusercontent.com/37377831/57982986-7d4bdf80-7a44-11e9-82ec-0eae37e568da.gif)



Imporovements.



> I think the application currently has all the main features, but there are still lots to be done.

- Currently the app is not fully responsive as I would like it to be.

- This is becasue I can't predict the sizes of the images being provided by the guardian API.

> One would say, why not set the images to a smaller with in using css ?

- The problem is that, some of the images from the guardian API are originally really small, therefore setting the size to a small width would make the smaller images even smaller and that will affect the user experience.

- This is the problem I am currently facing with regards to responsiveness. (Solved)



> I need to use css media query to resize some of the content on the page at certain breakpoints.

- I also need to learn and write a proper unit test for this application.

- Sunday 19th May 2019 (Update)

- The application is now fully responsive after a bit of refactoring and using media quries.

- How it looks like on mobile device now.



> The issues regarding the div overflow was solved my doing this.





Challenges.



- I know I can TDD anything, but I struggled to write atest for this application.

- I was able you use cypress as my testing framework for feature testing, but I did not do any unit testing which is bad.



To Dos.



- Learn how to use jest and enzyme to test react applicaitons.

- Learn how to structure a react application properly.

- Connect react with Expressjs.



What I learnt.



> I am always happy when I learn something new.😁

- I learnt how to build react components the right way.

- I learnt that a react component must only have one job. (SRP)

- I learnt how to user cypress.

- I learnt a lot about react state, props and component childeren.

- I learnt I to use react life cycle hooks and at which stage to featch an API.

> Lets just say , I learnt a lot.



Tech Stack.



- ReactJs.

- Cypress.

- Boostrap4.