A React-based news portal application with Firebase authentication, built as part of a web development bootcamp in 2023.
Dragon News is a single-page news application that demonstrates core React concepts including routing, authentication, protected routes, and component composition. The project was built to apply fundamentals learned during the bootcamp: working with React Router v6, integrating Firebase Authentication, and consuming a JSON-based news API.
This was an early-stage learning project completed during a web development bootcamp in 2023. The goal was to practice:
- Component-based architecture in React
- Client-side routing with
react-router-dom - User authentication flows (email/password, Google sign-in)
- Conditional rendering based on auth state
- Building responsive layouts with utility-first CSS
It is preserved here as part of my learning journey rather than a polished production application.
- User Authentication — Email/password registration and login via Firebase Auth, plus social sign-in providers
- Protected Routes — Certain news articles are only viewable by authenticated users
- News Feed — Browse categorised news articles with author info and publication dates
- Article Details Page — Dedicated route for full article view
- Responsive Layout — Mobile-friendly design using Tailwind CSS and DaisyUI
- Latest News Marquee — Scrolling headline ticker on the homepage
- 404 Handling — Custom error page for invalid routes
| Category | Technology |
|---|---|
| Framework | React 18 |
| Build Tool | Vite |
| Routing | React Router DOM v6 |
| Authentication | Firebase Authentication |
| Styling | Tailwind CSS, DaisyUI |
| Icons | React Icons |
| Date Handling | Moment.js |
| UI Extras | React Fast Marquee |
| Linting | ESLint |
- Node.js 16+ and npm
- A Firebase project (for authentication)
- Clone the repository
git clone https://github.com/farhanbin65/Dragon-News.git
cd Dragon-News- Install dependencies
npm install-
Configure Firebase
Create a
.env.localfile in the project root with your Firebase credentials:
VITE_apiKey=your_api_key
VITE_authDomain=your_auth_domain
VITE_projectId=your_project_id
VITE_storageBucket=your_storage_bucket
VITE_messagingSenderId=your_sender_id
VITE_appId=your_app_idEnable Email/Password and Google sign-in providers in your Firebase Console under Authentication → Sign-in method.
- Run the development server
npm run devThe app will be available at http://localhost:5173.
- Build for production
npm run build
npm run previewFarhan Bin Hossain
GitHub
This project is for educational purposes and was built as part of a bootcamp assignment.