Online News Portal A modern online news portal with category browsing, rich article cards, and a responsive three‑column layout. Includes Firebase Authentication (email/password with verification), Google sign‑in, “remember me” persistence, and password reset. Styled with Tailwind CSS and DaisyUI.

Features News and categories Category list + per‑category feed Article details with author, date, read count Mobile: categories visible on top Desktop: left (categories) and right (widgets) sidebars; center shows the feed Authentication (Firebase Web v12) Email/password sign up and sign in Email verification enforced before access; resend from Sign In “Remember me” toggles local vs session persistence Password reset via email Google sign‑in using popup “Sign in with X” shows an “Under construction” message UX polish React Router v7 routes Toast notifications (success/error) Loading overlay for async actions Avatar fallback (DiceBear) for users without profile photos Tech Stack React 19 + Vite 7 React Router v7 (react-router-dom) Firebase Auth v12 Tailwind CSS v4 + DaisyUI v5 React Toastify, React Icons Getting Started Prerequisites

Node.js 18+ and npm 9+ A Firebase project with Authentication enabled (Email/Password; optionally Google) Install

Run in development

Build for production

Preview production build

Lint

Firebase Configuration (choose ONE) The app can read configuration from environment variables, a public JSON file, or a local initializer module.

Option A: Environment variables (recommended)

Create a .env.local in the project root. Add either the canonical VITE_FIREBASE_* keys or legacy VITE_* keys (both are supported): Option B: Public runtime config

Create public/firebase-config.json: Option C: Local initializer module

Create firebase.config.js: Authentication Behavior Sign Up Creates the account, sends verification email, then signs out User must verify email before access is allowed Sign In If unverified, user is kept signed out and can resend the verification link Remember Me Controls persistence: local storage (checked) vs session storage (unchecked) Password Reset Available from Sign In (“Forgot password?”) Google Sign‑in Uses GoogleAuthProvider with signInWithPopup, respects “Remember me” “Sign in with X” Shows a toast: “It’s still under construction. Please try again later” Project Structure (high level) Deployment Any static host works. Firebase Hosting example:

Recommendation: ignore Firebase local cache in Git.

If you already committed it:

Security & Privacy No credentials are logged in production; debugging logs are dev‑only. Keep Firebase keys in .env.local or public/firebase-config.json (depending on your needs). Ensure Google provider is enabled in Firebase Console to use Google sign‑in. Troubleshooting Tailwind/DaisyUI “Unknown at rule” warnings in editors are harmless; Vite compiles them correctly. If auth seems to run in “stub” mode, make sure at least one Firebase config source is present (env, public JSON, or firebase.config.js). On Windows, ensure consistent casing for paths (e.g., Firebase/ vs FIrebase/).