Create a Real-Time News App with React – Project for College Assignment!

Introduction

Looking for a cool project for your third-year college assignment or final project black book? Welcome to the world of NewsMonkey-React, an innovative real-time news application that puts the latest headlines at your fingertips! Imagine having access to news from around the globe, tailored specifically to your interests. Whether you’re a sports fanatic, a politics buff, or just want to stay updated on global events, NewsMonkey-React has you covered. Get ready to dive into a seamless news-fetching experience!

Project Description

NewsMonkey-React is a dynamic application built with React that allows users to fetch real-time news articles based on their selected country and category. Utilizing the powerful NewsAPI (https://newsapi.org/), this project offers an intuitive interface that enhances user engagement and satisfaction.

Key features of NewsMonkey-React include:

Real-Time News Fetching: Stay updated with the latest news as it happens.
Country and Category Filtering: Customize your news feed by selecting specific countries and categories.
User-Friendly Interface: Enjoy a clean and straightforward layout that makes navigation effortless.
Infinite Scrolling: Experience smooth browsing with infinite scrolling powered by a top-load plugin.
Responsive Design: Access news on any device, ensuring a great experience whether you’re on your phone or desktop.

How It Works

The magic of NewsMonkey-React lies in its interaction with the NewsAPI. When users select their preferred country and category, the application sends a request to the API, retrieving relevant articles in real time. This process involves:

API Request: The application constructs a query string based on user selections and sends a request to the NewsAPI.
Data Retrieval: The API responds with JSON data containing articles that match the criteria.
Display Articles: The application then renders these articles dynamically, allowing users to scroll through an ever-updating feed.

Getting Started

Ready to explore NewsMonkey-React? Follow these simple steps to get started:

Step 1: Cloning the Repository

To get started, you’ll need to clone the NewsMonkey-React repository. Open your terminal and run:

git clone https://github.com/CodeWithHarry/NewsMonkey-React.git

Step 2: Installing Dependencies

Once you have cloned the repository, navigate into the project directory and install the necessary dependencies using npm:

cd NewsMonkey-React
npm install

Step 3: Getting Your API Key

To fetch news articles, you’ll need an API key from NewsAPI.org. Follow these steps:

Go to NewsAPI.org.
Sign up for a free account.
Generate your API key.

Step 4: Setting Up the Environment Variable

Create a .env file in your project root directory and set your API key like this:

REACT_APP_NEWS_API=your_api_key_here

Remember to restart your server after creating this file!

Step 5: Fetch U.S. News Instead of Indian News

To customize the news feed for U.S. news, update the App.js in component:

Inside the src/components/App.js file, locate the line where the country prop is set. Change country="in" to country="us". This updates the default news source to display U.S.-based news.

// Before
 <Route exact path="/"><News setProgress={setProgress} apiKey={apiKey} key="general" pageSize={pageSize} country="in" category="general"/></Route> 

// After
 <Route exact path="/"><News setProgress={setProgress} apiKey={apiKey} key="general" pageSize={pageSize} country="us" category="general"/></Route>

Step 5: Running the App

Now it’s time to start your application! In your terminal, run:

npm start

Troubleshooting Common Errors

Even seasoned developers encounter errors. Here are solutions for common issues:

Error: “ERR_OSSL_EVP_UNSUPPORTED”

This method ensures you don’t have to manually add the fix every time you start the app.

Open package.json in the project’s root directory.
Modify the start script by adding SET NODE_OPTIONS=--openssl-legacy-provider && react-scripts start to fix compatibility issues with Node.js

"scripts": {
  "start": "SET NODE_OPTIONS=--openssl-legacy-provider && react-scripts start",
  ...
}

Error: “Waiting for update signal from WDS…”

This message usually indicates that Webpack Dev Server is waiting for changes in your code. If it persists longer than expected:

Try refreshing your browser.

OpenSSL Error

If you encounter an OpenSSL error during installation or running the app, use this workaround:

set NODE_OPTIONS=--openssl-legacy-provider

Now, start the application with:

npm start

Conclusion

Now that you know how to set up and use NewsMonkey-React, it’s time to dive in! Explore this exciting project, customize it according to your preferences, and stay informed about the news that matters most to you.

We’d love to hear about your journey in building this app! Share your experiences or any challenges you faced in the comments below or reach out via email for feedback.