A modern, fully responsive React news application powered by NewsData.io, supporting 20 languages, 13+ categories, and 15 countries with a sleek dark/light theme toggle.
- 🌐 20 Languages — English, Hindi, Arabic, French, German, Spanish, Chinese, Japanese, Korean, Russian, and more
- 🔁 RTL Support — Layout automatically flips to right-to-left for Arabic, Urdu, and other RTL languages
- 📂 13+ Categories — Top Stories, Business, Technology, Science, Health, Sports, Entertainment, Politics, Environment, Food, Travel, World
- 🌎 Country Filter — Filter news by 15 countries including US, UK, India, Germany, Japan, China, Brazil, and more
- ⚡ Breaking News Toggle — Switch between the archive (
/news) and latest breaking (/latest) endpoints - 🔖 Saved Articles — Bookmark stories to a personal reading list, persisted in
localStorage - 🧠 Sentiment & AI Tags — Sentiment chips and AI tag / keyword chips powered by NewsData.io's enrichment fields (paid plans)
- 🔍 Live Search — Debounced full-text search across all articles
- ♾️ Infinite Pagination — Load more stories using NewsData.io's pagination tokens
- 🌙 Dark / Light Theme — Persisted via
localStorage - 📱 Fully Responsive — Mobile, tablet, and desktop layouts
- ⚡ Skeleton Loading — Smooth skeleton placeholders while fetching
- 🛡️ Error Handling — Graceful error states with retry options
cd multilang-news-appnpm installGet your free API key from newsdata.io/register, then:
cp .env.example .envEdit .env:
REACT_APP_NEWSDATA_API_KEY=your_actual_api_key_here
⚠️ Never commit your.envfile. It's already in.gitignore.
npm startOpen http://localhost:3000 to view the app.
This app uses the NewsData.io REST API.
| Parameter | Description |
|---|---|
language |
ISO 639-1 language code (e.g. en, hi) |
category |
News category (e.g. technology, sports) |
country |
ISO 3166-1 alpha-2 country code (e.g. us) |
q |
Full-text search query |
page |
Pagination token from previous response |
- ✅ 200 requests/day
- ✅ Up to 10 articles per request
- ✅ Access to latest news endpoint
npm run buildThe optimized build will be in the build/ directory, ready to deploy on Vercel, Netlify, or any static host.
npm install -g vercel
vercelSet the environment variable REACT_APP_NEWSDATA_API_KEY in your Vercel project settings.
All colors, spacing, typography, and animations are driven by CSS custom properties defined in src/index.css:
:root {
--bg-primary: #080b14;
--accent-primary: #3b82f6;
--font-display: 'Syne', sans-serif;
--font-body: 'DM Sans', sans-serif;
/* ... */
}Switching data-theme="light" on <html> automatically remaps all variables.
| Technology | Usage |
|---|---|
| React 18 | UI framework |
| React Router v6 | Client-side routing |
| Axios | HTTP requests |
| date-fns | Human-readable timestamps |
| NewsData.io API | News data source |
| CSS Custom Props | Design system / theming |
| Google Fonts | Syne + DM Sans typography |
MIT — feel free to use, fork, and build on this project.
- News data by NewsData.io
- Typography: Syne & DM Sans via Google Fonts