Projects

NewsBite — Curated News

2024·2 min read

Next.js
TypeScript
Tailwind CSS
GitHub

NewsBite is a cutting-edge news aggregation application that provides users with a seamless and personalized news browsing experience. Built with React, TypeScript, and leveraging the power of modern web technologies, NewsBite offers a rich set of features designed to keep users informed and engaged.

NewsBite is a cutting-edge news aggregation application that provides users with a seamless and personalized news browsing experience. Built with React, TypeScript, and leveraging the power of modern web technologies, NewsBite offers a rich set of features designed to keep users informed and engaged.

🌟 Features

1. Multi-Source News Integration

  • Aggregates news from multiple reputable sources, including The New York Times API.
  • Unified article format for consistent presentation across different sources.

2. Advanced Filtering System

  • Category Filter: Browse news by specific categories (e.g., technology, politics, sports).
  • Date Range Selection: Filter articles within a custom date range.
  • Keyword Search: Find articles containing specific keywords or phrases.
  • Source Filter: Focus on news from particular sources.
  • Author Filter: Discover articles by specific journalists or authors.

3. Responsive and Accessible Design

  • Fully responsive layout that adapts to various screen sizes and devices.
  • Implements accessibility best practices for an inclusive user experience.

4. Dark Mode Support

  • Toggle between light and dark themes for comfortable reading in any environment.

5. Real-Time Updates

  • Utilizes React Query for efficient data fetching and caching.
  • Automatic refetching to ensure the latest news is always available.

6. Rich Article Cards

  • Visually appealing article cards with images, titles, abstracts, and metadata.
  • Quick access to full articles via external links.

7. Performance Optimized

  • Implements lazy loading and code splitting for faster initial load times.
  • Efficient state management using Zustand for a smooth user experience.

8. Error Handling and Loading States

  • Graceful error handling with user-friendly error messages.
  • Skeleton loading states for a polished loading experience.

9. Customizable User Preferences

  • Persistent filters and settings using local storage.

10. Mobile-First Navigation

  • Intuitive mobile navigation with a responsive header and mobile menu.

11. Internationalization Ready

  • Structure in place to easily add multi-language support.

📰 News APIs Used

NewsBite integrates with three powerful news APIs to provide a diverse and comprehensive news feed:

  1. The New York Times API: Offers access to high-quality journalism and breaking news from one of the world's leading news organizations.

    • NYT API Documentation

  2. The Guardian API: Provides a wide range of news articles from The Guardian and The Observer, known for their investigative journalism and international coverage.

    • The Guardian API Documentation

  3. News API: Aggregates headlines from over 80,000 sources worldwide, offering a broad spectrum of news content.

    • News API Documentation

🛠️ Technologies Used

  • React
  • TypeScript
  • Vite
  • Tailwind CSS
  • React Query
  • Zustand
  • Axios
  • React Router
  • Shadcn UI
  • Docker