Atmos - Modern News Application

Stay Informed with Real-Time News from Around the World

• Report Bug • Request Feature

📸 Screenshots

Homepage

Modern dashboard with top stories and weather widget

Category News

Browse news by categories with beautiful card layouts

Mobile Responsive

Fully responsive design for all devices

✨ Features

🌍 Multi-Country Support - News from USA, UK, India, Canada
📂 Multiple Categories - Business, Technology, Sports, Health, Science, Entertainment, General
🔍 Search Functionality - Find news articles by keywords
🌤️ Weather Widget - Real-time weather with city search
📱 Fully Responsive - Works perfectly on desktop, tablet, and mobile
🎨 Modern UI/UX - Beautiful gradient design with smooth animations
🔐 Secure - Environment variables for API keys
♿ Accessible - WCAG compliant design

🚀 Quick Start

Prerequisites

Before you begin, ensure you have:

Node.js (v14 or higher)
npm or yarn
Git

Installation

Clone the repository

git clone https://github.com/Open-Source-Chandigarh/Atmos
cd news-app

Install dependencies
```
npm install
```

Set up environment variables

Create a .env file in the root directory:

VITE_NEWS_API_KEY=your_news_api_key_here
VITE_WEATHER_API_KEY=your_weather_api_key_here

Get your API keys

News API:
- Visit NewsAPI.org
- Sign up for a free account
- Copy your API key
- Free tier: 100 requests/day
Weather API:
- Visit OpenWeatherMap
- Sign up for a free account
- Copy your API key
- Free tier: 1,000 requests/day
Start the development server
```
npm start
```
Open your browser

Navigate to http://localhost:3000

🛠️ Built With

Technology	Purpose
React	Frontend framework
Redux	State management
React Router	Navigation
NewsAPI	News data source
OpenWeatherMap API	Weather data
Vite	Build tool

📁 Project Structure

news-app/
├── public/
│   └── index.html
├── src/
│   ├── CSS/
│   │   ├── Header.css
│   │   ├── HomePage.css
│   │   ├── HomepageNews.css
│   │   ├── FeaturedNews.css
│   │   ├── NewsBar.css
│   │   ├── NewsItem.css
│   │   ├── Weather.css
│   │   └── Footer.css
│   ├── Store/
│   │   ├── Action-creator/
│   │   │   └── index.js
│   │   ├── reducer/
│   │   │   ├── countryReducer.js
│   │   │   └── index.js
│   │   ├── store.js
│   │   └── index.js
│   ├── assets/
│   │   └── Atmos_Logo-removebg-preview.png
│   ├── App.css
│   ├── App.jsx
│   ├── Header.jsx
│   ├── Footer.jsx
│   ├── HomePage.jsx
│   ├── HomepageNews.jsx
│   ├── FeaturedNews.jsx
│   ├── NewsBar.jsx
│   ├── NewsItem.jsx
│   ├── Weather.jsx
│   ├── index.css
│   └── main.jsx
├── .env.example
├── .gitignore
├── package.json
├── vite.config.js
└── README.md

🎯 Usage

Browsing News

Homepage - View top stories and weather
Categories - Click navigation links to browse by category
Countries - Use flag buttons to switch between countries
Articles - Click any article card to read full story

Weather Widget

Enter any city name in the search box
Press Enter or click the search button
View current temperature, conditions, and details

Search News

Use the search bar on homepage
Enter keywords (e.g., "technology", "bitcoin")
View filtered results

🔐 Environment Variables

Create a .env file in the root directory:

# News API Key
VITE_NEWS_API_KEY=your_news_api_key_here

# Weather API Key
VITE_WEATHER_API_KEY=your_weather_api_key_here

⚠️ Important: Never commit your .env file to Git. It's already in .gitignore.

🚀 Deployment

Deploy to Vercel (Recommended)

Push your code to GitHub
Go to Vercel
Click "New Project"
Import your repository
Add environment variables:
- VITE_NEWS_API_KEY
- VITE_WEATHER_API_KEY
Click "Deploy"

Your app will be live in ~2 minutes!

Deploy to Netlify

Build your project:
```
npm run build
```
Go to Netlify
Drag and drop the build folder
Add environment variables in site settings

Deploy to GitHub Pages

Install gh-pages:
```
npm install gh-pages --save-dev
```

Add to package.json:

"homepage": "https://yourusername.github.io/news-app",
"scripts": {
  "predeploy": "npm run build",
  "deploy": "gh-pages -d build"
}

Deploy:
```
npm run deploy
```

🎨 Color Palette

Primary Gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%)
Background: linear-gradient(135deg, #1e1e2e 0%, #2d1b4e 50%, #1e1e2e 100%)
Card Background: rgba(255, 255, 255, 0.05)
Text Primary: #ffffff
Text Secondary: rgba(255, 255, 255, 0.7)

🤝 Contributing

Contributions are welcome! Here's how you can help:

Fork the project
Create your feature branch
```
git checkout -b feature/AmazingFeature
```
Commit your changes
```
git commit -m 'Add some AmazingFeature'
```
Push to the branch
```
git push origin feature/AmazingFeature
```
Open a Pull Request

Development Guidelines

Follow existing code style
Test thoroughly before submitting PR
Update README if adding new features
Don't commit API keys or .env file

🐛 Known Issues

NewsAPI free tier has rate limits (100 requests/day)
Some news sources may not have images
Weather API coordinates may vary for cities with same names

🔮 Future Features

📝 License

This project is licensed under the MIT License - see the LICENSE file for details.

👨‍💻 Author

Your Name

GitHub: 150202-Pratham
LinkedIn: Pratham Garg
Email: [email protected]

🙏 Acknowledgments

NewsAPI for providing news data
OpenWeatherMap for weather data
React team for amazing framework
Redux for state management
All contributors who help improve this project

📞 Support

If you have any questions or issues:

Open an Issue
Contact me on LinkedIn
Email: [email protected]

⭐ Show Your Support

Give a ⭐ if this project helped you!

Made with ❤️ by Pratham

⬆ Back to Top

Name		Name	Last commit message	Last commit date
Latest commit History 24 Commits
Screenshots		Screenshots
public		public
src		src
.env.example		.env.example
.gitignore		.gitignore
CONTRIBUTING.md		CONTRIBUTING.md
README.md		README.md
eslint.config.js		eslint.config.js
index.html		index.html
package-lock.json		package-lock.json
package.json		package.json
vite.config.js		vite.config.js

Open-Source-Chandigarh/Atmos

Folders and files

Latest commit

History

Repository files navigation