🌟 FactVerse

Discover Fascinating Facts Across Multiple Categories
FactVerse is a React-based web application that displays interesting facts across various categories. It fetches random facts using an API when All is selected and retrieves category-specific facts from Firebase Realtime Database. The app is fully responsive and works seamlessly on different screen sizes.

---

🚀 Features

• Display Random Facts: Select a category (All, Science, Universe, History, Technology) to fetch a random fact.
• Dynamic Fact Fetching:
  • All: Fetches random facts from Useless Facts API
  • Specific Categories: Curated facts from Firebase Realtime Database
• Save Favorites: Save your favorite facts and manage them (add/delete).
• Responsive Design: Optimized for mobile 📱, tablet, and desktop 💻.
• Secure: Firebase API keys are securely managed using environment variables 🔐.

---

🛠️ Technologies Used

• React (HTML, CSS, JavaScript) - Frontend framework
• Bootstrap - Styling and responsiveness
• Firebase Realtime Database - Data storage for categorized facts
• Netlify - Deployment platform

---

📥 Installation and Setup

To run FactVerse locally, follow these steps:

1. Clone the repository:

   git clone https://github.com/Princepm02/FactVerse.git
   cd FactVerse

2. Install dependencies:

   npm install

3. Firebase Setup:

   • Create Firebase project at Firebase Console
   • Enable Realtime Database
   • Structure your database with categories:

   {
    "facts": {
      "science": ["fact1", "fact2"],
      "history": ["fact1", "fact2"],
      "technology": ["fact1", "fact2"],
      "universe": ["fact1", "fact2"]
      }
    }
   

4. Set up Firebase environment variables:

   Create a .env file in the root directory and add the following:

   REACT_APP_FIREBASE_API_KEY=your_api_key
   REACT_APP_FIREBASE_AUTH_DOMAIN=your_auth_domain
   REACT_APP_FIREBASE_DATABASE_URL=your_database_url
   REACT_APP_FIREBASE_PROJECT_ID=your_project_id
   REACT_APP_FIREBASE_STORAGE_BUCKET=your_storage_bucket
   REACT_APP_FIREBASE_MESSAGING_SENDER_ID=your_messaging_sender_id
   REACT_APP_FIREBASE_APP_ID=your_app_id
   REACT_APP_FIREBASE_MEASUREMENT_ID=your_measurement_id

5. Start the development server:

   npm start

---

🌐 Deployment

FactVerse is deployed on Netlify. You can deploy your own version by linking your GitHub repository to Netlify and setting up environment variables in Netlify’s UI.

---

📁 Project Structure

FactVerse/
├── src/
│   ├── components/      # Reusable React components
│   ├── firebase.js      # Firebase configuration
│   ├── App.js           # Main application logic
│   ├── App.css          # Styling
│   └── index.js         # Entry point
├── public/
├── .env               # Environment variables (not committed to GitHub)
├── package.json       # Dependencies and scripts
└── README.md          # Project documentation

---

🔍 Usage

1. Select a category: Use the dropdown to choose your fact category.
2. Generate a fact: Click "Generate Fact" to display a random fact.
3. Save your favorite: Click "Save to Favorites" to store the fact.
4. Manage favorites: View and delete saved facts from the Saved Facts section.

---

📸 Screenshots

Experience the magic of facts!

---

🤝 Contributing

Contributions are always welcome! Feel free to:

1. Fork the repository.
2. Create a new branch (feature/new-feature).
3. Commit your changes.
4. Push to the branch.
5. Open a Pull Request.

---

💻 Deployment

The website is deployed on Netlify. You can access it here.

---

👨‍💻 Author

Prince Mishra

Made with ❤️ by Prince Mishra.