Adding some react frontend to showcase app

catherine-serpapi · catherine-serpapi · commit 8db403eaa103 · 2026-01-13T10:57:52.000-08:00
diff --git a/google_contributors/src/App.jsx b/google_contributors/src/App.jsx
@@ -6,13 +6,25 @@ const API_KEY = import.meta.env.VITE_API_KEY
 
 const REVIEWS_PER_PAGE = 4
 
+function calculateDistance(lat1, lon1, lat2, lon2) {
+  const R = 6371 // Earth's radius in km
+  const dLat = (lat2 - lat1) * Math.PI / 180
+  const dLon = (lon2 - lon1) * Math.PI / 180
+  const a = Math.sin(dLat / 2) * Math.sin(dLat / 2) +
+            Math.cos(lat1 * Math.PI / 180) * Math.cos(lat2 * Math.PI / 180) *
+            Math.sin(dLon / 2) * Math.sin(dLon / 2)
+  const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a))
+  return R * c // Distance in km
+}
+
 function App() {
   const [reviews, setReviews] = useState([])
   const [sortBy, setSortBy] = useState('date')
   const [loading, setLoading] = useState(true)
   const [error, setError] = useState(null)
   const [contributorInfo, setContributorInfo] = useState(null)
   const [currentPage, setCurrentPage] = useState(1)
+  const [userLocation, setUserLocation] = useState(null)
 
   useEffect(() => {
     async function fetchReviews() {
@@ -39,6 +51,24 @@ function App() {
     fetchReviews()
   }, [])
 
+  useEffect(() => {
+    async function fetchUserLocation() {
+      try {
+        const response = await fetch('http://ip-api.com/json/')
+        if (response.ok) {
+          const data = await response.json()
+          if (data.status === 'success') {
+            setUserLocation({ lat: data.lat, lon: data.lon })
+          }
+        }
+      } catch (err) {
+        console.error('Failed to fetch user location:', err)
+      }
+    }
+
+    fetchUserLocation()
+  }, [])
+
   const parseDate = (dateStr) => {
     if (!dateStr) return 0
     const match = dateStr.match(/(\d+)\s+(day|week|month|year)s?\s+ago/)
@@ -50,10 +80,21 @@ function App() {
     return num * (multipliers[unit] || 1)
   }
 
+  const getDistance = (review) => {
+    if (!userLocation || !review.place_info?.gps_coordinates) {
+      return Infinity
+    }
+    const { latitude, longitude } = review.place_info.gps_coordinates
+    return calculateDistance(userLocation.lat, userLocation.lon, latitude, longitude)
+  }
+
   const sortedReviews = [...reviews].sort((a, b) => {
     if (sortBy === 'rating') {
       return (b.rating || 0) - (a.rating || 0)
     }
+    if (sortBy === 'distance') {
+      return getDistance(a) - getDistance(b)
+    }
     return parseDate(a.date) - parseDate(b.date)
   })
 
@@ -108,13 +149,14 @@ function App() {
           >
             <option value="date">Date</option>
             <option value="rating">Rating</option>
+            <option value="distance">Distance</option>
           </select>
         </div>
       </header>
 
       <main className="reviews-grid">
         {paginatedReviews.map((review, index) => (
-          <ReviewCard key={review.review_id || index} review={review} />
+          <ReviewCard key={review.review_id || index} review={review} distance={getDistance(review)} />
         ))}
       </main>
 
diff --git a/google_contributors/src/components/ReviewCard.css b/google_contributors/src/components/ReviewCard.css
@@ -100,11 +100,23 @@
   object-fit: cover;
 }
 
+.review-footer {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
 .review-date {
   margin: 0;
   font-size: 0.8rem;
   color: #888;
-  text-align: right;
+}
+
+.review-distance {
+  margin: 0;
+  font-size: 0.8rem;
+  color: #1a73e8;
+  font-weight: 500;
 }
 
 .image-modal {
diff --git a/google_contributors/src/components/ReviewCard.jsx b/google_contributors/src/components/ReviewCard.jsx
@@ -13,7 +13,7 @@ function StarRating({ rating }) {
   return <div className="star-rating">{stars}</div>
 }
 
-function ReviewCard({ review }) {
+function ReviewCard({ review, distance }) {
   const { place_info, snippet, rating, images, date } = review
   const displayImages = images?.slice(0, 2) || []
   const [expanded, setExpanded] = useState(false)
@@ -71,7 +71,12 @@ function ReviewCard({ review }) {
           </div>
         ))}
       </div>
-      <p className="review-date">{date}</p>
+      <div className="review-footer">
+        <p className="review-date">{date}</p>
+        {distance !== Infinity && (
+          <p className="review-distance">{distance.toFixed(1)} km away</p>
+        )}
+      </div>
 
       {enlargedImage && (
         <div className="image-modal" onClick={() => setEnlargedImage(null)}>
diff --git a/google_maps_contrib_reviews/index.js b/google_maps_contrib_reviews/index.js
@@ -0,0 +1,14 @@
+import dotenv from "dotenv";
+import { getJson } from "serpapi";
+import { colorize } from "json-colorizer";
+
+dotenv.config();
+const apiKey = process.env.API_KEY;
+
+const data = await getJson({
+    api_key: apiKey,
+    engine: "google_maps_contributor_reviews",
+    contributor_id: "114293782448752999823",
+})
+
+console.log(colorize(data))
diff --git a/google_maps_contrib_reviews/package-lock.json b/google_maps_contrib_reviews/package-lock.json
diff --git a/google_maps_contrib_reviews/package.json b/google_maps_contrib_reviews/package.json
@@ -0,0 +1,18 @@
+{
+  "name": "google_maps_contrib_reviews",
+  "version": "1.0.0",
+  "description": "",
+  "main": "index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "type": "module",
+  "dependencies": {
+    "dotenv": "^17.2.3",
+    "json-colorizer": "^3.0.1",
+    "serpapi": "^2.2.1"
+  }
+}
