Finish

package.json

@@ -10,12 +10,12 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "axios": "^1.8.4",
+    "axios": "^1.12.1",
     "lucide-react": "^0.501.0",
     "moment": "^2.30.1",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
-    "react-router-dom": "^7.5.1"
+    "react-router-dom": "^7.9.1"
   },
   "devDependencies": {
     "@eslint/js": "^9.22.0",

src/App.jsx

@@ -1,24 +1,30 @@
 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 Home from './pages/Home';
+import Navbar from './components/Navbar';
+import Projects from "./pages/Projects";
 import Footer from './components/Footer';
+import './styles/Navbar.css';
 import './styles/App.css';
 
 function App() {
   return (
     <Router>
-      <div className="app">
-        <Navbar />
-        <main className="main-content">
-         {/* TODO: Add react router dom routes here */}
-
-        </main>
+      <div className="App">
+        <Navbar /> 
+        <main className='main-content'>
+          <Routes>
+            <Route path="/" element={<Home />} />
+            <Route path="/projects" element={<Projects />} />
+          </Routes>
+          </main>
         <Footer />
-      </div>
+        </div>
+
     </Router>
   );
 }
 
-export default App;
+export default App;

src/components/Footer.jsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import { Heart, Github } from 'lucide-react';
+
 import '../styles/Footer.css';
 
 const Footer = () => {
@@ -10,7 +11,7 @@ const Footer = () => {
           Built with <Heart size={16} className="heart-icon" /> using React
         </p>
         <a
-          href="https://github.com/duraanali"
+          href="https://github.com/anshur970"
           target="_blank"
           rel="noopener noreferrer"
           className="github-link"

src/components/Navbar.jsx

@@ -1,9 +1,9 @@
 import React from 'react';
 
 // TODO: Import LINK from react router dom components
-import { useLocation } from 'react-router-dom'
+import { Link, useLocation } from 'react-router-dom'
 
-import { Github } from 'lucide-react';
+import { Github, Utensils } from 'lucide-react';
 import '../styles/Navbar.css';
 
 const Navbar = () => {
@@ -13,16 +13,19 @@ const Navbar = () => {
     <nav className="navbar">
       <div className="navbar-container">
         <Link to="/" className="navbar-logo">
-          <Github size={24} />
+          <Utensils size={24} />
           <span>DevSphere</span>
         </Link>
 
         <ul className="navbar-menu">
           <li className="navbar-item">
            {/* TODO: Add the home route here */}
+           <Link to="/" className='nav-link'>Home</Link>
+
           </li>
           <li className="navbar-item">
             {/* TODO: Add the projects route here */}
+            <Link to="/projects" className='nav-link'>Projects</Link>
           </li>
         </ul>
       </div>

src/components/ProjectCard.jsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import moment from 'moment';
+import { Link } from 'react-router-dom';
 import { Star, GitFork, Eye, Clock } from 'lucide-react';
 import '../styles/ProjectCard.css';
 

src/pages/Home.jsx

@@ -1,22 +1,42 @@
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect, } from 'react';
 import { Link } from 'react-router-dom';
+import moment from 'moment';
 
 // TODO: Import axios here
 
-import moment from 'moment';
+import axios from 'axios';
 import { Users, Star, GitBranch, MapPin, Calendar, ExternalLink } from 'lucide-react';
 import '../styles/Home.css';
 
-const Home = () => {
-  const [user, setUser] = useState(null);
-  const [loading, setLoading] = useState(true);
-  const [error, setError] = useState(null);
-
   // 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
+
+
+    function Home() {
+      const [user, setUser] = useState(null)
+      const [loading, setLoading] = useState(false)
+      const [error, setError] = useState(null)
+
+      useEffect( () => {
+        const fetchData =  async () => {
+          try {
+            setLoading(true)
+            const response = await axios.get("https://api.github.com/users/anshur970")
+            setUser(response.data)
+            setLoading(false)
+
+          } catch(error) {
+            setError(error)
+            console.log(error)
+          }
 
+        }
+        fetchData()
 
+      }, [])
+
 
+
   if (loading) {
     return <div className="loading">Loading profile data...</div>;
   }

src/pages/Projects.jsx

@@ -1,20 +1,42 @@
-import React, { useState, useEffect } from 'react';
-
+import React, { useState, useEffect, } from 'react';
+import { Link } from 'react-router-dom';
 // TODO: Import axios here
-
-
+import axios from 'axios';
+import { Users, Star, GitBranch, MapPin, Calendar, ExternalLink } from 'lucide-react';
 import ProjectCard from '../components/ProjectCard';
 import '../styles/Projects.css';
 
-const Projects = () => {
-  const [repos, setRepos] = useState([]);
-  const [loading, setLoading] = useState(true);
-  const [error, setError] = useState(null);
 
  // 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
 
 
+ function Projects() {
+      const [repos, setRepos] = useState([])
+      const [loading, setLoading] = useState(false)
+      const [error, setError] = useState(null)
+
+
+      useEffect(() => {
+        const fetchRepos =  async () => {
+          try {
+            setLoading(true);
+            const response = await axios.get("https://api.github.com/users/anshur970/repos?per_page=10&sort=updated")
+            setRepos(response.data)
+            setLoading(false)
+
+          } catch(error) {
+            setError(error)
+            console.log(error)
+          }
+
+        }
+        fetchRepos()
+
+      }, [])
+
+
+
 
   if (loading) {
     return <div className="loading">Loading repositories...</div>;