{"id":29245777,"url":"https://github.com/arnobt78/news-world--react","last_synced_at":"2025-07-03T22:38:14.945Z","repository":{"id":302173271,"uuid":"864151334","full_name":"arnobt78/News-World--React","owner":"arnobt78","description":"News App is a React-Vite Random Current World Related Live News project, using GNews API, Axios for the HTTP Client Request, display the News in different Category in Navbar, display the details in a Popup page, Read more as Source Link and deploy on Vercel.","archived":false,"fork":false,"pushed_at":"2025-06-30T23:58:00.000Z","size":7421,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-07-01T00:38:30.565Z","etag":null,"topics":["axios","axios-react","css","global-news-media","gnews","gnews-api","html5","javascript","news-app","react","react-vite","reactjs","vercel-deployment"],"latest_commit_sha":null,"homepage":"https://news-arnob.vercel.app/","language":"CSS","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/arnobt78.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":"2024-09-27T15:32:11.000Z","updated_at":"2025-06-30T23:58:04.000Z","dependencies_parsed_at":"2025-07-01T00:48:38.509Z","dependency_job_id":null,"html_url":"https://github.com/arnobt78/News-World--React","commit_stats":null,"previous_names":["arnobt78/news-world--react"],"tags_count":0,"template":true,"template_full_name":null,"purl":"pkg:github/arnobt78/News-World--React","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/arnobt78%2FNews-World--React","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/arnobt78%2FNews-World--React/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/arnobt78%2FNews-World--React/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/arnobt78%2FNews-World--React/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/arnobt78","download_url":"https://codeload.github.com/arnobt78/News-World--React/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/arnobt78%2FNews-World--React/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":263415911,"owners_count":23463109,"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":["axios","axios-react","css","global-news-media","gnews","gnews-api","html5","javascript","news-app","react","react-vite","reactjs","vercel-deployment"],"created_at":"2025-07-03T22:38:14.099Z","updated_at":"2025-07-03T22:38:14.934Z","avatar_url":"https://github.com/arnobt78.png","language":"CSS","funding_links":[],"categories":[],"sub_categories":[],"readme":"# News Current World - ReactVite Web Application\n\n![Screenshot 2024-09-27 at 17 06 29](https://github.com/user-attachments/assets/41ea5799-d1cc-44b6-bca5-d28787b8f022)\n\n---\n\n## Project Summary\n\nA modern news web application built with React and Vite, providing live, real-time world news powered by the GNews API. Designed for rapid development and learning, this project demonstrates best practices in React, state management, API integration, and frontend tooling. The application features categorized news, a responsive layout, and showcases integration with third-party APIs using Axios.\n\n- **Live-Demo:** https://news-arnob.vercel.app/\n\n---\n\n## Table of Contents\n\n1. [Project Details](#project-details)\n2. [Features](#features)\n3. [Project Structure](#project-structure)\n4. [Technology Stack](#technology-stack)\n5. [Installation \u0026 Setup](#installation--setup)\n6. [API Integration](#api-integration)\n7. [Usage Instructions](#usage-instructions)\n8. [Key Concepts \u0026 Learning Points](#key-concepts--learning-points)\n9. [Example Code Snippets](#example-code-snippets)\n10. [Conclusion](#conclusion)\n\n---\n\n## Project Details\n\n- **Live Demo:** [News-ReactVite Webpage](https://news-arnob.vercel.app/)\n- **Purpose:** Deliver the latest world news in a fast, organized, and visually engaging way.\n- **API Source:** [GNews API](https://gnews.io/docs/v4#authentication)\n- **Frontend:** Built with React \u0026 Vite for blazing fast development and HMR (Hot Module Replacement).\n- **HTTP Requests:** Managed through Axios.\n\n---\n\n## Features\n\n- Live news fetched from GNews API.\n- Categorized news navigation via Navbar (e.g., World, Sports, Technology, etc.).\n- Detailed news view for each article.\n- Responsive design for desktop and mobile.\n- Secure API key management using `.env`.\n- Clean code structure and reusable components.\n- Easily extensible for more features or categories.\n\n---\n\n## Project Structure\n\n```\nNews--ReactVite/\n├── .eslintrc.cjs\n├── .gitignore\n├── README.md\n├── index.html\n├── package.json\n├── package-lock.json\n├── vite.config.js\n└── src/\n    ├── components/\n    │   ├── Navbar.jsx\n    │   ├── NewsList.jsx\n    │   ├── NewsItem.jsx\n    │   └── ...otherComponents\n    ├── App.jsx\n    ├── main.jsx\n    └── assets/\n        └── ...images, styles\n```\n\u003e *Note: The `src` folder contains all source code, while `components` hold reusable UI elements.*\n\n---\n\n## Technology Stack\n\n- **React**: Core UI library.\n- **Vite**: Fast build tool and dev server.\n- **Axios**: For HTTP requests.\n- **JavaScript (ES6+)**\n- **CSS / SCSS**: For styling.\n- **GNews API**: News data provider.\n- **Node.js \u0026 npm**: Dependency and build management.\n- **ESLint**: Linting and code quality.\n- **Vercel**: (optional) for deployment.\n\n---\n\n## Installation \u0026 Setup\n\n1. **Install Node.js**  \n   Download and install Node.js from [nodejs.org](https://nodejs.org/en/).\n\n2. **Clone the Repository**  \n   ```bash\n   git clone https://github.com/arnobt78/News--ReactVite.git\n   cd News--ReactVite\n   ```\n\n3. **Install Dependencies**  \n   ```bash\n   npm install\n   ```\n\n4. **Setup .env File**  \n   Create a `.env` file in the root, and add your GNews API key:\n   ```\n   VITE_NEWS_API_KEY=your_gnews_api_key_here\n   ```\n\n5. **Install Axios**  \n   If not already installed:\n   ```bash\n   npm install axios\n   ```\n\n6. **Run the Application Locally**  \n   ```bash\n   npm run dev\n   ```\n   Open [http://localhost:5173/](http://localhost:5173/) in your browser.\n\n---\n\n## API Integration\n\n- **GNews API**:  \n  - Sign up at [gnews.io](https://gnews.io/docs/v4#authentication) to get your API key.\n  - Store the API key in your `.env` file as shown above.\n  - Axios is used to fetch news data from the API endpoints.\n\n---\n\n## Usage Instructions\n\n1. **Start the app** (`npm run dev`)\n2. **Browse categories** using the top navigation bar\n3. **Click on articles** to view detailed news content\n4. **Stay up to date** with the latest world news, refreshed live from the GNews API\n\n---\n\n## Key Concepts \u0026 Learning Points\n\n- **React Functional Components**: All UI built from modular, reusable JS functions.\n- **State Management**: Use of React Hooks (useState, useEffect) for local state and effects.\n- **API Requests with Axios**: Fetch and handle data asynchronously.\n- **Environment Variables**: Secure API keys with `.env` and Vite’s environment system.\n- **Component-Based Architecture**: Separation of concerns, reusability, and scalability.\n- **Routing (if implemented)**: Page navigation and dynamic rendering.\n- **Responsive Design**: Mobile-first, adaptive layout.\n\n---\n\n## Example Code Snippets\n\n**Fetching News with Axios:**\n```javascript\nimport axios from 'axios';\n\nconst API_KEY = import.meta.env.VITE_NEWS_API_KEY;\nconst url = `https://gnews.io/api/v4/top-headlines?token=${API_KEY}\u0026lang=en`;\n\nconst fetchNews = async () =\u003e {\n  try {\n    const response = await axios.get(url);\n    // set state with response.data.articles\n  } catch (error) {\n    console.error('Failed to fetch news:', error);\n  }\n};\n```\n---\n\n**Sample Navbar Component:**\n```jsx\nexport default function Navbar() {\n  return (\n    \u003cnav\u003e\n      \u003cul\u003e\n        \u003cli\u003eWorld\u003c/li\u003e\n        \u003cli\u003eTechnology\u003c/li\u003e\n        \u003cli\u003eSports\u003c/li\u003e\n        {/* Add more categories */}\n      \u003c/ul\u003e\n    \u003c/nav\u003e\n  );\n}\n```\n---\n\n## Conclusion\n\nThis project is a practical example for learning full-stack JavaScript with React and Vite, API integration, and modern web development best practices. It is easily extendable for more features, categories, or different APIs.  \nContributions, suggestions, and feedback are welcome!\n\n---\n\n## Keywords\n\nReact, Vite, GNews API, Axios, News App, JavaScript, .env, Environment Variables, API Integration, Responsive Design, Components, Frontend, Web Development, Learning Project\n\n---\n\n## Happy Coding! 🚀\n\nThank you for exploring and using News-ReactVite.  \n*Feel free to fork, star, and contribute!*\n\n---\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Farnobt78%2Fnews-world--react","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Farnobt78%2Fnews-world--react","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Farnobt78%2Fnews-world--react/lists"}