React News App

Website: https://node-zli78122.appspot.com
Video (Web): https://www.youtube.com/watch?v=IowBaIi6fjE&t=94s
Video (Mobile): https://www.youtube.com/watch?v=QawrK4MdvMQ&t=1s

Introduction

• Used a combination of ES6, React-Bootstrap, React.js, pubsub.js on client side and Node.js, Express.js on server side to develop a news application based on Responsive Web Design, which can adapt to PC and mobile devices. The application is deployed to Google Cloud.
• Created multiple code-reusable components, like comment, notification, news card, and built scalable server-side RESTful APIs.
• Implemented real-time update of news data fetched from Guardian News API and New York Times API using Axios.
• Developed auto-completion when searching by keyword using Azure Bing Autosuggest API and throttled function calls to reduce server load.
• Utilized HTML5 localStorage as web cache to support adding articles to and removing articles from bookmark.

Tech Stacks

Client: HTML, CSS, React
Server: Node.js
Cloud: GCP
RWD(Responsive Web Design): React-Bootstrap
AJAX, JSON

React:

• React-Bootstrap
• React-Router
• React-Select
• React-Switch
• React-Share
• React-Icons
• React-Responsive
• React-Toast
• React-Tooltip
• React-Spinners

API:

• Guardian News API
• New York Times API
• Microsoft Azure Bing Autosuggest API

Axios
pubsub.js
Media Queries
HTML5 localStorage
Node.js
Express.js

Functionalities

• search by section
• search by keyword & Auto Suggestion
• bookmark
• article source switch between Guardian News and New York Times
• share article to Facebook, Twitter, and Email
• article details
• comment
• adapt to both PC and mobile