added Breaking news app (Avdhesh-Varshney#681)

* added Breaking news app

* Update README.md

* Update README.md

* updated the file Readme.md

* added the required changes

* add README

* added all changes

Next-JS-Projects/Advanced/Breaking-News-App/.eslintrc.json

@@ -0,0 +1,3 @@
+{
+  "extends": "next/core-web-vitals"
+}

Next-JS-Projects/Advanced/Breaking-News-App/README.md

@@ -0,0 +1,72 @@
+<h1 align='center'><b>💥 Breaking News  💥</b></h1>
+
+<!-- -------------------------------------------------------------------------------------------------------------- -->
+
+<h3 align='center'>Tech Stack Used 🎮</h3>
+<!-- enlist all the technologies used to create this project from them (Remove comment using 'ctrl+z' or 'command+z') -->
+
+<div align='center'>
+
+  ![HTML5](https://img.shields.io/badge/html5-%23E34F26.svg?style=for-the-badge&logo=html5&logoColor=white)
+  ![CSS3](https://img.shields.io/badge/css3-%231572B6.svg?style=for-the-badge&logo=css3&logoColor=white)
+  ![JavaScript](https://img.shields.io/badge/javascript-%23323330.svg?style=for-the-badge&logo=javascript&logoColor=%23F7DF1E)
+  ![Nextjs](https://img.shields.io/badge/Nextjs-%2320232a.svg?style=for-the-badge&logo=react&logoColor=%2361DAFB)
+</div>
+
+
+![Line](https://github.com/Avdhesh-Varshney/WebMasterLog/assets/114330097/4b78510f-a941-45f8-a9d5-80ed0705e847)
+
+<!-- -------------------------------------------------------------------------------------------------------------- -->
+
+## :zap: Description 📃
+
+<div>
+  <!-- <p>Add Description of the project</p> -->
+    <p>
+    A news app is a mobile or web application designed to provide users with up-to-date news and information from various sources. The app aggregates news articles, videos, and other content, presenting it in an organized and easily accessible format.   
+</p>
+</div>
+</div>
+
+
+<!-- -------------------------------------------------------------------------------------------------------------- -->
+
+## :zap: How to run it? 🕹️
+
+<!-- Add steps how to run this project -->
+Steps to run this website in your local machine is as follows :
+1. Fork this repository
+2. Save the code on your local machine you can also clone the repository
+3. Open terminal
+4. Run following commands in the terminal :
+5. npm install
+6. npm run dev
+7. Browse the website by hitting `localhost:3000` on a web browser.
+8. Make sure you have installed node js before entering these code in the terminal
+
+
+<!-- -------------------------------------------------------------------------------------------------------------- -->
+
+## :zap: Screenshots 📸
+<!-- add the screenshot of the project (Mandatory) -->
+
+<img src='./screenshot.webp'>
+
+
+![Line](https://github.com/Avdhesh-Varshney/WebMasterLog/assets/114330097/4b78510f-a941-45f8-a9d5-80ed0705e847)
+
+<!-- -------------------------------------------------------------------------------------------------------------- -->
+
+<h4 align='center'>Developed By <b><i>Maheshwari Love</i></b> 👦</h4>
+<p align='center'>
+  <a href='https://www.linkedin.com/in/maheshwari-love/'>
+    <img src='https://img.shields.io/badge/linkedin-%230077B5.svg?style=for-the-badge&logo=linkedin&logoColor=white' />
+  </a>
+  <a href='https://github.com/Maheshwari-Love/'>
+    <img src='https://img.shields.io/badge/github-%23121011.svg?style=for-the-badge&logo=github&logoColor=white' />
+  </a>
+</p>
+
+<h4 align='center'>Happy Coding 🧑‍💻</h4>
+
+<h3 align="center">Show some &nbsp;❤️&nbsp; by &nbsp;🌟&nbsp; this repository!</h3>

Next-JS-Projects/Advanced/Breaking-News-App/components/NavBar.tsx

@@ -0,0 +1,47 @@
+import Link from "next/link";
+import { Navbar, Container, Nav, NavDropdown } from "react-bootstrap";
+
+const NavBar = () => {
+	return (
+		<Navbar bg="dark" variant="dark" sticky="top" expand="sm" collapseOnSelect>
+			<Container>
+				<Navbar.Toggle aria-controls="main-navbar" />
+				<Navbar.Collapse id="main-navbar">
+					<Nav>
+						<Nav.Link href="/" as={Link}>
+							Breaking
+						</Nav.Link>
+						<Nav.Link href="/search" as={Link}>
+							Search
+						</Nav.Link>
+						<NavDropdown title={"Categories"} id="categories-dropdown">
+							<NavDropdown.Item as={Link} href="/categories/business">
+								Business
+							</NavDropdown.Item>
+							<NavDropdown.Item as={Link} href="/categories/entertainment">
+								Entertainment
+							</NavDropdown.Item>
+							<NavDropdown.Item as={Link} href="/categories/general">
+								General
+							</NavDropdown.Item>
+							<NavDropdown.Item as={Link} href="/categories/health">
+								Health
+							</NavDropdown.Item>
+							<NavDropdown.Item as={Link} href="/categories/science">
+								Science
+							</NavDropdown.Item>
+							<NavDropdown.Item as={Link} href="/categories/sports">
+								Sports
+							</NavDropdown.Item>
+							<NavDropdown.Item as={Link} href="/categories/technology">
+								Technology
+							</NavDropdown.Item>
+						</NavDropdown>
+					</Nav>
+				</Navbar.Collapse>
+			</Container>
+		</Navbar>
+	);
+};
+
+export default NavBar;

Next-JS-Projects/Advanced/Breaking-News-App/components/NewsArticleEntry.tsx

@@ -0,0 +1,37 @@
+import placeholderImage from "@/assets/images/newsarticle_placeholder.jpg";
+import { Card } from "react-bootstrap";
+import Image from "next/image";
+import styles from "@/styles/NewsArticleEntry.module.css";
+
+type NewsArticleEntryProps = {
+	article: INewsArticle;
+};
+const NewsArticleEntry = ({
+	article: { title, description, author, url, urlToImage },
+}: NewsArticleEntryProps) => {
+	const validImageUrl =
+		urlToImage?.startsWith("http://") || urlToImage?.startsWith("https://")
+			? urlToImage
+			: undefined;
+
+	return (
+		<a href={url} target="__blank">
+			<Card className="h-100">
+				{/* <Card.Img src={validImageUrl} variant="top" /> */}
+				<Image
+					className={`card-img-top ${styles.image}`}
+					src={validImageUrl || placeholderImage}
+					width={400}
+					height={100}
+					alt="News article image"
+				/>
+				<Card.Body>
+					<Card.Title>{title}</Card.Title>
+					<Card.Text>{description}</Card.Text>
+				</Card.Body>
+			</Card>
+		</a>
+	);
+};
+
+export default NewsArticleEntry;

Next-JS-Projects/Advanced/Breaking-News-App/components/NewsArticlesGrid.tsx

@@ -0,0 +1,19 @@
+import { Col, Row } from "react-bootstrap";
+import NewsArticleEntry from "./NewsArticleEntry";
+
+type NewsArticlesGridProps = {
+	articles: INewsArticle[];
+};
+const NewsArticlesGrid = ({ articles }: NewsArticlesGridProps) => {
+	return (
+		<Row xs={1} sm={2} xl={3} className="g-4">
+			{articles.map((article) => (
+				<Col key={article.url}>
+					<NewsArticleEntry article={article} />
+				</Col>
+			))}
+		</Row>
+	);
+};
+
+export default NewsArticlesGrid;

Next-JS-Projects/Advanced/Breaking-News-App/models/NewsArticles.d.ts

@@ -0,0 +1,15 @@
+interface INewsArticlesResponse {
+    status: string,
+    totalResults: number,
+    articles: INewsArticle[]
+}
+
+interface INewsArticle {
+    author: string,
+    title: string,
+    description: string,
+    url: string,
+    urlToImage?: string,
+    publishedAt: string,
+    content: string,
+}

Next-JS-Projects/Advanced/Breaking-News-App/next.config.js

@@ -0,0 +1,19 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  reactStrictMode: true,
+  images: {
+    domains: ["www.si.com", "fashionista.com"],
+    remotePatterns: [
+      {
+        protocol: "https",
+        hostname: '**'
+      },
+      {
+        protocol: "http",
+        hostname: '**'
+      },
+    ]
+  }
+}
+
+module.exports = nextConfig

Next-JS-Projects/Advanced/Breaking-News-App/package.json

@@ -0,0 +1,25 @@
+{
+  "name": "news-website",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "lint": "next lint"
+  },
+  "dependencies": {
+    "@types/node": "18.15.11",
+    "@types/react": "18.0.33",
+    "@types/react-dom": "18.0.11",
+    "bootstrap": "^5.2.3",
+    "eslint": "8.37.0",
+    "eslint-config-next": "13.3.0",
+    "next": "13.3.0",
+    "nextjs-progressbar": "^0.0.16",
+    "react": "18.2.0",
+    "react-bootstrap": "^2.7.2",
+    "react-dom": "18.2.0",
+    "typescript": "5.0.3"
+  }
+}

Next-JS-Projects/Advanced/Breaking-News-App/pages/404.tsx

@@ -0,0 +1,10 @@
+const NotFoundPage = () => {
+	return (
+		<div>
+			<h1>Not Found</h1>
+			<p>Looks like this page is not exists</p>
+		</div>
+	);
+};
+
+export default NotFoundPage;

Next-JS-Projects/Advanced/Breaking-News-App/pages/500.tsx

@@ -0,0 +1,13 @@
+const ErrorPage = () => {
+	return (
+		<div>
+			<h1>Error 😵</h1>
+			<p>
+				Looks like something went wrong. Please refresh the page or contact
+				support.
+			</p>
+		</div>
+	);
+};
+
+export default ErrorPage;

Next-JS-Projects/Advanced/Breaking-News-App/pages/_app.tsx

@@ -0,0 +1,34 @@
+import "bootstrap/dist/css/bootstrap.min.css";
+import "@/styles/globals.css";
+import styles from "@/styles/app.module.css";
+import Head from "next/head";
+import NextNProgress from "nextjs-progressbar";
+import type { AppProps } from "next/app";
+import { Inter } from "next/font/google";
+import { Container } from "react-bootstrap";
+import NavBar from "@/components/NavBar";
+const inter = Inter({ subsets: ["latin"] });
+
+export default function App({ Component, pageProps }: AppProps) {
+	return (
+		<>
+			<div className={inter.className}>
+				<Head>
+					<title key={"title"}>Nextjs News App</title>
+					<meta
+						name="description"
+						content="Nextjs news application"
+						key={"description"}
+					/>
+					<meta name="viewport" content="width=device-width, initial-scale=1" />
+					<link rel="icon" href="/favicon.ico" />
+				</Head>
+				<NextNProgress />
+				<NavBar />
+				<Container className={styles.pageContainer}>
+					<Component {...pageProps} />
+				</Container>
+			</div>
+		</>
+	);
+}

Next-JS-Projects/Advanced/Breaking-News-App/pages/_document.tsx

@@ -0,0 +1,13 @@
+import { Html, Head, Main, NextScript } from 'next/document'
+
+export default function Document() {
+  return (
+    <Html lang="en">
+      <Head />
+      <body>
+        <Main />
+        <NextScript />
+      </body>
+    </Html>
+  )
+}

Next-JS-Projects/Advanced/Breaking-News-App/pages/api/search-news.ts

@@ -0,0 +1,24 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import type { NextApiRequest, NextApiResponse } from 'next'
+
+type ErrRes = {
+  error: any
+}
+
+export default async function handler(
+  req: NextApiRequest,
+  res: NextApiResponse<INewsArticle[] | ErrRes>
+) {
+  const searchQuery = req.query.q?.toString();
+
+  if (!searchQuery) {
+    return res.status(400).json({ error: "Please provide a search query" })
+  }
+  try {
+    const response = await fetch(`https://newsapi.org/v2/everything?q=${searchQuery}&apiKey=${process.env.NEWS_API_KEY}`)
+    const newsResponse: INewsArticlesResponse = await response.json()
+    res.status(200).json(newsResponse.articles)
+  } catch (error) {
+    res.status(400).json({ error: error })
+  }
+}