done

package.json

@@ -7,9 +7,11 @@
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^14.0.0",
     "@testing-library/user-event": "^14.4.3",
-    "axios": "^1.4.0",
+    "axios": "^1.7.3",
+    "bootstrap": "^5.3.3",
     "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react-dom": "^18.2.0",
+    "react-router-dom": "^6.26.0"
   },
   "scripts": {
     "dev": "vite",

src/App.jsx

@@ -1,9 +1,16 @@
-import "./App.css";
+import { Routes, Route } from "react-router-dom";
+import Navbar from "./components/Navbar";
+import HomePage from "./pages/HomePage";
+import CountryDetailsPage from "./pages/CountryDetailsPage";
 
 function App() {
   return (
     <div className="App">
-      <h1>LAB | React WikiCountries</h1>
+      <Navbar />
+      <Routes>
+        <Route path="/" element={<HomePage />} />
+        <Route path="/:countryId" element={<CountryDetailsPage />} />
+      </Routes>
     </div>
   );
 }

src/components/Navbar.jsx

@@ -1,3 +1,13 @@
-function Navbar() {}
+import React from "react";
+
+function Navbar() {
+  return (
+    <nav className="navbar navbar-light bg-light">
+      <div className="container">
+        <span className="navbar-brand mb-0 h1">WikiCountries</span>
+      </div>
+    </nav>
+  );
+}
 
 export default Navbar;

src/main.jsx

@@ -1,10 +1,13 @@
+import "bootstrap/dist/css/bootstrap.css";
 import React from "react";
 import ReactDOM from "react-dom/client";
-import App from "./App.jsx";
-import "./index.css";
+import App from "./App";
+import { BrowserRouter as Router } from "react-router-dom";
 
-ReactDOM.createRoot(document.getElementById("root")).render(
-  <React.StrictMode>
+const root = ReactDOM.createRoot(document.getElementById("root"));
+
+root.render(
+  <Router>
     <App />
-  </React.StrictMode>
+  </Router>
 );

src/pages/CountryDetailsPage.jsx

@@ -1,3 +1,40 @@
-function CountryDetails() {}
+import { useState, useEffect } from "react";
+import { useParams, Link } from "react-router-dom";
+import axios from "axios";
 
-export default CountryDetails;
+function CountryDetailsPage() {
+  const { countryId } = useParams();
+  const [country, setCountry] = useState(null);
+
+  useEffect(() => {
+    axios
+      .get(`https://ih-countries-api.herokuapp.com/countries/${countryId}`)
+      .then((response) => {
+        setCountry(response.data);
+      })
+      .catch((error) => console.error(error));
+  }, [countryId]);
+
+  if (!country) {
+    return <div>Loading...</div>;
+  }
+
+  return (
+    <div className="container">
+      <h1>Country Details</h1>
+      <h2>{country.name.common}</h2>
+      <p>Capital: {country.capital}</p>
+      <p>Area: {country.area} km²</p>
+      <p>Borders:</p>
+      <ul>
+        {country.borders.map((border) => (
+          <li key={border}>
+            <Link to={`/${border}`}>{border}</Link>
+          </li>
+        ))}
+      </ul>
+    </div>
+  );
+}
+
+export default CountryDetailsPage;

src/pages/HomePage.jsx

@@ -1,3 +1,40 @@
-function HomePage() {}
+import { useState, useEffect } from "react";
+import axios from "axios";
+import { Link } from "react-router-dom";
+
+function HomePage() {
+  const [countries, setCountries] = useState([]);
+
+  useEffect(() => {
+    axios
+      .get("https://ih-countries-api.herokuapp.com/countries")
+      .then((response) => {
+        setCountries(response.data);
+      })
+      .catch((error) => console.error(error));
+  }, []);
+
+  return (
+    <div className="container">
+      <h1>WikiCountries: Your Guide to the World</h1>
+      <div className="list-group">
+        {countries.map((country) => (
+          <Link
+            key={country.alpha3Code}
+            to={`/${country.alpha3Code}`}
+            className="list-group-item list-group-item-action"
+          >
+            <img
+              src={`https://flagcdn.com/16x12/${country.alpha2Code.toLowerCase()}.png`}
+              alt={`${country.name.common} flag`}
+              style={{ marginRight: "10px" }}
+            />
+            {country.name.common}
+          </Link>
+        ))}
+      </div>
+    </div>
+  );
+}
 
 export default HomePage;