A modern React-based news aggregator application built with TypeScript, Redux, and SASS. Browse the latest news articles from around the world with support for multiple countries and themes.
- 📰 Real-time news feed from NewsAPI
- 🌍 Multi-country support (US, UK)
- 🎨 Light/Dark theme support
- 🌐 Internationalization (i18next)
- 📱 Responsive design
- ⚡ Built with TypeScript for type safety
- 🧪 Component testing with Jest & React Testing Library
- 📚 Component documentation with Storybook
- 💾 Redis caching for improved performance (30-minute TTL)
- Frontend: React 18, TypeScript
- State Management: Redux with Redux Thunk
- Routing: React Router v6
- Styling: SASS with theme system
- HTTP Client: Axios
- Testing: Jest, React Testing Library
- Build Tool: Vite
- Documentation: Storybook
- Backend: Express.js proxy server
- Caching: Redis with 30-minute TTL
- Node.js 22 LTS (required)
- npm or yarn
- NewsAPI key from newsapi.org
-
Clone the repository
git clone <repository-url> cd news-feed
-
Install dependencies
npm install --legacy-peer-deps
Note: Use
--legacy-peer-depsto resolve TypeScript version conflicts -
Environment setup
Create a
.envfile in the project root:SASS_PATH=./node_modules;./src HTTPS=true PORT=8443 REACT_APP_API_KEY=your_newsapi_key_here
-
Start development server
npm start
Open https://localhost:8443 in your browser.
| Command | Description |
|---|---|
npm start |
Start development server on port 8443 with HTTPS |
npm run build |
Create production build |
npm test |
Run tests in watch mode |
npm run test:coverage |
Generate test coverage report |
npm run lint |
Run ESLint with caching |
npm run lint-fix |
Auto-fix linting issues |
npm run storybook |
Start Storybook on port 6006 |
npm run build-storybook |
Build Storybook for deployment |
The application supports both light and dark themes. Currently, theme switching is manual:
- Open
public/index.html - Change the body class:
- Light theme:
<body class="theme-light"> - Dark theme:
<body class="theme-dark">
- Light theme:
🔧 TODO: Implement dynamic theme switching in the UI
The app fetches news from NewsAPI.org. Due to CORS restrictions in development:
- Development: Uses CORS proxy (
cors-anywhere.citadel.red) - Production: Direct API calls
- Authentication: API key automatically added to requests
- Country Support: Automatically filters news by selected country
- 🇺🇸 United States (
US) - 🇬🇧 United Kingdom (
GB)
The application includes a Redis-based caching system to improve performance and reduce API calls:
- Cache Duration: 30 minutes TTL
- Cache Strategy: GET requests are cached based on endpoint and parameters
- Performance: Cache hits are 10-50x faster than API calls
- Fallback: Graceful degradation if Redis is unavailable
# View cache statistics
curl http://localhost:3001/cache/stats
# Clear cache
curl -X DELETE http://localhost:3001/cache/clear
# Test caching functionality
npm run proxy:test-cacheFor detailed caching documentation, see CACHING.md.
- Redux Store: Centralized state management
- Reducers:
newsPreviewReducer: Article data and loading statesnewsCountrySourceReducer: Country selection and localization
src/
├── components/ # Reusable UI components
├── pages/ # Route-level components
├── services/ # API, actions, reducers
├── style/ # SASS themes and variables
└── i18n/ # Internationalization files
Run the full test suite:
npm testGenerate coverage report:
npm run test:coverageRun specific test:
npm test -- --testNamePattern="ComponentName"Start Storybook to view component documentation:
npm run storybookBuild Storybook for deployment:
npm run build-storybook-
Build the application
npm run build
-
Deploy the
buildfolder to your hosting service -
Environment variables: Ensure
REACT_APP_API_KEYis set in production
- SASS deprecation warnings are expected (legacy API usage)
- CORS proxy required in development for NewsAPI
- Non-strict mode for easier migration (
"strict": false) - Supports both
.tsand.tsxfiles - Type definitions included for all major dependencies
This project is licensed under the MIT License.
- Fork the repository
- Create your feature branch (
git checkout -b feature/amazing-feature) - Commit your changes (
git commit -m 'Add some amazing feature') - Push to the branch (
git push origin feature/amazing-feature) - Open a Pull Request
Built with ❤️ using React and TypeScript