Skip to content

Latest commit

 

History

3 Commits

Folders and files

NameName
Last commit message
Last commit date
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

📰 NewsApp

A modern and responsive News Application built with React, Vite, Tailwind CSS, and DaisyUI. NewsApp fetches real-time news from a News API, allowing users to stay updated with the latest headlines across multiple categories. It features a clean UI, fast performance, responsive design, and efficient state management using the React Context API.

🌐 Live Demo: https://your-news-app.vercel.app


✨ Features

  • 📰 Real-time news fetching using a News API
  • 📂 Browse news by categories
  • 🔍 Search for news articles
  • ⚡ Fast and optimized performance with Vite
  • 🎨 Modern and responsive UI using Tailwind CSS & DaisyUI
  • 📱 Mobile-first responsive design
  • 🌍 Latest headlines from multiple categories
  • 🔄 Global state management with React Context API
  • 🚀 Deployed on Vercel
  • ♻️ Reusable React components
  • 🧩 Clean and scalable project structure

🛠️ Tech Stack

Frontend

  • React
  • JavaScript (ES6+)
  • Vite
  • HTML5
  • CSS3

Styling

  • Tailwind CSS
  • DaisyUI

State Management

  • React Context API

API

  • News API (REST API)

Deployment

  • Vercel

Development Tools

  • Git
  • GitHub
  • VS Code

📂 Folder Structure

NewsApp/
│── public/
│── src/
│   ├── assets/
│   ├── components/
│   ├── context/
│   ├── pages/
│   ├── App.jsx
│   ├── main.jsx
│   └── index.css
│
├── package.json
├── vite.config.js
└── README.md

🚀 Getting Started

Clone the Repository

git clone https://github.com/kavisingh300/NewsApp.git

Navigate to the Project

cd NewsApp

Install Dependencies

npm install

Start the Development Server

npm run dev

The application will be available at:

http://localhost:5173

📸 Screenshots

Add screenshots of the following:

  • 🏠 Home Page
  • 🔍 Search Results
  • 📂 Category Page
  • 📱 Mobile View

🚀 Deployment

This project is deployed using Vercel.

To deploy your own version:

  1. Push the project to GitHub.
  2. Import the repository into Vercel.
  3. Deploy with the default Vite settings.

📚 What I Learned

During the development of this project, I gained practical experience with:

  • Building applications using React
  • Managing global state with Context API
  • Fetching and displaying API data
  • Working with asynchronous JavaScript
  • Creating reusable React components
  • Designing responsive interfaces using Tailwind CSS
  • Using DaisyUI components effectively
  • Deploying applications with Vercel
  • Organizing scalable React project structures
  • Managing source code with Git and GitHub

🔮 Future Improvements

  • 🌙 Dark/Light mode
  • ❤️ Bookmark favorite articles
  • 📑 Infinite scrolling
  • 📄 Pagination
  • 🌐 Multiple news sources
  • 🔥 Trending news section
  • 👤 User authentication
  • 📌 Personalized news feed

🤝 Contributing

Contributions, issues, and feature requests are welcome.

If you'd like to improve this project:

  1. Fork the repository.
  2. Create a new branch.
  3. Commit your changes.
  4. Open a Pull Request.

⭐ Support

If you found this project helpful, consider giving it a ⭐ on GitHub. It helps others discover the project and motivates further improvements.


📄 License

This project is licensed under the MIT License.


👨‍💻 Author

Kavi Kumar Singh


Thank you for visiting this repository! Feel free to explore the code, share feedback, or contribute to make NewsApp even better.

About

Modern React News App with real-time news, category filtering, responsive UI, and Vercel deployment.

Topics

Resources

Stars

0 stars

Watchers

0 watching

Forks

Releases

Packages

Contributors

Languages