diff --git a/index.html b/index.html
index 0c589ec..8768a46 100644
--- a/index.html
+++ b/index.html
@@ -4,7 +4,7 @@
- Vite + React
+ GitHub Project
diff --git a/src/App.jsx b/src/App.jsx
index f3deba0..1c52281 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -1,20 +1,28 @@
import React from 'react';
import Navbar from './components/Navbar';
+import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
+import Home from "./pages/Home";
+import Projects from "./pages/Projects";
-// TODO: Import react router dom here
+// TODO: Import react router dom here = done
import Footer from './components/Footer';
import './styles/App.css';
function App() {
return (
+
-
+
- {/* TODO: Add react router dom routes here */}
-
+
+ } />
+ } />
+
+ =
+
diff --git a/src/components/Navbar.jsx b/src/components/Navbar.jsx
index c371cae..502de0f 100644
--- a/src/components/Navbar.jsx
+++ b/src/components/Navbar.jsx
@@ -1,4 +1,5 @@
import React from 'react';
+import {Link} from "react-router-dom";
// TODO: Import LINK from react router dom components
import { useLocation } from 'react-router-dom'
@@ -19,9 +20,11 @@ const Navbar = () => {
-
+ Home
{/* TODO: Add the home route here */}
-
+ Projects
{/* TODO: Add the projects route here */}
diff --git a/src/pages/Home.jsx b/src/pages/Home.jsx
index aaac8db..ef635b0 100644
--- a/src/pages/Home.jsx
+++ b/src/pages/Home.jsx
@@ -1,7 +1,8 @@
import React, { useState, useEffect } from 'react';
import { Link } from 'react-router-dom';
+import axios from "axios";
-// TODO: Import axios here
+// TODO: Import axios here = done
import moment from 'moment';
import { Users, Star, GitBranch, MapPin, Calendar, ExternalLink } from 'lucide-react';
@@ -13,9 +14,25 @@ const Home = () => {
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
-
+ // API: https://api.github.com/users/safiacodes
+useEffect (() => {
+ const fetchUser = async () => {
+ try {
+ setLoading(true);
+ await axios
+ .get ("https://api.github.com/users/safiyacodes")
+ .then ((response)=> {
+ setUser(response.data);
+ setLoading(false);
+ });
+ } catch (error){
+ console.log(error);
+ setLoading(false);
+ }
+ };
+ fetchUser();
+},[] );
if (loading) {
return Loading profile data...
;
diff --git a/src/pages/Projects.jsx b/src/pages/Projects.jsx
index def4d8a..bcd5f5a 100644
--- a/src/pages/Projects.jsx
+++ b/src/pages/Projects.jsx
@@ -1,8 +1,5 @@
import React, { useState, useEffect } from 'react';
-
-// TODO: Import axios here
-
-
+import axios from 'axios';
import ProjectCard from '../components/ProjectCard';
import '../styles/Projects.css';
@@ -11,10 +8,28 @@ const Projects = () => {
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
-
+ // 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/safiacodes/repos?per_page=10&sort=updated
+useEffect (() => {
+ const fetchUserProjects = async () => {
+ try {
+ setLoading(true);
+ setError(null);
+ const response = await axios.get("https://api.github.com/users/safiyacodes/repos?per_page=10&sort=updated");
+
+setRepos(response.data || []);
+ }
+ catch (error){
+ setError("Failed to load user. Please try again.");
+ console.error(error);
+ } finally {
+ setLoading (false);
+ }
+ };
+ fetchUserProjects();
+}, []);
if (loading) {
return Loading repositories...
;