Add GitHub organization search feature GitHub org search feature

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,58 @@
+import { useState } from 'react'
+
 import './App.css'
 
+import OrgCard from './components/orgcard'
+import SearchBar from "./components/searchbar";
+
+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 (error) {
+      setOrganization(null)
+
+      if (error instanceof Error) {
+        setError(error.message)
+      } else {
+        setError('Something went wrong')
+      }
+    } 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,38 @@
+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}
+        height={120}
+      />
+
+      <h2>{organization.login}</h2>
+
+      <p>
+        {organization.description ?? 'No description available'}
+      </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

src/components/searchbar.tsx

@@ -0,0 +1,35 @@
+import { useState } from 'react'
+
+interface SearchBarProps {
+  onSearch: (orgName: string) => void
+}
+
+function SearchBar({ onSearch }: SearchBarProps) {
+  const [input, setInput] = useState('')
+
+  function handleSubmit(event: React.FormEvent) {
+    event.preventDefault()
+
+    if (!input.trim()) {
+      return
+    }
+
+    onSearch(input)
+    setInput('')
+  }
+
+  return (
+    <form onSubmit={handleSubmit}>
+      <input
+        type="text"
+        placeholder="Enter GitHub organization"
+        value={input}
+        onChange={(event) => setInput(event.target.value)}
+      />
+
+      <button type="submit">Search</button>
+    </form>
+  )
+}
+
+export default SearchBar

src/index.css

@@ -1,15 +1,11 @@
-:root {
-  font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
-  line-height: 1.5;
-  font-weight: 400;
-
-  color-scheme: light dark;
-  color: rgba(255, 255, 255, 0.87);
-  background-color: #242424;
-
-  font-synthesis: none;
-  text-rendering: optimizeLegibility;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
 }
 
+body {
+  font-family: Arial, sans-serif;
+  background-color: #111;
+  color: white;
+}

src/main.tsx

@@ -1,10 +1,11 @@
 import { StrictMode } from 'react'
 import { createRoot } from 'react-dom/client'
+
 import './index.css'
 import App from './App.tsx'
 
 createRoot(document.getElementById('root')!).render(
   <StrictMode>
     <App />
   </StrictMode>,
-)
+)