Newlet
Developed a responsive news web application using React, Tailwind CSS, and News API to display real-time news articles. Implemented dynamic category-based navigation, a search feature, and mobile-first design for optimal user experience. Integrated React Router for seamless routing and state management with useState and useEffect hooks.
š° React News App
A responsive and modern News Web Application built using React, Vite, and Tailwind CSS. This app fetches real-time news articles based on different categories and search terms using the News API.
š Features
- āļø Built with Vite + React
- šØ Styled using Tailwind CSS
- š Search functionality for news
- šļø Category-wise filtering (e.g., IPL, Finance, Politics)
- š± Fully responsive UI (Mobile, Tablet, Desktop)
- š§ Intuitive Navbar with mobile menu toggle
- ā¬ļø Auto scrolls to top on category change
- š§ Clean and maintainable code structure
š§© Technologies Used
- Vite
- React
- Tailwind CSS
- React Router
- NewsAPI.org (for real news data)
š¦ Project Structure
src/
āāā assets/
āāā components/
ā āāā Card.jsx
ā āāā Navbar.jsx
āāā pages/
ā āāā Home.jsx
ā āāā Category.jsx
ā āāā Search.jsx
āāā App.jsx
āāā main.jsx
āāā index.css
š ļø Getting Started
1. Clone the Repo
git clone https://github.com/your-username/react-news-app.git
cd react-news-app
2. Install Dependencies
npm install
3. Set Up .env File
- Create a .env file at the root and add your News API key:
VITE_NEWS_API_KEY=your_api_key_here
4. Run the App
npm run dev
Open in your browser: http://localhost:5173
