NewsPlayz

NewsPlayz is a React + Vite news aggregator built as a project for CodeWithMSami.

It displays top headlines from NewsAPI with category navigation, infinite scrolling, and a top loading progress bar.

Features

• React 19 + Vite
• Bootstrap 5 UI
• React Router v7 routing
• Infinite scroll news feed
• Top loading bar indicator
• NewsAPI integration via .env

Setup

1. Install dependencies:

   npm install

2. Create a .env file in the project root.
3. Add your NewsAPI key:

   VITE_NEWS_API_KEY=your_api_key_here

4. Start the development server:

   npm run dev

Usage

• Open http://localhost:5173
• Use the navigation links to switch between categories
• Scroll down to load more articles automatically

Build

npm run build

Preview production build

npm run preview

Notes

• Make sure the API key is prefixed with VITE_ because Vite exposes environment variables through import.meta.env.
• If the key is missing, the app displays a message prompting for the key.

About

This repository is maintained as a CodeWithMSami project and demonstrates a small news app built with modern React tooling.