Table of Contents
- Fetch top news headlines from multiple news providers.
- You have the ability to filter the headlines with the source and category.
- You can search headlines by keyword with the debounced search input.
- Headlines list is paginated to show 12 news headlines per page.
- There's a watch list to get a list of news headlines you read in the past.
- On each news headline card, there's a
Read Morebutton to go to the detail page of that headline. - There's another button to temporarily update a news headline title in the state management. There's an input validation to check titles with less than 256 characters. (FYI: updated title be reset once that news headline is re-fetched.)
- News details page will be server side rendered and it'll show the full content of the selected news headline.
- Included a button to demonstrate calling erroneous API to show error handling with an error alert.
- React.js
- Next.js
- Typescript
- Chakra UI
- Tailwind CSS
- React Hook Form
- Zod
- Lodash
- Zustand for State Management
- localforage
This is a Next.js project bootstrapped with create-next-app. with the typescript template.
Make sure you have node installed in order to run this application locally.
- upgrade npm to the latest version
npm install npm@latest -g- Clone the repo
git clone https://github.com/sudeshnt/next-news-app- Install node modules using one of the following commands
npm install
yarn- In the project directory, you can run either:
npm run dev
yarn dev- Runs the app in the development mode.
Open http://localhost:3000 to view it in your browser
- Launch the test runner in the interactive watch mode.
npm run test
yarn test- Builds the app for production to the build folder.
npm run build
yarn buildSudesh Nimesha - sudeshnt93@gmail.com