is this space themed enough?

PROJECT 2 README

• Project Planning
  • Overview
  • Wireframes
  • MVP
    • Goals
    • Libraries
    • Data
    • Component Hierarchy
    • Component Breakdown
    • Component Estimates
    • Helper Functions
  • Post-MVP
• Project Delivery
  • Code Showcase
  • Code Issues & Resolutions

Project Planning

Overview

Click here for live site

UPDATE It turns out that the News API I used for this no longer allows the free developer plan to make API calls from the browser. Therefore, the live site no longer works. At this time, as I do not plan to monetize this project, I can't afford a paid plan. If you would like to demo this, please clone the repository to your local machine, as requests from localhost should still work.

News Reader is an app that will let people search for news. It will allow people to look up any search terms and return relevant articles. It can return articles only from the US or it can return articles from all around the world. It will pull data from the News API.

Wireframes

Click "Details" to expand and view image.

MVP

The News Reader will be responsive, utilize React Router, and pull data from the News API. It will display news headlines and some content from news articles (as allowed by the API's free tier), based on a user's search input.

Goals

• Working React App
• Utilize React Router
• 6+ Components
• Organized File Structure
• Utilize Axios
• Utilize Grid and/or Flexbox
• Desktop, Tablet, and Mobile views
• Basic CSS Styles
• Incorporate light/dark theme toggle
• Remove excess files and code
• Remove console.logs
• 5+ Storybook Components
• Display news article details based on search term
• Handle errors if user's search term is blank
• Link back to original article source
• Credit the API with a link, as required for usage (has been added to the bottom of the settings page)

Libraries

Library	Description
React Router	To create multiple "pages" accessed via different URLs.
Axios	To pull data from the API.
Storybook	To design components.
Sass	To help make the CSS more DRY.

Data

API	Quality Docs?	Website	Sample Query
News API	yes	https://newsapi.org	https://newsapi.org/v2/everything?q=nintendo&apiKey=06c96a58f8e3440fb062458011a729da

Component Hierarchy

src
|__ App/
      |__ index.js
      |__ App.scss
|__ Header/
      |__ index.js
      |__ Header.scss
|__ SiteTitle/
      |__ index.js
      |__ SiteTitle.scss
|__ SearchBar/
      |__ index.js
      |__ SearchBar.scss
|__ Page/
      |__ index.js
      |__ Page.scss
|__ NewsCard/
      |__ index.js
      |__ NewsCard.scss
|__ NewsBody/
      |__ index.js
      |__ NewsBody.scss
|__ NewsImage/
      |__ index.js
      |__ NewsImage.scss
|__ SettingsPage/
      |__ index.js
      |__ SettingsPage.scss
|__ Setting/
      |__ index.js
      |__ Setting.scss
|__ Button/
      |__ index.js
      |__ Button.scss

Component Breakdown

Component	Type	state	props	Description
App	functional	y	y	The file in which everything will stem from.
Header	functional	n	y	Will be the header area of the page, including app title and search bar.
SiteTitle	functional	n	n	Will be the title of the site itself. Will be rendered inside the header.
SearchBar	functional	n	y	The search bar. Will be rendered inside the header.
Page	functional	n	y	Essentially the main content container.
NewsCard	functional	n	y	Will contain the contents of a given news article, including title, author, and source.
NewsBody	functional	n	y	Will contain the article's description and/or contents preview.
NewsImage	functional	n	y	Will display the image for the article, if any.
SettingsPage	functional	n	y	The page for settings.
Setting	functional	n	y	An individual setting.
Button	functional	n	y	A reusable button.

Component Estimates

Task	Priority	Estimated Time	Time Invested	Actual Time
Create files for each component	H	1h 15m	20m	20m
Set up React Router	H	3 hrs	20m	20m
Define general app structure	H	2 hrs	45m	45m
Connect to API	H	2 hrs	10m	10m
Hook up search bar	H	4 hrs	50m	50m
Pass search query results to other components	H	4 hrs	55m	55m
Handle empty search queries	H	2 hrs	1h	1h
Settings page settings	H	4 hrs	1 h 10m	1h 10m
Design in storybook	H	2 hrs	50m	50m
General CSS	L	2 hrs	3h	3h
Mobile CSS	M	2 hrs	15m	2h
Tablet CSS	M	3 hrs	20m	20m
Desktop CSS	M	3 hrs	45m	45m
Clean up code	M	2 hrs	10m	10m
General Troubleshooting Time Allotment	H	4 hrs	1h 30m hrs	1h 30m
TOTAL		40 hrs	12h 20m	12h 20m

Post-MVP

• Allow choosing any region's content.
• Font size toggles/options
• Display full article (requires paid API though)
• Put light/dark theme toggle in local storage

---

Project Delivery

Code Showcase

  //if the api call has happened after a search is executed, display page component with data passed to it
  const showPage = () => {
    if (data && !data.totalResults) {
      return (
        <p>No News Found.</p>
      )
    } else if (data) {
      return (
        <Page
          data={data}
          showImages={showImages}
        />
      )
    }
  }

Changelog

• Updated location of link back to API in MVP