Skip to content

Commit 59ccee6

Browse files
itzabhinavaryaitzabhinavarya
committed
adding to github
1 parent 95112a9 commit 59ccee6

File tree

12 files changed

+270
-60
lines changed

12 files changed

+270
-60
lines changed

‎package-lock.json‎

Lines changed: 41 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,8 +6,10 @@
66
"@testing-library/jest-dom": "^5.17.0",
77
"@testing-library/react": "^13.4.0",
88
"@testing-library/user-event": "^13.5.0",
9+
"axios": "^1.6.0",
910
"react": "^18.2.0",
1011
"react-dom": "^18.2.0",
12+
"react-icons": "^4.11.0",
1113
"react-scripts": "5.0.1",
1214
"web-vitals": "^2.1.4"
1315
},
@@ -34,5 +36,8 @@
3436
"last 1 firefox version",
3537
"last 1 safari version"
3638
]
39+
},
40+
"devDependencies": {
41+
"tailwindcss": "^3.3.5"
3742
}
3843
}

‎public/index.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@
2424
work correctly both with client-side routing and a non-root public URL.
2525
Learn how to configure a non-root public URL by running `npm run build`.
2626
-->
27-
<title>React App</title>
27+
<title>DevFinder</title>
2828
</head>
2929
<body>
3030
<noscript>You need to enable JavaScript to run this app.</noscript>

‎src/App.css‎

Lines changed: 0 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -1,38 +0,0 @@
1-
.App {
2-
text-align: center;
3-
}
4-
5-
.App-logo {
6-
height: 40vmin;
7-
pointer-events: none;
8-
}
9-
10-
@media (prefers-reduced-motion: no-preference) {
11-
.App-logo {
12-
animation: App-logo-spin infinite 20s linear;
13-
}
14-
}
15-
16-
.App-header {
17-
background-color: #282c34;
18-
min-height: 100vh;
19-
display: flex;
20-
flex-direction: column;
21-
align-items: center;
22-
justify-content: center;
23-
font-size: calc(10px + 2vmin);
24-
color: white;
25-
}
26-
27-
.App-link {
28-
color: #61dafb;
29-
}
30-
31-
@keyframes App-logo-spin {
32-
from {
33-
transform: rotate(0deg);
34-
}
35-
to {
36-
transform: rotate(360deg);
37-
}
38-
}

‎src/App.js‎

Lines changed: 5 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,11 @@
1-
import logo from './logo.svg';
2-
import './App.css';
3-
1+
import "./App.css";
2+
import Homepage from "./component/Homepage";
3+
import Footer from "./component/footer";
44
function App() {
55
return (
66
<div className="App">
7-
<header className="App-header">
8-
<img src={logo} className="App-logo" alt="logo" />
9-
<p>
10-
Edit <code>src/App.js</code> and save to reload.
11-
</p>
12-
<a
13-
className="App-link"
14-
href="https://reactjs.org"
15-
target="_blank"
16-
rel="noopener noreferrer"
17-
>
18-
Learn React
19-
</a>
20-
</header>
7+
<Homepage />
8+
<Footer />
219
</div>
2210
);
2311
}

‎src/FetchData.jsx‎

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
import React, { useEffect, useState } from "react";
2+
import axios from "axios";
3+
// https://api.github.com/users/
4+
const FetchData = () => {
5+
const [githubData, setGithubData] = useState([]);
6+
const [userName, setUserName] = useState("");
7+
const [user, setUser] = useState("");
8+
9+
useEffect(() => {
10+
if (user) {
11+
axios
12+
.get(`https://api.github.com/users/${user}`)
13+
.then((res) => {
14+
setGithubData(res.data);
15+
})
16+
.catch(() => {
17+
console.log("Error occured");
18+
});
19+
}
20+
}, [user]);
21+
22+
const setTextData = () => {
23+
setUser(userName);
24+
};
25+
26+
return (
27+
<>
28+
<input
29+
type="text"
30+
value={userName}
31+
onChange={(e) => {
32+
setUserName(e.target.value);
33+
}}
34+
/>
35+
<button onClick={setTextData}>Get Result</button>
36+
<p>You have Searched for : {user}</p>
37+
<div className="data">
38+
<p>{githubData.name}</p>
39+
<p>{githubData.bio}</p>
40+
<p>{githubData.followers}</p>
41+
<p>{githubData.following}</p>
42+
<p>{githubData.twitter_username}</p>
43+
<p>{githubData.blog}</p>
44+
</div>
45+
</>
46+
);
47+
};
48+
49+
export default FetchData;

‎src/component/Homepage.jsx‎

Lines changed: 119 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,119 @@
1+
/* eslint-disable jsx-a11y/anchor-is-valid */
2+
import React, { useEffect, useState } from "react";
3+
import { FaXTwitter } from "react-icons/fa6";
4+
import { BsGlobe2 } from "react-icons/bs";
5+
import { AiOutlineGithub } from "react-icons/ai";
6+
import axios from "axios";
7+
8+
const Homepage = () => {
9+
const [inputSearch, setInputSearch] = useState("");
10+
const [user, setUser] = useState("");
11+
const [gitHubUser, setGithubUser] = useState([]);
12+
13+
useEffect(() => {
14+
if (user) {
15+
axios
16+
.get(`https://api.github.com/users/${user}`)
17+
.then((res) => {
18+
setGithubUser(res.data);
19+
})
20+
.catch(() => {
21+
console.log("Some error occured");
22+
});
23+
}
24+
}, [user]);
25+
26+
var JoinedDate = new Date(gitHubUser.created_at)
27+
.toLocaleDateString("en-GB", {
28+
day: "numeric",
29+
month: "short",
30+
year: "numeric",
31+
})
32+
.split(" ")
33+
.join(" ");
34+
35+
return (
36+
<>
37+
<div className="">
38+
<div className="pt-2">
39+
<div className="flex justify-center py-5">
40+
<h2 className="text-3xl font-bold">DevFinder</h2>
41+
</div>
42+
<div className="flex justify-center items-center gap-3">
43+
<input
44+
type="text"
45+
value={inputSearch}
46+
onChange={(e) => {
47+
setInputSearch(e.target.value);
48+
}}
49+
placeholder="Enter your Github Username"
50+
className="p-3 w-1/2 rounded-lg border hover:border hover:border-indigo-950 transition"
51+
/>
52+
<button
53+
type="button"
54+
onClick={() => {
55+
setUser(inputSearch);
56+
}}
57+
className="flex py-3 px-6 tracking-wide rounded-lg bg-indigo-950 text-white font-semibold"
58+
>
59+
Search
60+
</button>
61+
</div>
62+
</div>
63+
{user &&(
64+
<div className="flex justify-center mt-6">
65+
<div className="bg-white-500 shadow-md flex rounded-lg w-3/5">
66+
<div className="flex justify-center items-center p-5 border border-l-0 border-t-0 border-b-0 border-r-stone-400 ">
67+
<img
68+
src={gitHubUser.avatar_url}
69+
alt=""
70+
className="w-56 rounded-full cursor-pointer"
71+
/>
72+
</div>
73+
<div className="p-5 w-full">
74+
<div className="flex items-center justify-between">
75+
<h2 className="font-semibold text-xl">{gitHubUser.name}</h2>
76+
<p className="text-gray-400">
77+
Joined {JoinedDate}
78+
</p>
79+
</div>
80+
<div className="flex justify-between items-center py-4">
81+
<h2 className="font-semibold">
82+
Repo : {gitHubUser.public_repos}
83+
</h2>
84+
<h2 className="font-semibold">
85+
Follower : {gitHubUser.followers}
86+
</h2>
87+
<h2 className="font-semibold">
88+
Following : {gitHubUser.following}
89+
</h2>
90+
</div>
91+
<div>
92+
<p>{gitHubUser.bio}</p>
93+
</div>
94+
<div className="flex py-4 gap-5 items-center">
95+
<a
96+
href={`https://twitter.com/${gitHubUser.twitter_username}`}
97+
>
98+
<FaXTwitter size="1.3rem" className="cursor-pointer" />
99+
</a>
100+
<a href={gitHubUser.blog}>
101+
<BsGlobe2 size="1.2rem" className="cursor-pointer" />
102+
</a>
103+
<a href={gitHubUser.html_url}>
104+
<AiOutlineGithub
105+
size="1.3rem"
106+
className="scale-110 cursor-pointer"
107+
/>
108+
</a>
109+
</div>
110+
</div>
111+
</div>
112+
</div>
113+
)}
114+
</div>
115+
</>
116+
);
117+
};
118+
119+
export default Homepage;

‎src/component/NotFound.jsx‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
import React from "react";
2+
3+
const NotFound = () => {
4+
return (
5+
<>
6+
<div className="absolute top-0 right-0">
7+
<h1>Github User Not Exist</h1>
8+
</div>
9+
</>
10+
);
11+
};
12+
13+
export default NotFound;

‎src/component/footer.jsx‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
import React from 'react'
2+
3+
const footer = () => {
4+
return (
5+
<>
6+
<div className="footer flex justify-center items-center absolute bottom-6 left-1/2">
7+
<p>Made with ❤️ by <span className='text-green-500 font-bold'>Abhinav Arya</span></p>
8+
</div>
9+
</>
10+
)
11+
}
12+
13+
export default footer

‎src/index.css‎

Lines changed: 13 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,22 @@
1+
@tailwind base;
2+
@tailwind components;
3+
@tailwind utilities;
4+
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700&display=swap");
5+
16
body {
27
margin: 0;
3-
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
4-
'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
5-
sans-serif;
8+
font-family: "poppins", -apple-system, BlinkMacSystemFont, "Segoe UI",
9+
"Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans",
10+
"Helvetica Neue", sans-serif;
611
-webkit-font-smoothing: antialiased;
712
-moz-osx-font-smoothing: grayscale;
813
}
914

1015
code {
11-
font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
16+
font-family: "poppins",source-code-pro, Menlo, Monaco, Consolas, "Courier New",
1217
monospace;
1318
}
19+
20+
.footer {
21+
transform: translate(-50%, 50%);
22+
}

0 commit comments

Comments
 (0)