🐉 Dragon News is a front-end web application built with React that delivers real-time news articles across multiple categories. It offers a smooth and engaging user experience on all devices, complete with Firebase Authentication for secure and personalized access.
This project integrates a third-party API provided by Programming Hero to fetch news content dynamically. It includes category-wise browsing, news details viewing, and authentication-protected routes for a more tailored experience.
🌐 the-dragon-news-6136e.web.app
🧠 Features 🔐 User Authentication with Firebase (Login/Logout)
📰 Browse news by categories
📑 View full details of individual news articles
📱 Fully layout desktop
⚡ Fast loading using React dynamic routing
🧭 Protected route for "News Details" (requires login)
🛠️ Tech Stack React.js – Front-end framework
React Router DOM – Client-side routing
Firebase Auth – Authentication and user state management
Tailwind CSS – Styling
DaisyUI – Prebuilt components
Axios / Fetch – API communication
React Icons – Iconography
🌐 API Integration All news data is fetched from the Programming Hero News API:
Base URL: https://openapi.programming-hero.com/api
📚 Endpoints Used: GET /news/categories – Fetch all news categories
GET /news/category/{category_id} – Fetch news by category
GET /news/{news_id} – Fetch single news details
🔧 Project Layouts The application is structured using three layout templates for better content organization:
Main Layout – Navigation, routing, etc.
Category Layout – Dynamic listing of category-wise news
News Details Layout – Detailed view of selected article (protected)
📸 Screenshots
Home page
News Details by category
Login page
Register page
🧑💻 Author Rakib Hasan 📧 dev.rakibhasan1@gmail.com 🔗 GitHub Profile