drockparashar / news-app Goto Github PK

News Aggregator is a modern web application that provides users with up-to-date news headlines from around the world. Developed using React, TypeScript, and Next.js, the application offers a clean, responsive interface for viewing news articles.

• Top Headlines: Fetches and displays the latest headlines from NewsAPI, focusing on specific countries or categories.
• Dynamic Categories: View news by category, such as technology, sports, or entertainment.
• Responsive Design: Utilizes Tailwind CSS for a mobile-friendly and visually appealing user experience.
• Type Safety: Leverages TypeScript for static type checking, enhancing code quality and maintainability.
• Server-Side Rendering: Employs Next.js for improved performance and SEO through server-side rendering.
• Easy Deployment: Deployed on Vercel, offering seamless deployment and automatic scaling.

1. Homepage: Displays the latest top headlines for a specified country. Articles include images, titles, descriptions, and publication dates.
2. Category Page: Allows users to view news based on different categories. Utilizes dynamic routing for category selection.

• React: JavaScript library for building user interfaces.
• Next.js: React framework with support for server-side rendering and static site generation.
• TypeScript: Superset of JavaScript that adds static types, improving development efficiency and code reliability.
• Axios: Promise-based HTTP client for API requests.
• Tailwind CSS: Utility-first CSS framework for custom designs.
• Vercel: Platform for deploying front-end projects, with built-in Next.js support.

• Node.js (v12 or higher)
• npm or yarn

1. Clone the repository:

   git clone https://github.com/yourusername/news-aggregator.git
   cd news-aggregator

2. Install dependencies:

   npm install
   # or
   yarn install

3. Create a .env.local file in the root directory and add your NewsAPI key:

   NEXT_PUBLIC_NEWS_API_KEY=your_newsapi_key_here

1. Start the development server:

   npm run dev
   # or
   yarn dev

2. Open your browser and visit:

   http://localhost:3000
   

1. Push your changes to GitHub.

2. Connect your GitHub repository to Vercel and deploy the project.

.
├── components
│   ├── News.tsx
│   ├── Navbar.tsx
│   └── ...
├── pages
│   ├── index.tsx
│   ├── category.tsx
│   └── ...
├── public
│   └── ...
├── styles
│   ├── globals.css
│   └── ...
├── .env.local
├── package.json
├── tsconfig.json
└── ...

• News.tsx: Displays individual news articles.
• Navbar.tsx: Navigation bar component.

• index.tsx: Home page showing top headlines.
• category.tsx: Dynamic page for viewing category-based news.

Here's an example of how articles are fetched:

useEffect(() => {
  const fetchArticles = async () => {
    try {
      const response = await axios.get("https://newsapi.org/v2/top-headlines", {
        params: {
          country: 'in',
          apiKey: process.env.NEXT_PUBLIC_NEWS_API_KEY,
        },
        headers: {
          'Content-Type': 'application/json',
        },
      });

      const articles: Article[] = response.data.articles;
      const filteredArticles = articles.filter(article => article.urlToImage !== null).slice(0, 10);
      setHeadlines(filteredArticles);
    } catch (error) {
      console.error("Error fetching the top headlines:", error);
    }
  };
  fetchArticles();
}, []);

• NEXT_PUBLIC_NEWS_API_KEY: Your NewsAPI key.

1. Fork the repository.

2. Create your feature branch:

   git checkout -b feature/my-new-feature

3. Commit your changes:

   git commit -m 'Add some feature'

4. Push to the branch:

   git push origin feature/my-new-feature

5. Submit a pull request.

This project is licensed under the MIT License. See the LICENSE file for more details.

• Thanks to NewsAPI for providing the news data.
• Thanks to Vercel for providing easy deployment.

This README provides a clear and comprehensive guide to setting up, running, and contributing to the News Aggregator project, with a structured format that is easy to follow on GitHub.