A fully responsive and accessible news web application built with React.js, Vite, and Tailwind CSS. Features real-time news from NewsAPI, dark/light mode, bookmarks, and personalized preferences.
- 📰 Top Headlines Feed - Latest news from various categories
- 🏷️ Category-based Filtering - Tech, Sports, Health, Business, etc.
- 🔍 Search Functionality - With debounce and real-time suggestions
- 🌓 Dark/Light Mode - Persisted using localStorage
- 📱 Fully Responsive - Mobile-first design
- 📖 Article Detail View - Rich article display with related news
- ⏳ Loading & Error States - Skeleton loaders and error fallbacks
- 🔄 Infinite Scroll - Smooth pagination
- 🔖 Bookmarks System - Save articles for later reading
- ⚙️ User Preferences - Customize categories, layout, and notifications
- 🚀 Code Splitting - Lazy loaded routes and components
- 📊 SEO Optimized - Meta tags and structured data
- 🎨 Custom Theme - Ocean Breeze color palette
- ✨ Hero Section - Typing animation headlines
- 📈 Progress Bar - Route change indicator
- 🎭 Animations - Framer Motion transitions
- 🔔 Notifications - User preference based
- 📥 Data Export - Export bookmarks as Excel
- Frontend: React 19 with Vite
- Styling: Tailwind CSS with custom palette
- Routing: React Router DOM v6
- State Management: Context API + Custom Hooks
- API: NewsAPI.org (with mock fallback)
- Animations: Framer Motion
- Icons: React Icons
- Utilities: date-fns, file-saver, xlsx
src/ ├── features/ # Feature-based components │ ├── news/ # News-related components │ ├── bookmarks/ # Bookmarks feature │ ├── preferences/ # User preferences │ └── common/ # Shared components ├── contexts/ # React Context providers ├── hooks/ # Custom React hooks ├── services/ # API services ├── utils/ # Utility functions ├── layouts/ # Layout components ├── pages/ # Route pages └── App.js # Main application
- Node.js 18+ and npm/yarn/pnpm
- Clone the repository:
git clone <repository-url>
cd news-app