Dragon News - Modern News Portal

Overview

Dragon News is a modern, responsive news portal built with React and Firebase. It provides users with the latest news across various categories, featuring a clean and intuitive interface for an optimal reading experience.

Features

• User Authentication: Secure login and registration system using Firebase Authentication
• Category-based News: Browse news articles filtered by categories
• Latest News Ticker: Stay updated with breaking news via a scrolling ticker
• Responsive Design: Optimized for all device sizes using Tailwind CSS
• Article Details: Detailed view for each news article with related information
• Social Media Integration: Share articles and connect via social media platforms

Technologies Used

• Frontend: React 19, React Router 7
• Styling: Tailwind CSS 4, DaisyUI 5
• Authentication: Firebase Authentication
• Hosting: Firebase Hosting
• Icons: React Icons
• Date Formatting: date-fns
• Build Tool: Vite

Project Structure

src/
├── Components/         # Reusable UI components
├── Firebase/           # Firebase configuration
├── Layouts/            # Page layout components
├── Pages/              # Main page components
├── Provider/           # Context providers
├── Routes/             # Application routing
└── assets/             # Static assets (images, etc.)

Getting Started

Prerequisites

• Node.js (v16 or higher)
• npm or yarn

Installation

1. Clone the repository

   git clone https://github.com/yourusername/dragon-news.git
   cd dragon-news

2. Install dependencies

   npm install
   # or
   yarn

3. Create a .env file in the root directory with your Firebase configuration

   VITE_apiKey=your-api-key
   VITE_authDomain=your-auth-domain
   VITE_projectId=your-project-id
   VITE_storageBucket=your-storage-bucket
   VITE_messagingSenderId=your-messaging-sender-id
   VITE_appId=your-app-id
   

4. Start the development server

   npm run dev
   # or
   yarn dev

5. Open your browser and navigate to http://localhost:5173

Building for Production

npm run build
# or
yarn build

Deployment

The project is configured for Firebase Hosting. To deploy:

1. Install Firebase CLI if you haven't already

   npm install -g firebase-tools

2. Login to Firebase

   firebase login

3. Initialize Firebase (if not already done)

   firebase init

4. Deploy to Firebase

   firebase deploy

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

License

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

Acknowledgments

• React team for the amazing library
• Firebase for authentication and hosting services
• All contributors and supporters of the project