{"id":29554714,"url":"https://github.com/rohittcodes/dumb-news","last_synced_at":"2025-07-18T07:33:12.415Z","repository":{"id":301460784,"uuid":"1006860125","full_name":"rohittcodes/dumb-news","owner":"rohittcodes","description":null,"archived":false,"fork":false,"pushed_at":"2025-06-23T05:30:38.000Z","size":54,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-07-04T21:07:13.910Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/rohittcodes.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2025-06-23T05:29:35.000Z","updated_at":"2025-06-23T05:30:42.000Z","dependencies_parsed_at":"2025-06-27T02:07:54.467Z","dependency_job_id":"3b041b9a-dfe3-41d0-adc5-ef9dda7b22e7","html_url":"https://github.com/rohittcodes/dumb-news","commit_stats":null,"previous_names":["rohittcodes/dumb-news"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/rohittcodes/dumb-news","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rohittcodes%2Fdumb-news","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rohittcodes%2Fdumb-news/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rohittcodes%2Fdumb-news/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rohittcodes%2Fdumb-news/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/rohittcodes","download_url":"https://codeload.github.com/rohittcodes/dumb-news/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rohittcodes%2Fdumb-news/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":265720592,"owners_count":23817267,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2025-07-18T07:31:34.184Z","updated_at":"2025-07-18T07:33:12.402Z","avatar_url":"https://github.com/rohittcodes.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# 📰 NewsStream - React News Application\n\nA responsive and dynamic single-page news application built with React.js, featuring live news headlines, category navigation, search functionality, and theme switching.\n\n![NewsStream App](https://via.placeholder.com/800x400/0066cc/ffffff?text=NewsStream+App)\n\n## ✨ Features\n\n### Core Functionality\n- 🏠 **Home Page** - Latest news headlines with featured stories\n- 📂 **Category Navigation** - Browse news by Technology, Sports, Business, Health, Entertainment, Science\n- 🔍 **Search Functionality** - Find news articles by keywords\n- 📖 **Article Modal** - View full articles in responsive modals\n- 📝 **Feedback Form** - User feedback collection with validation\n- 🌙 **Dark/Light Theme** - Toggle between themes with persistence\n\n### Technical Features\n- 📱 **Responsive Design** - Mobile-first approach using Bootstrap Grid\n- ⚡ **Real-time News** - Live news updates from NewsAPI\n- 🚀 **React Router** - Smooth navigation between pages\n- 🎨 **Modern UI** - Clean, professional design with animations\n- ♿ **Accessibility** - WCAG compliant with proper ARIA labels\n- 🔄 **Error Handling** - Graceful fallbacks and error states\n\n## 🛠️ Technology Stack\n\n### Frontend\n- **React.js 19** - Modern functional components with hooks\n- **React Router Dom** - Client-side routing\n- **Bootstrap 5** - Responsive CSS framework\n- **React Bootstrap** - Bootstrap components for React\n- **Axios** - HTTP client for API requests\n\n### Tools \u0026 Build\n- **Vite** - Fast build tool and dev server\n- **ESLint** - Code linting and formatting\n- **PostCSS** - CSS processing\n\n### API\n- **NewsAPI.org** - Live news data source\n\n## 📋 Requirements Met\n\n### HTML5 Elements\n- ✅ Semantic HTML structure\n- ✅ Forms with validation (feedback form)\n- ✅ Lists for news display\n- ✅ Hyperlinks to external articles\n- ✅ Meta tags for SEO\n\n### CSS3 Features\n- ✅ External stylesheets\n- ✅ CSS Grid and Flexbox\n- ✅ Custom properties (CSS variables)\n- ✅ Animations and transitions\n- ✅ Media queries for responsiveness\n- ✅ Pseudo-classes and selectors\n- ✅ Box shadows and effects\n\n### Bootstrap Components\n- ✅ Grid system for layout\n- ✅ Navigation components\n- ✅ Cards for news display\n- ✅ Modals for article viewing\n- ✅ Forms and form validation\n- ✅ Buttons and badges\n- ✅ Typography utilities\n- ✅ Responsive utilities\n\n### React.js Features\n- ✅ JSX syntax\n- ✅ Functional components\n- ✅ Class-based components (where appropriate)\n- ✅ Props for data passing\n- ✅ State management with useState\n- ✅ Effect hooks (useEffect)\n- ✅ Custom hooks (useFetchNews)\n- ✅ Context API (ThemeContext)\n- ✅ Event handling\n- ✅ Form validation\n- ✅ Controlled components\n- ✅ Router navigation\n\n## 🚀 Getting Started\n\n### Prerequisites\n- Node.js (v18 or higher)\n- npm or yarn package manager\n- NewsAPI key (free at [newsapi.org](https://newsapi.org/register))\n\n### Installation\n\n1. **Clone the repository**\n   ```bash\n   git clone \u003crepository-url\u003e\n   cd newsstream-app\n   ```\n\n2. **Install dependencies**\n   ```bash\n   npm install\n   ```\n\n3. **Set up environment variables**\n   ```bash\n   # Create .env file in root directory\n   VITE_NEWS_API_KEY=your_actual_api_key_here\n   ```\n\n4. **Start development server**\n   ```bash\n   npm run dev\n   ```\n\n5. **Open your browser**\n   Navigate to `http://localhost:5173`\n\n### Build for Production\n\n```bash\n# Build the application\nnpm run build\n\n# Preview the build\nnpm run preview\n```\n\n## 🎨 Design Features\n\n### Responsive Design\n- Mobile-first approach\n- Breakpoint optimizations\n- Touch-friendly interface\n- Flexible grid layouts\n\n### User Experience\n- Smooth animations and transitions\n- Loading states and error handling\n- Intuitive navigation\n- Search with suggestions\n- Theme persistence\n\n### Accessibility\n- Keyboard navigation support\n- Screen reader compatibility\n- High contrast ratios\n- Focus indicators\n- ARIA labels and roles\n\n## 🔧 Configuration\n\n### API Setup\n1. Sign up at [NewsAPI.org](https://newsapi.org/register)\n2. Get your free API key\n3. Add key to `.env` file:\n   ```\n   VITE_NEWS_API_KEY=your_api_key_here\n   ```\n\n### Theme Customization\nModify CSS variables in `src/App.css`:\n```css\n:root {\n  --primary-color: #0d6efd;\n  --secondary-color: #6c757d;\n  /* Add your custom colors */\n}\n```\n\n### News Categories\nEdit categories in `src/components/CategoryNav.js` and `src/pages/CategoryPage.js`\n\n## 📱 Browser Support\n\n- Chrome (latest)\n- Firefox (latest)\n- Safari (latest)\n- Edge (latest)\n- Mobile browsers (iOS Safari, Chrome Mobile)\n\n## 🤝 Contributing\n\n1. Fork the repository\n2. Create a feature branch\n3. Make your changes\n4. Add tests if applicable\n5. Submit a pull request\n\n## 📄 License\n\nThis project is licensed under the MIT License - see the LICENSE file for details.\n\n## 🙏 Acknowledgments\n\n- [NewsAPI.org](https://newsapi.org/) for providing news data\n- [React](https://reactjs.org/) for the amazing framework\n- [Bootstrap](https://getbootstrap.com/) for responsive design\n- [Vite](https://vitejs.dev/) for fast development experience\n\n## 🐛 Known Issues\n\n- API rate limits may apply with free NewsAPI key\n- Some news sources may have CORS restrictions\n- Images may fail to load from external sources\n\n## 🔮 Future Enhancements\n\n- [ ] Bookmark favorite articles\n- [ ] User authentication\n- [ ] Push notifications\n- [ ] Offline reading support\n- [ ] Social media sharing\n- [ ] Article comments system\n- [ ] Advanced search filters\n- [ ] Multiple language support\n\n---\n\n**Made with ❤️ for news enthusiasts**+ Vite\n\nThis template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.\n\nCurrently, two official plugins are available:\n\n- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react) uses [Babel](https://babeljs.io/) for Fast Refresh\n- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh\n\n## Expanding the ESLint configuration\n\nIf you are developing a production application, we recommend using TypeScript with type-aware lint rules enabled. Check out the [TS template](https://github.com/vitejs/vite/tree/main/packages/create-vite/template-react-ts) for information on how to integrate TypeScript and [`typescript-eslint`](https://typescript-eslint.io) in your project.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frohittcodes%2Fdumb-news","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Frohittcodes%2Fdumb-news","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frohittcodes%2Fdumb-news/lists"}