Week12

package.json

@@ -10,7 +10,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "axios": "^1.8.4",
+    "axios": "^1.9.0",
     "lucide-react": "^0.501.0",
     "moment": "^2.30.1",
     "react": "^19.0.0",

src/App.jsx

@@ -2,9 +2,12 @@ import React from 'react';
 import Navbar from './components/Navbar';
 
 // TODO: Import react router dom here
+import {BrowserRouter as Router, Routes, Route} from 'react-router-dom';
 
 import Footer from './components/Footer';
 import './styles/App.css';
+import Home from './pages/Home';
+import Projects from './pages/Projects';
 
 function App() {
   return (
@@ -13,6 +16,10 @@ function App() {
         <Navbar />
         <main className="main-content">
          {/* TODO: Add react router dom routes here */}
+         <Routes>
+          <Route path='/' element={<Home/>}/>
+          <Route path='/projects' element={<Projects/>}/>
+         </Routes>
 
         </main>
         <Footer />

src/components/Navbar.jsx

@@ -1,8 +1,10 @@
 import React from 'react';
 
 // TODO: Import LINK from react router dom components
+import { Link } from 'react-router-dom';
 import { useLocation } from 'react-router-dom'
 
+
 import { Github } from 'lucide-react';
 import '../styles/Navbar.css';
 
@@ -20,9 +22,11 @@ const Navbar = () => {
         <ul className="navbar-menu">
           <li className="navbar-item">
            {/* TODO: Add the home route here */}
+           <Link to="/">Home</Link>
           </li>
           <li className="navbar-item">
             {/* TODO: Add the projects route here */}
+            <Link to="/projects">Projects</Link>
           </li>
         </ul>
       </div>

src/pages/Home.jsx

@@ -3,9 +3,12 @@ import { Link } from 'react-router-dom';
 
 // TODO: Import axios here
 
+
+
 import moment from 'moment';
 import { Users, Star, GitBranch, MapPin, Calendar, ExternalLink } from 'lucide-react';
 import '../styles/Home.css';
+import axios from 'axios';
 
 const Home = () => {
   const [user, setUser] = useState(null);
@@ -15,6 +18,26 @@ const Home = () => {
   // TODO: Fetch user data from GitHub API using axios and useEffect and set the user state, also handle the loading and error states
     // API: https://api.github.com/users/YOUR_USERNAME
 
+    useEffect(()=>{
+  const FetchUser= async()=>{
+    try{
+    setLoading(true)
+    const response = await axios.get("https://api.github.com/users/ikran123") 
+    setUser(response.data);
+
+
+    } catch (error){
+  setError("failed to fetch the user")
+  console.error(error);
+    } finally{
+      setLoading(false)
+    }
+  };
+  FetchUser();
+  }, []);
+
+
+
 
 
   if (loading) {

src/pages/Projects.jsx

@@ -1,6 +1,7 @@
 import React, { useState, useEffect } from 'react';
 
 // TODO: Import axios here
+import axios from 'axios';
 
 
 import ProjectCard from '../components/ProjectCard';
@@ -14,6 +15,26 @@ const Projects = () => {
  // TODO: Fetch repositories from GitHub API using axios and useEffect and set the repos state, also handle the loading and error states
  // API: https://api.github.com/users/YOUR_GITHUB_USERNAME/repos?per_page=10&sort=updated
 
+ useEffect(()=>{
+  const fetchRepos = async() =>{
+    try{
+      setLoading(true);
+      const response = await axios.get("https://api.github.com/users/ikran123/repos?per_page=10&sort=updated")
+      setRepos(response.data);
+    }catch (error){
+      setError('failed fetch error');
+      console.error(error);
+    }finally{
+    setLoading(false);
+    }
+  }
+  fetchRepos()
+
+ }, []);
+
+
+
+
 
 
   if (loading) {