I have developed a responsive React application News Portal using React Bootstrap for the UI and Fetch API for fetching news articles from a public API. The application allows users to filter articles by categories and includes pagination for efficient navigation through articles.
- Article List Display: The homepage displays a list of news articles with titles, images, and summaries. Each article links to a detailed view page.
- Responsive Design: The layout adapts to both desktop and mobile devices using React Bootstrap's responsive grid system and components.
- Category Dropdown: A dropdown menu allows users to filter articles by categories such as Business, Technology, and Entertainment.
- Dynamic Updates: The article list updates dynamically based on the selected category.
- Pagination Controls: Pagination controls are implemented at the bottom of the homepage, allowing users to navigate through different pages of articles.
- Full Article Display: When an article is clicked on the homepage, users are navigated to a detailed view page displaying the full content of the article, including any images.
- Fetching Articles: Articles are fetched from the gNewsAPI using Axios. The application handles loading states and errors during API calls.
- React Hooks and Redux Toolkit: State management is handled using React hooks for component-level state and Redux toolkit for global state management, including user inputs, API responses, and application state.
- Search Feature : A search feature is implemented, allowing users to search for articles by keywords.
- Functional Components and Hooks: The application is built using functional components and React hooks for state management.
- React Bootstrap: React Bootstrap is used for styling and responsive design.
- Axios: Fetch API is used for making API calls to fetch news articles.
- Live Link: The application is hosted on Vercel and can be accessed https://react-news-api-0.vercel.app/.
- Functionality: The application works as described, without bugs.
- Code Quality: The code is clean, well-organized, and properly commented.
- UI/UX Design: The application is user-friendly and visually appealing on both desktop and mobile devices.
- Problem Solving: The solutions implemented for state management, API integration, and responsive design demonstrate good problem-solving skills.
The NeighborGood React News Portal fulfills the project requirements and provides a user-friendly interface for browsing news articles by category with pagination and detailed views. The optional features add value and enhance user experience.
Thank you for reviewing my submission. I look forward to your feedback.
Best regards,
[Amar Gupta]