NewsMonkey 🐒 - Your Daily Dose of News

NewsMonkey is a dynamic and modern React-based news application designed to provide users with real-time headlines across various categories like Business, Entertainment, General, Health, Science, Sports, and Technology.

This project was developed as a core part of learning React fundamentals via the CodeWithHarry course. It focuses on mastering Class-Based Components, API integrations, and User Experience enhancements.

---

🚀 Core Features

• Infinite Scrolling: A seamless user experience where news articles load automatically as you scroll down.
• Category Navigation: Dedicated tabs for specific news domains using sleek routing.
• Top Loading Bar: A premium YouTube-style progress bar that indicates data fetching status.
• Responsive Layout: Fully responsive cards and navbar built with Bootstrap.
• Secure API Management: Hide sensitive API keys using .env variables.

---

🎓 Deep Dive: React Concepts Learned

This project serves as a comprehensive study of traditional React development. Below is a breakdown of every major concept implemented:

1. Class-Based Components

While functional components are popular today, mastering Class Components is essential for understanding React's history and internal mechanics.

• Structure: Uses extends Component and a render() method.
• Why?: It provides a clear structure for managing complex states and lifecycle methods in older codebases.

2. The constructor() Method

The constructor is the first method called when a component is initialized.

• Purpose: Used to initialize the local state and bind event handlers.
• Implementation: super(props) is called to inherit functionality from the parent class.

3. State Management

state is a built-in React object used to store data that changes over time.

• Usage: Storing fetched articles, loading status, current page number, and total results.
• Updates: Triggered via this.setState(), which tells React to re-render the UI with the latest data.

4. Component Lifecycle: componentDidMount()

This is a critical lifecycle method that runs after the component is rendered for the first time.

• Use Case: The perfect place for API calls. In NewsMonkey, it triggers the initial news fetch right as the app loads.

5. Passing Props (Properties)

Props are used to pass data from a parent component (like App.js) to child components (like News.js or Newsitem.js).

• Example: Passing pageSize, country, and category as props to customize the news feed dynamically.

6. Asynchronous API Fetching (async/await)

The app interacts with the NewsAPI to get live data.

• Concept: Using async functions to wait for data from the internet without freezing the UI.
• Logic: let data = await fetch(url); followed by let parsedData = await data.json();.

7. React Router (v6/v7)

Enabled seamless navigation between categories without reloading the page.

• Components: BrowserRouter, Routes, and Route.
• Key Prop: Used the key prop in the News component to force a re-mount when switching categories (e.g., from Sports to Science).

8. Environment Variables

Security is paramount. The API key is stored in a .env.local file.

• Access: Accessed via process.env.REACT_APP_NEWS_API.
• Benefit: Prevents sensitive keys from being leaked when the code is pushed to public repositories like GitHub.

---

🛠️ Tech Stack & Dependencies

• Framework: React.js v19
• Styling: Bootstrap 5
• Navigation: React Router Dom
• API: NewsAPI.org
• Infinite Scroll: react-infinite-scroll-component
• Progress bar: react-top-loading-bar

---

📂 Project Architecture

src/
├── components/
│   ├── Loadingbar.js  # Displays the progress bar at the top
│   ├── Navbar.js      # Global navigation with category links
│   ├── News.js        # Logic for paginated news fetching
│   ├── News1.js       # Logic for Infinite Scroll news fetching
│   ├── Newsitem.js    # Individual card design for news articles
│   └── spinner.js     # Loading animation component
├── App.css            # Custom global styling
├── App.js             # Main Router and entry layout
└── index.js           # React DOM rendering

---

⚙️ Installation & Setup

1. Clone the Repo:

   git clone https://github.com/your-username/newsmonkey.git

2. Install Dependencies:

   npm install

3. Configure API Key:

   • Create a .env.local file in the root.
   • Add your NewsAPI key:

     REACT_APP_NEWS_API=your_actual_api_key_here

4. Run the App:

   npm start

---

💡 What's Next?

In the next phase of learning, we aim to:

• Convert these Class components into Functional Components using Hooks (useState, useEffect).
• Implement a Redux store for advanced state management.
• Add a Dark Mode toggle for better readability at night.

---

Developed with ❤️ as part of the CodeWithHarry React Learning Journey. 🚀