Spaces:

lljz66
/

playstore-scraper

Build error

App Files Files Community

user commited on Jun 9

Commit

f4a24ca

1 Parent(s): 23b5ac6

Replace with Next.js + shadcn frontend, no Gradio

Browse files

Files changed (8) hide show

Dockerfile +17 -7
README.md +5 -5
app.py +0 -18
frontend/app/layout.tsx +2 -2
frontend/app/page.tsx +72 -31
frontend/components/ui/button.tsx +1 -1
frontend/next.config.mjs +3 -1
frontend/package.json +1 -1

Dockerfile CHANGED Viewed

@@ -1,8 +1,18 @@
-FROM python:3.11-slim
 WORKDIR /app
-COPY backend/google_play_scraper/ ./google_play_scraper/
-COPY app.py .
-COPY backend/google_play_scraper/requirements.txt ./requirements.txt
-RUN pip install --no-cache-dir -r requirements.txt
-EXPOSE 7860
-CMD ["python", "app.py"]

+FROM node:18-alpine AS builder
 WORKDIR /app
+COPY frontend/package.json ./
+RUN npm install
+COPY frontend/ ./
+RUN npm run build
+FROM node:18-alpine AS runner
+WORKDIR /app
+ENV NODE_ENV=production
+COPY --from=builder /app/.next/standalone ./
+COPY --from=builder /app/.next/static ./.next/static
+COPY --from=builder /app/public ./public
+EXPOSE 3000
+ENV PORT=3000
+CMD ["node", "server.js"]

README.md CHANGED Viewed

@@ -3,17 +3,17 @@ title: PlayStore Scraper
 emoji: 🔍
 colorFrom: blue
 colorTo: green
-sdk: gradio
-app_file: app.py
 pinned: false
 private: true
 ---
 # PlayStore Scraper
-Search Google Play Store applications using the backend scraper.
 ## Structure
-- **backend/google_play_scraper/** - Python scraper library
-- **frontend/** - Next.js UI (coming soon)

 emoji: 🔍
 colorFrom: blue
 colorTo: green
+sdk: docker
+app_file: Dockerfile
 pinned: false
 private: true
 ---
 # PlayStore Scraper
+Search Google Play Store applications with a clean, modern UI.
 ## Structure
+- **backend/google_play_scraper/** - Python scraper library (empty, to be implemented)
+- **frontend/** - Next.js + shadcn/ui frontend

app.py DELETED Viewed

@@ -1,18 +0,0 @@
-import gradio as gr
-import sys
-import os
-sys.path.insert(0, os.path.join(os.path.dirname(__file__), "backend"))
-def search_apps(query):
-    return f"Searching for: {query}"
-demo = gr.Interface(
-    fn=search_apps,
-    inputs=gr.Textbox(label="App Name", placeholder="Enter app name..."),
-    outputs=gr.Textbox(label="Results"),
-    title="PlayStore Scraper",
-    description="Search Google Play Store applications"
-)
-demo.launch()

frontend/app/layout.tsx CHANGED Viewed

@@ -6,7 +6,7 @@ const inter = Inter({ subsets: ["latin"] });
 export const metadata: Metadata = {
   title: "PlayStore Scraper",
-  description: "Search Google Play Store apps",
 };
 export default function RootLayout({
@@ -15,7 +15,7 @@ export default function RootLayout({
   children: React.ReactNode;
 }>) {
   return (
-    <html lang="en">
       <body className={inter.className}>{children}</body>
     </html>
   );

 export const metadata: Metadata = {
   title: "PlayStore Scraper",
+  description: "Search Google Play Store applications",
 };
 export default function RootLayout({
   children: React.ReactNode;
 }>) {
   return (
+    <html lang="en" className="dark">
       <body className={inter.className}>{children}</body>
     </html>
   );

frontend/app/page.tsx CHANGED Viewed

@@ -1,57 +1,98 @@
 "use client";
 import { useState } from "react";
-import { Search } from "lucide-react";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
 export default function Home() {
   const [searchQuery, setSearchQuery] = useState("");
   const [isSearching, setIsSearching] = useState(false);
   const handleSearch = async () => {
     if (!searchQuery.trim()) return;
     setIsSearching(true);
-    console.log("Searching for:", searchQuery);
-    setTimeout(() => setIsSearching(false), 1000);
   };
   return (
-    <main className="min-h-screen bg-gradient-to-b from-slate-50 to-slate-100 dark:from-slate-900 dark:to-slate-800">
-      <div className="container mx-auto py-16 px-4">
         <div className="text-center mb-12">
-          <h1 className="text-4xl font-bold text-slate-900 dark:text-slate-50 mb-4">
             PlayStore Scraper
           </h1>
-          <p className="text-slate-600 dark:text-slate-400">
             Search and explore Google Play Store applications
           </p>
         </div>
-        <Card className="max-w-2xl mx-auto">
-          <CardHeader>
-            <CardTitle>Search Apps</CardTitle>
-            <CardDescription>
-              Enter an app name to search for available apps
-            </CardDescription>
-          </CardHeader>
-          <CardContent>
-            <div className="flex gap-2">
-              <Input
-                placeholder="Enter app name..."
-                value={searchQuery}
-                onChange={(e) => setSearchQuery(e.target.value)}
-                onKeyDown={(e) => e.key === "Enter" && handleSearch()}
-                className="flex-1"
-              />
-              <Button onClick={handleSearch} disabled={isSearching}>
-                <Search className="w-4 h-4 mr-2" />
-                {isSearching ? "Searching..." : "Search"}
-              </Button>
-            </div>
-          </CardContent>
-        </Card>
       </div>
     </main>
   );

 "use client";
 import { useState } from "react";
+import { Search, Loader2 } from "lucide-react";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 export default function Home() {
   const [searchQuery, setSearchQuery] = useState("");
   const [isSearching, setIsSearching] = useState(false);
+  const [results, setResults] = useState<any[]>([]);
+  const [hasSearched, setHasSearched] = useState(false);
   const handleSearch = async () => {
     if (!searchQuery.trim()) return;
     setIsSearching(true);
+    setHasSearched(true);
+    setTimeout(() => {
+      setResults([
+        { title: searchQuery, appId: "com.example.app", rating: 4.5, installs: "1,000,000+" },
+      ]);
+      setIsSearching(false);
+    }, 1000);
   };
   return (
+    <main className="min-h-screen bg-background text-foreground">
+      <div className="container mx-auto py-16 px-4 max-w-4xl">
         <div className="text-center mb-12">
+          <h1 className="text-4xl font-bold tracking-tight mb-4">
             PlayStore Scraper
           </h1>
+          <p className="text-muted-foreground text-lg">
             Search and explore Google Play Store applications
           </p>
         </div>
+        <div className="flex gap-3 mb-8">
+          <Input
+            placeholder="Enter app name or package ID..."
+            value={searchQuery}
+            onChange={(e) => setSearchQuery(e.target.value)}
+            onKeyDown={(e) => e.key === "Enter" && handleSearch()}
+            className="h-12 text-lg"
+          />
+          <Button
+            onClick={handleSearch}
+            disabled={isSearching}
+            size="lg"
+            className="h-12 px-8"
+          >
+            {isSearching ? (
+              <Loader2 className="h-5 w-5 animate-spin" />
+            ) : (
+              <Search className="h-5 w-5 mr-2" />
+            )}
+            Search
+          </Button>
+        </div>
+        {hasSearched && !isSearching && results.length === 0 && (
+          <div className="text-center text-muted-foreground py-12">
+            No results found. Try a different search term.
+          </div>
+        )}
+        {results.length > 0 && (
+          <div className="space-y-4">
+            {results.map((app, index) => (
+              <div
+                key={index}
+                className="p-4 rounded-lg border bg-card text-card-foreground shadow-sm hover:shadow-md transition-shadow cursor-pointer"
+              >
+                <div className="flex items-center justify-between">
+                  <div>
+                    <h3 className="font-semibold text-lg">{app.title}</h3>
+                    <p className="text-sm text-muted-foreground">{app.appId}</p>
+                  </div>
+                  <div className="text-right">
+                    <div className="flex items-center gap-1">
+                      <span className="text-yellow-500">★</span>
+                      <span className="font-medium">{app.rating}</span>
+                    </div>
+                    <p className="text-sm text-muted-foreground">{app.installs}</p>
+                  </div>
+                </div>
+              </div>
+            ))}
+          </div>
+        )}
+        <div className="mt-16 text-center text-sm text-muted-foreground">
+          <p>Enter an app name to search • Example: "Facebook" or "com.facebook.katana"</p>
+        </div>
       </div>
     </main>
   );

frontend/components/ui/button.tsx CHANGED Viewed

@@ -18,7 +18,7 @@ const buttonVariants = cva(
       size: {
         default: "h-10 px-4 py-2",
         sm: "h-9 rounded-md px-3",
-        lg: "h-11 rounded-md px-8",
         icon: "h-10 w-10",
       },
     },

       size: {
         default: "h-10 px-4 py-2",
         sm: "h-9 rounded-md px-3",
+        lg: "h-11 rounded-md px-8 text-base",
         icon: "h-10 w-10",
       },
     },

frontend/next.config.mjs CHANGED Viewed

@@ -1,4 +1,6 @@
 /** @type {import('next').NextConfig} */
-const nextConfig = {};
 export default nextConfig;

 /** @type {import('next').NextConfig} */
+const nextConfig = {
+  output: 'standalone',
+};
 export default nextConfig;

frontend/package.json CHANGED Viewed

@@ -27,4 +27,4 @@
     "postcss": "^8",
     "tailwindcss": "^3.4.1"
   }
-}

     "postcss": "^8",
     "tailwindcss": "^3.4.1"
   }
+}