News Bee
News Bee is a React-based news aggregator web app that delivers the latest headlines and in-depth stories from around the world. It fetches news from The Guardian Open Platform API and features category-wise browsing, infinite scroll, and a responsive UI.
News Bee

Project Overview

News Bee is a modern news aggregator built with React and Bootstrap 5. It fetches articles from The Guardian API, allowing users to browse news by category with infinite scrolling and a responsive interface.

Goals

  • Deliver up-to-date news headlines and stories from around the world.
  • Provide category-wise browsing for focused news consumption.
  • Ensure a seamless and responsive user experience across devices.
  • Integrate with The Guardian Open Platform API for reliable news data.

Key Features

  • Category-wise News
    Browse news by categories such as World, Business, Science, Sports, Technology, Environment, Culture, Politics, and Fashion.
  • Infinite Scroll
    Seamless infinite scrolling for news feeds using react-infinite-scroll-component.
  • Responsive UI
    Modern, responsive interface built with Bootstrap 5.
  • Top Loading Bar
    Visual feedback for loading progress using react-top-loading-bar.
  • Routing
    Client-side routing with react-router-dom for smooth navigation.
  • About Page
    Learn more about News Bee and its mission.
  • Loading Spinner
    Custom loading indicator for better UX.
  • API Integration
    Fetches news from The Guardian API, with category-based endpoints.
  • Environment Variables
    API key managed securely via .env.local.

Live Demo & Preview

Currently Not Available.

Technologies Used

HTML
CSS
Bootstrap
JavaScript

Architecture & Workflow

Architecture Diagram

Built with simple JavaScript and Bootstrap 5, using functional components. News data is fetched from The Guardian API and managed via component state. Routing is handled with react-router-dom. No backend required.

Additional Screenshots

Currently Not Available.

Planned Enhancements

  • Upcoming Features
    • Search by Query: Ability to search news articles by keywords.
    • Country Selection: Option to filter news by country.
    • Language Selection: Option to filter news by language.
    • User Preferences: Save favorite categories and articles.
    • Improved Accessibility: Enhance ARIA support and keyboard navigation.