---

NewsHub Application

Welcome to the NewsHub Application, your one-stop platform to explore, read, and subscribe to premium articles tailored to your interests. Built with modern technologies like React, Node.js, Express, MongoDB, and Firebase, this application ensures a seamless and secure experience for users.

Live Website

Visit NewsHub Application

---

Admin Credentials

• Username: admin@gmail.com
• Password: Ad123#@min

---

Key Features

1. Responsive Design: The application is optimized for all devices, including mobile, tablet, and desktop.
2. Premium Content Access: Users can subscribe to premium plans for exclusive articles.
3. Secure Authentication: Powered by Firebase Authentication, ensuring data security and user privacy.
4. Dynamic Dashboard: Admins can manage articles and users efficiently.
5. Interactive UI/UX: Engaging design with modern animations using Tailwind CSS and Swiper.js.
6. Real-Time Updates: Article management with live updates powered by React Query.
7. Email Notifications: Stay updated with new article releases via email subscriptions.
8. Search and Filter: Easily find articles with advanced search and filtering options.
9. Article Insights: Displays trending and top-read articles for a personalized experience.
10. Social Sharing: Share articles effortlessly across popular social platforms.

---

Frontend Dependencies

The frontend of this project leverages the following modern libraries and frameworks:

"dependencies": {
  "@tanstack/react-query": "^5.64.2",
  "@tanstack/react-router": "^1.97.3",
  "axios": "^1.7.9",
  "firebase": "^11.2.0",
  "react": "^18.3.1",
  "react-countup": "^6.5.3",
  "react-dom": "^18.3.1",
  "react-google-charts": "^5.2.1",
  "react-icons": "^5.4.0",
  "react-router-dom": "^7.1.3",
  "react-select": "^5.9.0",
  "react-simple-typewriter": "^5.0.1",
  "react-slick": "^0.30.3",
  "react-toastify": "^11.0.3",
  "slick-carousel": "^1.8.1",
  "sweetalert2": "^11.15.10",
  "sweetalert2-react-content": "^5.1.0",
  "swiper": "^11.2.1"
}

---

Backend Dependencies

The backend is designed with robust tools to ensure efficiency and security:

"dependencies": {
  "body-parser": "^1.20.3",
  "cloudinary": "^2.5.1",
  "cookie-parser": "^1.4.7",
  "cors": "^2.8.5",
  "dotenv": "^16.4.7",
  "express": "^4.21.2",
  "jsonwebtoken": "^9.0.2",
  "mongodb": "^6.12.0",
  "nodemon": "^3.1.9",
  "swiper": "^11.2.1"
}

---

How to Run Locally

Client-Side Setup

1. Clone the repository:

   git clone https://github.com/Programming-Hero-Web-Course4/b10a12-client-side-swapnilahmedshishir

2. Navigate to the project folder and install dependencies:

   cd b10a12-client-side-swapnilahmedshishir
   npm install

3. Start the frontend:

   npm run dev

4. Open http://localhost:5173 in your browser.

---

Server-Side Setup

1. Clone the repository:

   git clone https://github.com/Programming-Hero-Web-Course4/b10a12-server-side-swapnilahmedshishir

2. Navigate to the server folder and install dependencies:

   cd b10a12-server-side-swapnilahmedshishir
   npm install

3. Create a .env file with the following keys:

   port=5001
   DB_userName=
   DB_Password=
   ACCESS_TOKEN_SECRET=
   CLOUDINARY_CLOUD_NAME=
   CLOUDINARY_API_KEY=
   CLOUDINARY_API_SECRET=

4. Start the backend server:

   npm start

5. The server will run at http://localhost:5001.

---

Hosting Information

• Frontend Hosting: Firebase Hosting

  firebase deploy

• Backend Hosting: Vercel

  vercel

---

Developer Information

Hi, I'm swapnilahmedshishir, a passionate web developer with expertise in building scalable and interactive applications. Feel free to reach out for collaborations or feedback!

• Email: swapnilahmedshishir2018@gmail.com
• GitHub: swapnilahmedshishir

---