Using React (Next.js), Redux Toolkit, Vitest: Fetch top 5 stories from REST API on the homepage. Modal links to external sources, comments, and job postings. Browse more on other pages.
MIT License
Users can view 8 recent stories of each category, top, show, and job on the home page, and then can browse additional stories on subsequent pages. Each story block can be clicked to view its link and comments.
The user should be able to:
Load More Stories
at the bottom of the pageLoad More Comments
button at the bottom, allowing users to view additional comments if availablegit clone [email protected]:victoriacheng15/hacker-news-next.git
cd hacker-news-next
# or your preference for the package manager
pnpm install
pnpm dev
Redux ToolKit
CreateAsyncThunk
is a method for managing data retrieval from an API and returning payloads containing information on data, loading status, and errors. By using extraReducer
from createSlice
, it can handle the output based on the results of the retrieval process. This process is similar to a switch case where, if the retrieval process is successful, the payload will contain information from the API, the loading status will indicate success, and there will be no errors.
In addition, you can use the reducers
feature of createSlice
to handle actions. In this particular case, I utilized reducers
to manage state changes related to the loading status and limit for loading more stories.
Chakra UI
Before using the Chakra UI component library, I didn't have experience with component libraries or similar tools. However, I learned that Chakra UI can significantly speed up the component-building process by providing pre-built components that have a consistent UI, accessibility considerations, and customizable options like color schemes and layouts. Furthermore, the library's as
props feature allows developers to render components as specific HTML elements, adding to its versatility.