This project was bootstrapped with Create React App.
The subject is to make a tiny app that retrieves all existing article from The New York Times, using their API. It should be a SPA made with React, and meet the following requirements:
Find all articles containing a keyword entered by the user.
Each article should show up to 30 characters of text, remainder should be displayed as ...more
Click the link to go to the original page.
Enable a bookmark feature on the articles you load.
10 article per page, and you should be able to load the next 10 when clicking the Load more button.
Display the image of the article
- Hook
- Typescript
- Redux
- Reddux Middleware
- Responsive Design
After cloning the project, run:
Runs the app in the development mode.
Open http://localhost:3000 to view it in the browser.
The page will reload if you make edits.
You will also see any lint errors in the console.
As there was no specifications for the UI behavior regarding the listing, but only for the 30 char limit of Article body, I decided to show the title of the article (given freely from API) and show the Article substract with 30 char limit on the details page.
This is something that could easily be adjusted to match UI specifications.
I wanted to try something different from a table, and given the huge amounts of hits some keywords return, I thought a virtualized table was a good idea.
react-window was exactly what I was thinking about.
In hindsight, although I learned a lot from that experience, I probably would have had less trouble overall using a Table.
- Option 1
- Option 2
- Option 3
Given my recent experience, I decided to try and make it in React Typescript, with Hooks and functional components.
Although I am familiar with the concept, I lack hands-on experience with Redux, so I used React Context instead (which I used in my latest professional mission).
I made minimal responsive adjustments to the design as well.