🐉 Dragon Daily News

A modern, fully responsive news portal built with React, Firebase, Tailwind CSS, and Vite. This project simulates a real-world news application with category-based news, user authentication, and private routes — perfect for portfolio showcasing.

---

🌐 Live Demo

🔗 Live Link: https://dragon-daily-news.web.app

---

🎯 Purpose

This project was built to practice modern React development using real-world features such as:

• Firebase authentication
• Protected/private routing
• Reusable component structure
• Utility-first CSS with Tailwind
• Deployment using Firebase Hosting

---

✨ Key Features

• Firebase Authentication

  • Email/Password login
  • Logout & user session handling
  • Google Sign-In Panding..
  • Github Sign-In Panding..

• Dynamic & Nested Routing

  • Routes like /category/:id

• Protected Routes

  • News detail pages are accessible only after login

• Category-based News Display

  • Dynamic rendering of news based on selected category

• Responsive Design

  • Built with Tailwind CSS & DaisyUI for mobile-first layout Panding..

• Animated News Ticker

  • Smooth scrolling headlines using react-fast-marquee

• Formatted Publish Times

  • Human-readable dates with date-fns

• Modern UI Components

  • Used Lucide & React Icons for sleek design

• High Performance Development

  • Powered by Vite for fast builds and hot reload

---

📦 Used npm Packages

Package	Use Case
react, react-dom	Base library for UI development
react-router	Routing and navigation management
firebase	Authentication and deployment
tailwindcss	Utility-first CSS framework
@tailwindcss/vite	Tailwind integration with Vite
daisyui	UI components on top of Tailwind
lucide-react	Minimalistic SVG icon library
react-icons	Popular icon pack integration
react-fast-marquee	Scrolling marquee used for breaking news ticker
date-fns	Date/time formatting for publishing timestamps

🧪 Dev Tools

Tool	Purpose
vite	Build tool for fast development
eslint	Code linting and formatting
@vitejs/plugin-react	React fast refresh plugin for Vite
eslint-plugin-react-hooks, @eslint/js	Best practices for clean, modern React code

---

🛠️ Installation Guide

git clone https://github.com/shamsuttabriz/Dradon-Daily-News.git

cd Dradon-Daily-News

npm install

npm run dev