Add GitHub organization search feature GitHub org search feature

package.json

@@ -11,7 +11,8 @@
   },
   "dependencies": {
     "react": "^19.2.0",
-    "react-dom": "^19.2.0"
+    "react-dom": "^19.2.0",
+    "react-router-dom": "^7.15.0"
   },
   "devDependencies": {
     "@eslint/js": "^9.39.1",

src/App.css

@@ -1,6 +1,84 @@
 #root {
-  max-width: 1280px;
-  margin: 0 auto;
-  padding: 2rem;
+  width: 100%;
+}
+
+.app-container {
+  min-height: 100vh;
+  min-height: 100dvh;
+
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+
+  padding: 40px;
+
+  background-color: #111;
+  color: white;
+}
+
+.app-container h1 {
+  margin-bottom: 30px;
+  font-size: 3rem;
+}
+
+form {
+  display: flex;
+  gap: 12px;
+  margin-bottom: 30px;
+}
+
+input {
+  padding: 12px;
+  width: 300px;
+
+  border: none;
+  border-radius: 10px;
+
+  font-size: 16px;
+}
+
+button {
+  padding: 12px 20px;
+
+  border: none;
+  border-radius: 10px;
+
+  cursor: pointer;
+
+  font-size: 16px;
+  font-weight: bold;
+}
+
+.org-card {
+  max-width: 500px;
+
+  padding: 30px;
+
+  border-radius: 16px;
+
+  background-color: #1d1d1d;
+
   text-align: center;
+}
+
+.org-card img {
+  border-radius: 50%;
+  margin-bottom: 20px;
+}
+
+.org-card h2 {
+  margin-bottom: 10px;
+}
+
+.org-card p {
+  margin-bottom: 12px;
+}
+
+.org-card a {
+  color: #4ea1ff;
+  text-decoration: none;
+}
+
+.org-card a:hover {
+  text-decoration: underline;
 }

src/App.tsx

@@ -1,12 +1,53 @@
+import { useState } from 'react'
+
 import './App.css'
 
+import OrgCard from './components/orgcard'
+import SearchBar from './components/serachbar'
+
+import { fetchOrganization } from './services/githubapi'
+
+import type { GitHubOrg } from './types/github'
+
 function App() {
+  const [organization, setOrganization] =
+    useState<GitHubOrg | null>(null)
+
+  const [loading, setLoading] = useState(false)
+
+  const [error, setError] = useState('')
+
+  async function handleSearch(orgName: string) {
+    try {
+      setLoading(true)
+      setError('')
+
+      const data = await fetchOrganization(orgName)
+
+      setOrganization(data)
+    } catch {
+      setOrganization(null)
+      setError('Organization not found')
+    } finally {
+      setLoading(false)
+    }
+  }
 
   return (
-    <>
-      <h1>Hello, OrgExplorer!</h1>
-    </>
+    <div className="app-container">
+      <h1>OrgExplorer</h1>
+
+      <SearchBar onSearch={handleSearch} />
+
+      {loading && <p>Loading...</p>}
+
+      {error && <p>{error}</p>}
+
+      {organization && (
+        <OrgCard organization={organization} />
+      )}
+    </div>
   )
 }
 
-export default App
+export default App

src/components/orgcard.tsx

@@ -0,0 +1,35 @@
+import type { GitHubOrg } from '../types/github'
+
+interface OrgCardProps {
+  organization: GitHubOrg
+}
+
+function OrgCard({ organization }: OrgCardProps) {
+  return (
+    <div className="org-card">
+      <img
+        src={organization.avatar_url}
+        alt={organization.login}
+        width={120}
+      />
+
+      <h2>{organization.login}</h2>
+
+      <p>{organization.description}</p>
+
+      <p>Followers: {organization.followers}</p>
+
+      <p>Public Repositories: {organization.public_repos}</p>
+
+      <a
+        href={organization.html_url}
+        target="_blank"
+        rel="noreferrer"
+      >
+        Visit GitHub Profile
+      </a>
+    </div>
+  )
+}
+
+export default OrgCard