Merge pull request #4 from Eric-Zhang-Developer/front-end-skeleton

Front End Skeleton

Author: Eric-Zhang-Developer

package-lock.json

@@ -9,19 +9,20 @@
     "lint": "next lint"
   },
   "dependencies": {
+    "next": "15.2.3",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
-    "next": "15.2.3"
+    "react-dropzone": "^14.3.8"
   },
   "devDependencies": {
-    "typescript": "^5",
+    "@eslint/eslintrc": "^3",
+    "@tailwindcss/postcss": "^4",
     "@types/node": "^20",
     "@types/react": "^19",
     "@types/react-dom": "^19",
-    "@tailwindcss/postcss": "^4",
-    "tailwindcss": "^4",
     "eslint": "^9",
     "eslint-config-next": "15.2.3",
-    "@eslint/eslintrc": "^3"
+    "tailwindcss": "^4",
+    "typescript": "^5"
   }
 }

package.json

@@ -12,12 +12,6 @@
   --font-mono: var(--font-geist-mono);
 }
 
-@media (prefers-color-scheme: dark) {
-  :root {
-    --background: #0a0a0a;
-    --foreground: #ededed;
-  }
-}
 
 body {
   background: var(--background);

src/app/globals.css

@@ -1,11 +1,27 @@
-export default function Home() {
-  return (
-    <main className="flex items-center justify-center">
-      <header className="text-4xl">
-        FollowDiff
-      </header>
+"use client"
+
+import Link from "next/link";
 
-    </main>
 
+export default function Home() {
+  return (
+    <div className="mx-auto container p-2">
+      <header className="text-3xl text-center mb-8">FollowDiff</header>
+      <main className="flex items-center justify-center flex-col gap-4">
+        <h1 className="text-2xl">Curious Who Doesn&apos;t Follow You Back?</h1>
+        <h2 className="text-xl text-center">Safely see your non-followers using your official Instagram data. Your files are processed right here in your browser and are never uploaded anywhere.</h2>
+        {/* Drop Zone */}
+        <div className="border-2 px-1/2 py-40 flex flex-col gap-8 items-center justify-center w-1/2">
+          Drag & drop your followers.json & following.json files here
+          <span>or</span>
+          <button className="border-1 p-2">Select Files</button>
+        </div>
+        <Link href="/tutorial" className="underline"> Don&apos;t have your files? Here&apos;s how to get them.</Link>
+      </main>
+      <footer className="fixed bottom-0 right-0 p-4">
+        Open Source & Privacy-First 
+      </footer>
+    </div>
   );
 }
+  

src/app/page.tsx

@@ -0,0 +1,10 @@
+import Link from "next/link"
+
+export default function Tutorial() {
+  return (
+    <main className="mx-auto container flex flex-col items-center">
+      <h1 className="text-xl">Tutorial Page</h1>
+      <Link href="/" className="text-lg bg-slate-300 p-4 border-2"> Go Back</Link>
+    </main>
+  );
+}