Christian.

The React Times

February 11, 2021

Read stories from the New York Times using Top Stories Technology API

home

www.TheReactTimes.com

Check out the GitHub repo here

To run the program:

  1. gh repo clone christiandavidturner/The-React-Times
  2. cd The-React-Times/frontend/
  3. npm i
  4. yarn start
  5. open browser window and type in http://localhost:3000

Call-out Features (Design & Function):

  • Nested React components (children & grandchildren)
  • Data fetching from API with auth key
  • Responsive Design
  • CSS Grid
  • Animated SVG wave element
  • GIF logo
  • Add setTimeout() to showcase loading animation
  • Navigation that fetches new data based on section
  • Deployed on Netlify
  • Custom domain + configuration
  • Desktop only: button micro-interaction on-hover

Components:

  • Header - Parent component to Masthead and SVG (all 3 compromise Nav).
    └─ Masthead - List of sections
    └─ SVG - Animated SVG wave
  • News - Fetch data from New York Times API and return Stories
    └─ Story - Single story component
               └─ Button - Composable button
  • LoadingBar - Loading animation taken from react-loading
  • Spacer - Flexible spacer by height
  • Footer - Copyright year, email, and website

Challenges:

  • map API data to create children components dynamically
  • responsive design (css grid)
  • optional chaining when fetched data is null (conditional rendering)
  • string interpolation in fetch request to change section -> ${section}.json
  • implementing new useState and useEffect hooks

Future Plans:

  • Add Typescript
  • Add Tailwind CSS
  • Unit Testing with Jest
  • End-to-end testing with Cypress
  • clean up CSS file
  • Refactor Masthead component to use React Router
    • eliminate page reload when clicking new section (on-fetching new data)

Written by Christian Turner
Follow me on Twitter