Merge branch 'main' into feat/loading-skeleton

Author: venisha-kalola

README.md

@@ -1,67 +1,96 @@
-# React Verse – Free API Dashboard (Hacktoberfest)
-
-An all-in-one React (Vite) dashboard showcasing multiple free, no-auth public APIs. Built as a friendly Hacktoberfest playground for first-time and seasoned contributors alike.
-
-## Dashboards Implemented
-- Weather (wttr.in)
-- Cryptocurrency (CoinGecko)
-- Space & Astronomy (Open Notify – ISS + Astronauts)
-- Movies (Studio Ghibli API)
-- Recipes (TheMealDB)
-- Trivia Quiz (Open Trivia DB)
-- Jokes & Quotes (Official Joke API + Quotable)
-- Dog / Cat Images (Dog CEO + Cataas)
-- COVID-19 Tracker (covid19api.com)
-
-## Quick Start
+# 🌐 ReactVerse – The Open API Playground
+
+**ReactVerse** is an open-source API dashboard built with **React + Vite**, designed to help developers explore, visualize, and learn how to integrate public APIs safely and responsibly.
+It’s more than just a project — it’s a **community-driven learning space** for understanding how APIs work, managing data securely, and contributing meaningfully to open source.
+
+Perfect for **beginners**, and **API enthusiasts** who want to get hands-on experience using real-world APIs.
+
+---
+
+## 🚀 What’s Inside
+
+A collection of interactive dashboards that fetch and display data from **free, no-auth public APIs** — all in one unified, open-source interface.
+
+| Dashboard             | API Used                                                                                                | Description                                       |
+| --------------------- | ------------------------------------------------------------------------------------------------------- | ------------------------------------------------- |
+| ☀️ Weather            | [wttr.in](https://wttr.in/:help)                                                                        | Get real-time weather updates and forecasts       |
+| 💰 Cryptocurrency     | [CoinGecko](https://www.coingecko.com/en/api)                                                           | Track live crypto prices and market data          |
+| 🛰️ Space & Astronomy | [Open Notify](http://open-notify.org/Open-Notify-API/)                                                  | View ISS location and current astronauts in orbit |
+| 🎬 Movies             | [Studio Ghibli API](https://ghibliapi.vercel.app/)                                                      | Explore Studio Ghibli’s magical movie catalog     |
+| 🍳 Recipes            | [TheMealDB](https://www.themealdb.com/api.php)                                                          | Find meal ideas and cooking inspiration           |
+| 🎯 Trivia Quiz        | [Open Trivia DB](https://opentdb.com/api_config.php)                                                    | Challenge yourself with fun trivia questions      |
+| 😂 Jokes & Quotes     | [Joke API](https://official-joke-api.appspot.com/) + [Quotable](https://github.com/lukePeavey/quotable) | Daily dose of humor and motivation                |
+| 🐶🐱 Pets             | [Dog CEO](https://dog.ceo/dog-api/) + [Cataas](https://cataas.com/#/)                                   | Random cute dog and cat images                    |
+| 🦠 COVID-19 Tracker   | [COVID19 API](https://covid19api.com/)                                                                  | Track pandemic stats and trends globally          |
+
+---
+
+## 🧠 Why ReactVerse?
+
+* 🧩 **Learn by doing** — See how public APIs work and how to safely handle data fetching.
+* 🔐 **Promote API safety** — No API keys, no secrets, just best practices for secure integration.
+* 🌍 **Open to everyone** — Ideal for contributors learning React, APIs, or GitHub workflows.
+* 💬 **Collaborative & inclusive** — A space where you can build, break, and improve together.
+
+---
+
+## ⚙️ Quick Start
+
 ```bash
 npm install
 npm run dev
 ```
-Open http://localhost:5173
-
-## Tech Stack
-- React 18 + Vite
-- React Router v6
-- Fetch API (no extra client)
-- Simple CSS (custom light/dark theme)
-
-## Contributing (Hacktoberfest)
-See `CONTRIBUTING.md` for detailed instructions, ideas, and open enhancement areas. Beginner-friendly issues will be labeled.
-
-## Roadmap / TODO Highlights
-- Enhance UI polish, accessibility, and animations
-- Add search, filters, and favorites persistence per dashboard
-- Add charts (price trends, COVID daily trends, weather graphs)
-- Replace placeholder chart component with a real library
-- Add service worker + offline caching for selected data
-- Add testing (Vitest + React Testing Library)
-- Add type safety (TypeScript migration) – optional future step
-
-## API References
-| Area | API | Docs |
-| ---- | --- | ---- |
-| Weather | wttr.in | https://wttr.in/:help |
-| Crypto | CoinGecko | https://www.coingecko.com/en/api |
-| Space | Open Notify | http://open-notify.org/Open-Notify-API/ |
-| Movies | Studio Ghibli | https://ghibliapi.vercel.app/ |
-| Recipes | TheMealDB | https://www.themealdb.com/api.php |
-| Trivia | Open Trivia DB | https://opentdb.com/api_config.php |
-| Jokes | Official Joke API | https://official-joke-api.appspot.com/ |
-| Quotes | Quotable | https://github.com/lukePeavey/quotable |
-| Pets | Dog CEO / Cataas | https://dog.ceo/dog-api/ / https://cataas.com/#/ |
-| COVID-19 | COVID19 API | https://covid19api.com/ |
-
-## License
-MIT – see `LICENSE`.
-
-## Acknowledgements
-Community-driven project for educational purposes. External API data © respective providers.
-
-## Credits
-
-Hrishikesh Dalal (https://www.hrishikeshdalal.tech/)
-
-Venisha Kalola (https://www.venishakalola.tech/)
 
+Then open [http://localhost:5173](http://localhost:5173) in your browser.
+
+---
+
+## 🧰 Tech Stack
+
+* ⚛️ React 18 + Vite
+* 🧭 React Router v6
+* 🌐 Fetch API (no external client)
+* 🎨 Custom Light/Dark CSS Theme
+
+---
+
+## 🤝 Contributing
+
+We welcome contributions of all levels — from design tweaks to feature enhancements!
+
+* Check out `CONTRIBUTING.md` for setup instructions and issue labels.
+* Look for **`good first issue`** or **`help wanted`** tags to get started.
+* Participate in **Hacktoberfest** and grow your open-source journey with us.
+
+---
+
+## 🗺️ Roadmap
+
+* ✨ Improve UI/UX and accessibility
+* 🔍 Add search, filters, and persistent favorites
+* 📊 Integrate charts (e.g. weather graphs, price trends)
+* 🧱 Introduce a real charting library (e.g. Recharts or Chart.js)
+* ⚙️ Add offline caching with service workers
+* 🧪 Include testing (Vitest + React Testing Library)
+* 🧾 Optional: Migrate to TypeScript for type safety
+
+---
+
+
+## 🪪 License
+
+MIT – see `LICENSE` for full details.
+
+---
+
+## 💡 Acknowledgements
+
+This project is community-built for **educational and open-source learning** purposes.
+
+---
+
+## 👥 Credits
+
+* [Hrishikesh Dalal](https://www.hrishikeshdalal.tech/)
+* [Venisha Kalola](https://www.venishakalola.tech/)
 

package.json

@@ -11,7 +11,9 @@
   "dependencies": {
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
-    "react-router-dom": "^6.27.0"
+    "react-router-dom": "^6.27.0",
+    "leaflet": "^1.9.4",
+    "react-leaflet": "^4.2.1"
   },
   "devDependencies": {
     "@vitejs/plugin-react": "^4.3.1",

src/components/DashboardControls.jsx

@@ -0,0 +1,35 @@
+import { useEffect, useState } from 'react';
+
+export default function DashboardControls({ onRefresh }) {
+  const [intervalTime, setIntervalTime] = useState(null);
+
+  useEffect(() => {
+    if (intervalTime) {
+      const id = setInterval(() => {
+        onRefresh();
+      }, intervalTime);
+      return () => clearInterval(id);
+    }
+  }, [intervalTime, onRefresh]);
+
+  return (
+    <div>
+      <button
+        onClick={onRefresh}
+      >
+        Refresh
+      </button>
+
+      <select
+        onChange={(e) =>
+          setIntervalTime(e.target.value === 'off' ? null : Number(e.target.value))
+        }
+      >
+        <option value="off">Auto Refresh: Off</option>
+        <option value={5000}>Every 5s</option>
+        <option value={30000}>Every 30s</option>
+        <option value={60000}>Every 1 min</option>
+      </select>
+    </div>
+  );
+}

src/components/IssMap.jsx

@@ -0,0 +1,57 @@
+import { MapContainer, TileLayer, Marker, Popup } from 'react-leaflet';
+import L from 'leaflet';
+import { useEffect, useRef } from 'react';
+import 'leaflet/dist/leaflet.css';
+
+// Default Leaflet icon fix (since CRA/Vite bundling sometimes needs explicit paths)
+const icon = new L.Icon({
+  iconUrl: 'https://unpkg.com/leaflet@1.9.4/dist/images/marker-icon.png',
+  iconRetinaUrl: 'https://unpkg.com/leaflet@1.9.4/dist/images/marker-icon-2x.png',
+  shadowUrl: 'https://unpkg.com/leaflet@1.9.4/dist/images/marker-shadow.png',
+  iconSize: [25, 41],
+  iconAnchor: [12, 41],
+  popupAnchor: [1, -34],
+  shadowSize: [41, 41]
+});
+
+/**
+ * IssMap component
+ * Props:
+ *  - latitude (string or number)
+ *  - longitude (string or number)
+ */
+export default function IssMap({ latitude, longitude }) {
+  const lat = parseFloat(latitude);
+  const lon = parseFloat(longitude);
+  const mapRef = useRef(null);
+
+  useEffect(() => {
+    if (mapRef.current) {
+      mapRef.current.setView([lat, lon]);
+    }
+  }, [lat, lon]);
+
+  if (Number.isNaN(lat) || Number.isNaN(lon)) return null;
+
+  return (
+    <div style={{ height: '320px', width: '100%', borderRadius: 8, overflow: 'hidden' }}>
+      <MapContainer
+        center={[lat, lon]}
+        zoom={3}
+        ref={mapRef}
+        style={{ height: '100%', width: '100%' }}
+        scrollWheelZoom={false}
+      >
+        <TileLayer
+          attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
+          url='https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png'
+        />
+        <Marker position={[lat, lon]} icon={icon}>
+          <Popup>
+            ISS Position<br />Lat: {lat.toFixed(2)} Lon: {lon.toFixed(2)}
+          </Popup>
+        </Marker>
+      </MapContainer>
+    </div>
+  );
+}

src/pages/Covid.jsx

@@ -17,7 +17,7 @@
  *  - [ ] Offline cache last fetch
  *  - [ ] Extract service + hook (useCovidSummary, useCountryTrends)
  */
-import { useEffect, useState } from 'react';
+import { useEffect, useState, useCallback } from 'react';
 import Loading from '../components/Loading.jsx';
 import ErrorMessage from '../components/ErrorMessage.jsx';
 import Card from '../components/Card.jsx';
@@ -28,26 +28,39 @@ export default function Covid() {
   const [error, setError] = useState(null);
   const [country, setCountry] = useState('');
 
-  useEffect(() => { fetchSummary(); }, []);
-
-  async function fetchSummary() {
+  const fetchSummary = useCallback(async () => {
+    if (loading) return;
     try {
-      setLoading(true); setError(null);
+      setLoading(true); 
+      setError(null);
       const res = await fetch('https://api.covid19api.com/summary');
       if (!res.ok) throw new Error('Failed to fetch');
       const json = await res.json();
       setSummary(json);
-    } catch (e) { setError(e); } finally { setLoading(false); }
-  }
+    } catch (e) { 
+      setError(e); 
+    } finally { 
+      setLoading(false); 
+    }
+  }, [loading]);
+
+  useEffect(() => {
+    fetchSummary();
+  }, []);
 
   const global = summary?.Global;
   const countries = summary?.Countries || [];
   const selected = countries.find(c => c.Slug === country);
 
   return (
     <div>
+      <div style={{ display: 'flex', alignItems: 'center', gap: '1rem', flexWrap: 'wrap' }}>
       <h2>COVID-19 Tracker</h2>
-      {loading && <Loading />}
+      <button onClick={fetchSummary} disabled={loading}>
+    {loading ? 'Refreshing...' : 'Refresh'}
+      </button>
+    </div>
+      {loading && !summary && <Loading />}
       <ErrorMessage error={error} />
       {global && (
         <Card title="Global Stats">

src/pages/Space.jsx

@@ -2,7 +2,7 @@
  * SPACE & ASTRONOMY DASHBOARD TODOs
  * ---------------------------------
  * Easy:
- *  - [ ] Refresh button / auto-refresh interval selector
+ *  - [x] Refresh button / auto-refresh interval selector
  *  - [ ] Show last updated timestamp
  *  - [ ] Style astronauts list with craft grouping
  *  - [ ] Add loading skeleton or placeholder map area
@@ -21,18 +21,21 @@ import { useEffect, useState } from 'react';
 import Loading from '../components/Loading.jsx';
 import ErrorMessage from '../components/ErrorMessage.jsx';
 import Card from '../components/Card.jsx';
+import IssMap from '../components/IssMap.jsx';
+import DashboardControls from "../components/DashboardControls.jsx";
 
 export default function Space() {
   const [iss, setIss] = useState(null);
   const [crew, setCrew] = useState([]);
   const [error, setError] = useState(null);
   const [loading, setLoading] = useState(false);
-
-  useEffect(() => { fetchData(); }, []);
-
+  const [lastUpdated, setLastUpdated] = useState(null);
+  
+  // Fetch both ISS position + crew
   async function fetchData() {
     try {
-      setLoading(true); setError(null);
+      setLoading(true);
+      setError(null);
       const [issRes, crewRes] = await Promise.all([
         fetch('http://api.open-notify.org/iss-now.json'),
         fetch('http://api.open-notify.org/astros.json')
@@ -42,24 +45,42 @@ export default function Space() {
       const crewJson = await crewRes.json();
       setIss(issJson);
       setCrew(crewJson.people || []);
-    } catch (e) { setError(e); } finally { setLoading(false); }
+      setLastUpdated(new Date());
+    } catch (e) {
+      setError(e);
+    } finally {
+      setLoading(false);
+    }
   }
 
+  useEffect(() => {
+    fetchData();
+  }, []);
+  
+  //leaflet map component
   return (
     <div>
       <h2>Space & Astronomy</h2>
+      <DashboardControls onRefresh={fetchData} />
       {loading && <Loading />}
       <ErrorMessage error={error} />
       {iss && (
         <Card title="ISS Current Location">
           <p>Latitude: {iss.iss_position.latitude}</p>
           <p>Longitude: {iss.iss_position.longitude}</p>
-          {/* TODO: Render map (Leaflet) with marker for ISS position */}
+          {lastUpdated && (
+            <p style={{ fontSize: '0.8rem', color: '#666' }}>
+              Last updated: {lastUpdated.toLocaleTimeString()}
+            </p>
+          )}
+          <IssMap latitude={iss.iss_position.latitude} longitude={iss.iss_position.longitude} />
         </Card>
       )}
       <Card title={`Astronauts in Space (${crew.length})`}>
         <ul>
-          {crew.map(p => <li key={p.name}>{p.name} — {p.craft}</li>)}
+          {crew.map(p => (
+            <li key={p.name}>{p.name} — {p.craft}</li>
+          ))}
         </ul>
       </Card>
       {/* TODO: Add next ISS pass prediction form */}