This project is a Next.js-based news application that utilizes the News API to fetch news articles based on user-defined keywords and from popular news sources such as CNN. It incorporates technologies like Axios for making HTTP requests, Tailwind CSS for styling, and React useState hook for managing state.
- Search Functionality: Users can search for news articles based on specific keywords.
- Popular News Sources: Articles are fetched from well-known news sources like CNN.
- React Components: The project is built using React components, making it modular and easy to maintain.
- HTTP Requests: Axios is used to make HTTP requests to the News API for fetching news data.
- Styling with Tailwind CSS: Tailwind CSS is utilized for styling the UI, providing a sleek and modern design.
- Hosting: The project is hosted on Vercel.
- Next.js
- React
- Axios
- Tailwind CSS
- useState, useEffect hook
- Clone the repository:
git clone https://github.com/your-username/news-app.git- Navigate into the project directory:
cd news-app- Install dependencies:
npm install- Start the development server:
npm run dev- Open your browser and visit
http://localhost:3000to view the app.
- News API: For providing access to news articles.
- Next.js: For building a powerful and efficient React application.
- Tailwind CSS: For styling the application in a responsive and modern way.
- Axios: For making HTTP requests to fetch data from external APIs.
This project doesnt work as Newsapi doesnt allow PUBLIC API calls for free only local. I have hosted it to show the UI.
This is a Next.js project bootstrapped with create-next-app.
First, run the development server:
npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun devOpen http://localhost:3000 with your browser to see the result.
You can start editing the page by modifying pages/index.js. The page auto-updates as you edit the file.
API routes can be accessed on http://localhost:3000/api/hello. This endpoint can be edited in pages/api/hello.js.
The pages/api directory is mapped to /api/*. Files in this directory are treated as API routes instead of React pages.
This project uses next/font to automatically optimize and load Inter, a custom Google Font.
To learn more about Next.js, take a look at the following resources:
- Next.js Documentation - learn about Next.js features and API.
- Learn Next.js - an interactive Next.js tutorial.
You can check out the Next.js GitHub repository - your feedback and contributions are welcome!
The easiest way to deploy your Next.js app is to use the Vercel Platform from the creators of Next.js.
Check out our Next.js deployment documentation for more details.
Here is the screenshots of the website when the API is working
Main website (landing page)
WHen we select Top US Headlines
When we select CNN News
When we use the search Bar ( Ex. Tesla news)
