Final solution

README.md

@@ -31,11 +31,14 @@ Here's the complete checklist of the concepts you'll be learning while doing thi
   - State (useState)
   - Integrate async call (useEffect)
 - Connect multiple components
-  - Lifting state
-  - Controlled vs Uncontrolled
-  - Dependencies in useEffect
+  - Getting input value (useRef)
+  - Error state on search form
   - Conditional render (loading state)
 - Multi page application
   - react-router & Link component
   - Custom hooks (reuse fetch)
-  - Integrate external libraries (mentor's choice)
+
+Extra:
+- Lifting state
+- Controlled vs Uncontrolled components
+- Integrate external libraries (mentor's choice)

package.json

@@ -9,7 +9,8 @@
   },
   "dependencies": {
     "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react-dom": "^18.2.0",
+    "react-router-dom": "^6.4.3"
   },
   "devDependencies": {
     "@vitejs/plugin-react": "^2.0.0",

src/HomePage.jsx

@@ -0,0 +1,48 @@
+import React, { useState, useEffect } from "react";
+
+import { fetchMostPopularRepos, searchReposByName } from "./service";
+
+import Header from "./components/Header";
+import SearchForm from "./components/SearchForm";
+import RepositoryCard from "./components/RepositoryCard";
+
+function HomePage() {
+  const [repositories, setRepositories] = useState([]);
+  const [isLoading, setIsLoading] = useState(false);
+
+  useEffect(() => {
+    setIsLoading(true);
+    fetchMostPopularRepos().then((data) => {
+      setRepositories(data);
+      setIsLoading(false);
+    });
+  }, []);
+
+  const onSearch = (searchTerm) => {
+    setIsLoading(true);
+    searchReposByName(searchTerm).then((data) => {
+      setRepositories(data);
+      setIsLoading(false);
+    });
+  };
+
+  return (
+    <>
+      <Header />
+      <main>
+        <SearchForm onSearch={onSearch} />
+        {isLoading ? (
+          <div>Loading...</div>
+        ) : (
+          <ul className="repo-cards">
+            {repositories.map((repository, index) => (
+              <RepositoryCard repository={repository} key={index} />
+            ))}
+          </ul>
+        )}
+      </main>
+    </>
+  );
+}
+
+export default HomePage;

src/RepoPage.jsx

@@ -0,0 +1,40 @@
+import React, { useState, useEffect } from "react";
+import { useParams } from "react-router-dom";
+
+import { fetchRepoDetails } from "./service";
+
+import Header from "./components/Header";
+
+function RepoPage() {
+  const { owner, repo } = useParams();
+
+  const [repository, setRepository] = useState([]);
+  const [isLoading, setIsLoading] = useState(false);
+
+  useEffect(() => {
+    setIsLoading(true);
+    fetchRepoDetails(owner, repo).then((data) => {
+      setRepository(data);
+      setIsLoading(false);
+    });
+  }, []);
+
+  return (
+    <>
+      <Header />
+
+      <main>
+        {isLoading ? (
+          <div>Loading...</div>
+        ) : (
+          <>
+            <h1>{repository.name}</h1>
+            <p>{repository.description}</p>
+          </>
+        )}
+      </main>
+    </>
+  );
+}
+
+export default RepoPage;

src/components/Header.jsx

@@ -0,0 +1,16 @@
+import { Link } from "react-router-dom";
+
+function Header() {
+  return (
+    <header>
+      <div className="content-wrapper">
+        <h1>Welcome to the JSHeroes Bootcamp!</h1>
+      </div>
+      <Link to="/" className="bear-link">
+        <img className="bear" src="/js-heroes-bear.png" />
+      </Link>
+    </header>
+  );
+}
+
+export default Header;

src/components/RepositoryCard.jsx

@@ -0,0 +1,22 @@
+import React from "react";
+import { Link } from "react-router-dom";
+
+function RepositoryCard({ repository }) {
+  const { full_name, name, description, owner, stargazers_count, forks_count } =
+    repository;
+
+  return (
+    <li className="repo-card">
+      <Link to={`${owner.login}/${name}`}>
+        <span className="title">{full_name}</span>
+        <span className="description">{description}</span>
+        <section className="footer">
+          <div>Stars: {stargazers_count}</div>
+          <div>Forks: {forks_count}</div>
+        </section>
+      </Link>
+    </li>
+  );
+}
+
+export default RepositoryCard;

src/components/SearchForm.jsx

@@ -0,0 +1,27 @@
+import React, { useRef, useState } from "react";
+
+function SearchForm({ onSearch }) {
+  const inputRef = useRef(null);
+  const [error, setError] = useState(false);
+
+  const onSubmit = (event) => {
+    event.preventDefault();
+
+    const searchTerm = inputRef.current.value;
+    if (!searchTerm) {
+      setError(true);
+    } else {
+      onSearch(inputRef.current.value);
+      setError(false);
+    }
+  };
+
+  return (
+    <form className={`search-form ${error ? "error" : ""}`} onSubmit={onSubmit}>
+      <input className="input" name="search" ref={inputRef} />
+      <button className="button">Search</button>
+    </form>
+  );
+}
+
+export default SearchForm;

src/data.js

@@ -0,0 +1,14 @@
+export const repositories = [
+  {
+    title: "facebook/react",
+    description: "placeholder description",
+  },
+  {
+    title: "vuejs/vue",
+    description: "placeholder description",
+  },
+  {
+    title: "sveltejs/svelte",
+    description: "placeholder description",
+  },
+];

src/App.css → src/main.css

@@ -2,9 +2,11 @@
   --color-primary: #0b1b44;
   --color-background: #fff;
   --color-border: #bbb;
+
   --color-text: #202022;
   --color-accent: #0098ff;
   --color-accent-hover: #0b1b44;
+  --color-error: #b00;
 
   --font-family-base: system-ui, sans-serif;
   --font-family-display: "Ubuntu", sans-serif;
@@ -49,17 +51,25 @@ main {
   z-index: 1;
 }
 
-.bear {
+.bear-link {
   position: absolute;
   top: 0;
   left: 0;
   height: 100%;
+  z-index: 1;
+}
+
+.bear {
+  height: 100%;
 }
 
 @media (max-width: 1400px) {
-  .bear {
+  .bear-link {
     left: auto;
     right: 0;
+  }
+
+  .bear {
     transform: scaleX(-1);
   }
 }
@@ -106,6 +116,16 @@ main {
   border-radius: 0;
 }
 
+/* Error styles on Search Form */
+
+.error .input {
+  border-color: var(--color-error);
+}
+
+.error .button {
+  background: var(--color-error);
+}
+
 /* Repo card component styles */
 
 .repo-cards {
@@ -141,6 +161,11 @@ main {
   transform: scale(1.025);
 }
 
+.repo-card a {
+  color: inherit;
+  text-decoration: none;
+}
+
 .title {
   display: block;
   font-weight: 700;

src/main.jsx

@@ -1,10 +1,20 @@
 import React from "react";
 import ReactDOM from "react-dom/client";
-import App from "./App";
+import { BrowserRouter, Routes, Route } from "react-router-dom";
+
+import HomePage from "./HomePage";
+import RepoPage from "./RepoPage";
+
 import "./reset.css";
+import "./main.css";
 
 ReactDOM.createRoot(document.getElementById("root")).render(
   <React.StrictMode>
-    <App />
+    <BrowserRouter>
+      <Routes>
+        <Route path="/" element={<HomePage />} />
+        <Route path=":owner/:repo" element={<RepoPage />} />
+      </Routes>
+    </BrowserRouter>
   </React.StrictMode>
 );

src/service.js

@@ -0,0 +1,17 @@
+export const fetchMostPopularRepos = () => {
+  return fetch("https://api.github.com/search/repositories?q=stars:>10000")
+    .then((res) => res.json())
+    .then((res) => res.items);
+};
+
+export const searchReposByName = (name) => {
+  return fetch(`https://api.github.com/search/repositories?q=${name}`)
+    .then((res) => res.json())
+    .then((res) => res.items);
+};
+
+export const fetchRepoDetails = (owner, repo) => {
+  return fetch(`https://api.github.com/repos/${owner}/${repo}`).then((res) =>
+    res.json()
+  );
+};