Sky Newz

Sky Newz is a lightweight news-aggregator web app built with React (Create React App). It fetches and displays news articles from a news provider and offers a simple, responsive UI for browsing headlines, categories, and article details.

This README provides instructions for running, developing, and deploying the project.

---

Table of Contents

• Demo
• Features
• Tech Stack
• Requirements
• Getting Started
  • Install
  • Environment Variables
  • Run Locally
• Available Scripts
• Project Structure
• Testing & Linting
• Deployment
• Contributing
• License
• Contact

---

Demo

If you have a hosted demo, add the link here.

Example:

• Live demo: https://your-demo-url.example.com

---

Features

• Browse latest headlines
• Filter news by category (e.g., Business, Technology, Sports)
• Search for articles by keyword
• View article details (title, description, source, published date)
• Responsive design for mobile and desktop

---

Tech Stack

• React (Create React App)
• JavaScript (or TypeScript if applicable)
• CSS / SCSS / Styled Components (depending on project)
• Optional: Axios or fetch for HTTP requests
• Optional: React Router for client-side routing

---

Requirements

• Node.js >= 14 (recommended 16+)
• yarn (or npm)

---

Getting Started

Clone the repository:

git clone https://github.com/prabesh2004/sky-newz.git
cd sky-newz

Install dependencies:

yarn install
# or
npm install

Environment Variables

Create a .env file in the project root or set environment variables in your hosting provider. Example variables the app may expect:

# .env.example
REACT_APP_NEWS_API_KEY=your_news_api_key_here
REACT_APP_NEWS_BASE_URL=https://newsapi.org/v2
# Optional: default page size or other flags
REACT_APP_DEFAULT_PAGE_SIZE=20

Notes:

• Prefix environment variables with REACT_APP_ so Create React App exposes them to the client.
• If you use a different news provider, set REACT_APP_NEWS_BASE_URL accordingly and adapt API calls in the code.

Run Locally

Start the development server:

yarn start
# or
npm start

Open http://localhost:3000 to view the app. The page will reload when you make changes.

---

Available Scripts

In the project directory, you can run:

• yarn start — Runs the app in development mode.
• yarn build — Builds the app for production to the build folder.
• yarn test — Launches the test runner in interactive watch mode.
• yarn lint — (Optional) Runs linting if configured.
• yarn eject — (CAUTION) Ejects the Create React App configuration. This is irreversible.

Replace yarn with npm run if you use npm.

---

Project Structure (suggested)

A typical structure for this project:

src/
├─ api/                # API client and request helpers
├─ components/         # Reusable UI components (Card, Header, Footer, etc.)
├─ pages/              # Page-level components (Home, Category, Article)
├─ hooks/              # Custom React hooks
├─ contexts/           # React context providers
├─ styles/             # Global styles and theme
├─ utils/              # Utility helpers
├─ App.js
└─ index.js

Adjust according to the current repository layout.

---

Testing & Linting

If tests are present:

yarn test
# or
npm test

If ESLint / Prettier are configured, run:

yarn lint
yarn format

Add or update test cases in the __tests__ or src folder as appropriate.

---

Deployment

Build the production bundle:

yarn build
# or
npm run build

Deploy the build/ directory to any static hosting service:

• Vercel
• Netlify
• GitHub Pages
• Surge

Example: Deploy to GitHub Pages (if using CRA):

1. Install gh-pages:

yarn add --dev gh-pages

2. Add the following to package.json:

"homepage": "https://<username>.github.io/<repo-name>"

3. Add scripts:

"predeploy": "yarn build",
"deploy": "gh-pages -d build"

4. Run:

yarn deploy

---

Contributing

Contributions are welcome! Suggested process:

1. Fork the repository
2. Create a feature branch: git checkout -b feat/my-feature
3. Commit your changes and push: git push origin feat/my-feature
4. Open a Pull Request describing the change

Please open issues for bugs or feature requests and reference them in your PR.

---

Troubleshooting

• If builds fail due to environment variables, ensure they are prefixed with REACT_APP_.
• For CORS issues when calling a news API, use an authorized API endpoint or server-side proxy.
• If the dev server doesn't start, try deleting node_modules and re-running yarn install.

---

License

Specify your license here (e.g., MIT):

MIT License

Or add a LICENSE file to the repository and reference it here.

---

Contact

Project maintained by prabesh2004.

If you have questions, open an issue in the repository or reach out via your preferred contact method.

---

Thank you for using Sky Newz! If you'd like, I can:

• Add a .env.example file to the repo,
• Create a template for article components,
• Or open a PR with these README improvements.