This is a refactoring of the nc-news project (https://github.com/taodtu/nc-news-rest-client) with Reack hooks
and Typescript
, coupled with a back-end with serverless Azure functions and No-SQL Cosmos DB.
In order to run this project locally, you need to have an Azure account and then start the backend project from (https://github.com/taodtu/nc-news-azure).
A video demo for this project: https://youtu.be/Tsvn2WAThVE
-
All class components are transformed into
functional component
and all components, functions, hooks are written withtypescript
.Generic
is used to reuse function as much as possible. -
Custome react hooks
useFetch
extract all data fetching logic which greatly simplify the component code and reusable, reduce any component needing data fetching logic up to40
lines, and useunion type
to provide extra type safety. -
Implement
Context
anduseReducer
to mimic aRedux
like global store for comment to handle fetch, add and delete comments, which reduce the commentList component from118
lines to36
lines, and replace the originalRender Props
andHigher Order Component
pattern. -
Implement
useRef
to accessPrepProps
which is not available in currentuseEffect
in order to rest papge to 1 when changing any other viewing options likesort
andorder
. -
All the data manipulations on array and object are ensured
not mutating
the original data by using destructuring and spread operator. In addtional to fullfilling the northcoder project requirement, an UserPage is created for more advanced functionality. -
Maximize
component reuse
, such as the voting button, toggle-button, article list,comment-list, sort-select and handler functions. -
Applying
slot pattern
andContextAPI
to pass the current user value to the bottom tree component, in order to avoid props drilling. -
Implement
optimistic response
for the vote button. -
Page-number style
pagination
implemented. -
React 16 with create-react-app --typescript.
-
Responsive.
-
Styling with @material/ui v4.1.3.
-
Routing with @reach/router v1.1.0.
- git clone https://github.com/taodtu/nc-news-rest-client.git
- cd nc-news-rest-client/nc-news-rest-client.
- npm install.
- npm start.
- visit http://localhost:3000