Post not found
;
31 | }
32 |
33 | return (
34 |
35 |
43 | );
44 | };
45 |
46 | export default BlogPosts;
47 |
--------------------------------------------------------------------------------
/src/Pages/Faq.jsx:
--------------------------------------------------------------------------------
1 | import { useState } from 'react';
2 | import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
3 | import { faChevronDown } from '@fortawesome/free-solid-svg-icons';
4 | import '@fortawesome/fontawesome-svg-core/styles.css';
5 | import { config } from '@fortawesome/fontawesome-svg-core';
6 | config.autoAddCss = false;
7 |
8 | const faqData = [
9 | {
10 | question: "What is this platform about?",
11 | answer: "This platform (Githubstreak) is designed to help developers in any way as much as possible."
12 | },
13 | {
14 | question: "How do I get involved?",
15 | answer: "Joining Githubstreak is simple! On this our community website, signup with your Github account, and start your coding journey. Engage with solo projects, team projects, and contribute to open-source initiatives.."
16 | },
17 | {
18 | question: "What if I'm new to coding?",
19 | answer: "The Githubstreak community is inclusive and beginner-friendly. Our community values growth, and members at all skill levels are encouraged to participate. Ask questions, seek guidance, and learn alongside experienced developers."
20 | },
21 | {
22 | question: "What's the significance of the green boxes?",
23 | answer: "The green boxes represent your coding journey. They showcase your dedication to personal projects, teamwork, and open-source contributions. It's a visual representation of your progress and the collective achievements of the community."
24 | }
25 | ];
26 |
27 | const FAQ = () => {
28 | const [activeIndex, setActiveIndex] = useState(null);
29 |
30 | const toggleFAQ = (index) => {
31 | if (activeIndex === index) {
32 | setActiveIndex(null);
33 | } else {
34 | setActiveIndex(index);
35 | }
36 | };
37 |
38 | return (
39 |
36 |
42 | {post.title}
37 |{post.date}
38 |
39 |
41 | {post.content}
40 |
40 |
70 | );
71 | };
72 |
73 | export default FAQ;
--------------------------------------------------------------------------------
/src/Pages/Home.jsx:
--------------------------------------------------------------------------------
1 | import {
2 | Hero,
3 | Leaderboard,
4 | Topthree,
5 |
6 | CommunityLead,
7 | } from "../sections";
8 | import useGetLeaderboard from "../hooks/useGetLeaderboard";
9 | import { Fragment } from "react";
10 | import CompareButton from "../components/CompareButton";
11 |
12 | const Home = () => {
13 | const { leaderboard, topThree, isLoading } = useGetLeaderboard();
14 |
15 | return (
16 |
41 |
44 | Frequently Asked Questions
42 |Find answers to the most commonly asked questions below.
43 |
45 | {faqData.map((faq, index) => (
46 |
69 |
47 |
57 |
67 | ))}
68 |
62 |
66 | 63 | {faq.answer} 64 |
65 |
23 |
24 |
25 | ) : (
26 |
40 |
42 |
9 |
10 |
14 | )
15 | }
16 |
17 | export default LandingPage
18 |
19 |
20 |
--------------------------------------------------------------------------------
/src/Pages/Meme.jsx:
--------------------------------------------------------------------------------
1 | import { useEffect, useRef, useState } from "react";
2 | import "../App.css";
3 | import { LinneChart } from "../components/LinneChart";
4 | import MemeGenerator from "../components/MemeGenerator";
5 | import { GetGitHubInfo, GetProfileData } from "../APIs/GetProfileData";
6 | import { Container } from "../components/Container";
7 | // import { Header } from "../components/Header";
8 | import { ButtonArrow } from "../assets/buttonArrow";
9 | import { AnimatePresence, motion } from "framer-motion";
10 | import html2canvas from "html2canvas";
11 | import { Loader } from "../components/Loader";
12 | import { useSearchParams } from "react-router-dom";
13 |
14 | function Meme() {
15 | const [params, setParams]= useSearchParams()
16 | const [myUserName, setMyUserName] = useState(params.get("me"));
17 | const [comparerUserInput, setComparerUserInput] = useState(params.get("other"));
18 | const [myData, setMyData] = useState(null);
19 | const [comparerData, setComparerData] = useState(null);
20 | const [myName, setMyName] = useState("");
21 | const [myTotalContribution, setMyTotalContribution] = useState(0);
22 | const [comparertotalContri, setComparertotalContri] = useState(0);
23 | const [comparerName, setComparerName] = useState("");
24 | const [memeIndex, setMemeIndex] = useState(0);
25 | const [isLoading, setIsLoading] = useState(false);
26 | const [winner, setWinner] = useState(null);
27 | const [loser, setLoser] = useState(null);
28 | const [haveData, setHaveData] = useState(false);
29 | const [myError, setMyError] = useState("");
30 | const [comparerError, setComparerError] = useState("");
31 | const headingContainer = useRef(null)
32 | const containerRef = useRef(null);
33 |
34 |
35 | const handleSubmit = async (e) => {
36 | e.preventDefault();
37 |
38 | // Clear previous data
39 | setMyData(null);
40 | setComparerData(null);
41 |
42 | // Start loading
43 | setIsLoading(true);
44 |
45 | if(myUserName == comparerUserInput){
46 | setMyError("You can't compare to yourself :')")
47 | setIsLoading(false);
48 | return
49 | }
50 |
51 | params.set("me", myUserName )
52 | params.set("other", comparerUserInput)
53 |
54 | setParams(params)
55 |
56 | try {
57 | const [
58 | myProfileData,
59 | myGitHubInfo,
60 | comparerProfileData,
61 | comparerGitHubInfo,
62 | ] = await Promise.all([
63 | GetProfileData(myUserName),
64 | GetGitHubInfo(myUserName),
65 | GetProfileData(comparerUserInput),
66 | GetGitHubInfo(comparerUserInput),
67 | ]);
68 |
69 | setMyData(myProfileData);
70 | setMyName(myGitHubInfo?.name || myUserName);
71 | setComparerData(comparerProfileData);
72 | setComparerName(comparerGitHubInfo?.name || comparerUserInput);
73 | } catch (error) {
74 | if (error.response && error.response.status === 404) {
75 | if (error.config.url.includes(myUserName)) {
76 | setMyError("Username not found");
77 | } else if (error.config.url.includes(comparerUserInput)) {
78 | setComparerError("Comparer username not found");
79 | }
80 | } else {
81 | console.error("Error fetching data:", error);
82 | }
83 | } finally {
84 | setIsLoading(false);
85 | }
86 | };
87 |
88 | const getMemeIndex = (myContribution, comparerContribution) => {
89 | if (myContribution === 0 && comparerContribution === 0) {
90 | return 0;
91 | }
92 | const maxContribution = Math.max(myContribution, comparerContribution);
93 | const difference = Math.abs(myContribution - comparerContribution);
94 | const percentageDifference = (difference / maxContribution) * 100;
95 | const index = Math.floor(percentageDifference / 10);
96 | return Math.min(index, 9);
97 | };
98 |
99 | // const downloadImage = (e) => {
100 | // console.log(containerRef.current);
101 | // if (!containerRef.current && headingContainer.current) return;
102 |
103 | // if(isMobile) {
104 | // headingContainer.current.style.display = 'none'
105 | // }
106 | // e.currentTarget.style.display = "none";
107 | // html2canvas(containerRef.current, { backgroundColor: "#2b3137" })
108 | // .then((canvas) => {
109 | // const link = document.createElement("a");
110 | // link.href = canvas.toDataURL("image/png");
111 | // link.download = "github-compare.png";
112 | // link.click();
113 | // })
114 | // .catch((error) => {
115 | // console.error("Error capturing the image:", error);
116 | // })
117 | // .finally(() => {
118 |
119 | // });
120 | // e.currentTarget.style.display = "flex"
121 | // headingContainer.current.style.display = 'flex'
122 | // };
123 |
124 | useEffect(() => {
125 | if (myData && comparerData) {
126 | const arrOfMyContri = Object.values(myData.total);
127 | const arrOfComparerContri = Object.values(comparerData.total);
128 |
129 | const myTotalContribution = arrOfMyContri.reduce(
130 | (total, curVal) => total + curVal,
131 | 0
132 | );
133 | setMyTotalContribution(myTotalContribution);
134 |
135 | const comparerTotalContribution = arrOfComparerContri.reduce(
136 | (total, curVal) => total + curVal,
137 | 0
138 | );
139 | setComparertotalContri(comparerTotalContribution);
140 |
141 | const memeIndex = getMemeIndex(
142 | myTotalContribution,
143 | comparerTotalContribution
144 | );
145 | setMemeIndex(memeIndex);
146 | const myfirstName = myName.split(" ")[0];
147 | const comparerfirstName = comparerName.split(" ")[0];
148 |
149 | if (myTotalContribution > comparerTotalContribution) {
150 | setWinner(myfirstName);
151 | setLoser(comparerfirstName);
152 | } else {
153 | setWinner(comparerfirstName);
154 | setLoser(myfirstName);
155 | }
156 | setHaveData(true);
157 | }
158 | }, [myData, comparerData, myName, comparerName]);
159 |
160 | const transition = { duration: 1, ease: "easeInOut" };
161 |
162 | const [isMobile, setIsMobile] = useState(window.innerWidth <= 768);
163 | useEffect(() => {
164 | const handleResize = () => {
165 | setIsMobile(window.innerWidth <= 768);
166 | };
167 |
168 | window.addEventListener("resize", handleResize);
169 |
170 | return () => {
171 | window.removeEventListener("resize", handleResize);
172 | };
173 | }, []);
174 | const fontSize = haveData
175 | ? isMobile
176 | ? "34px"
177 | : "52px"
178 | : isMobile
179 | ? "44px"
180 | : "68px";
181 |
182 |
183 | // const clearDataCallBack = ()=> {
184 | // setMyData(null);
185 | // setMyName('');
186 | // setComparerData(null);
187 | // setComparerName('');
188 | // setHaveData(false);
189 | // setLoser(null);
190 | // setWinner(null);
191 | // setMyError('');
192 | // setComparerError('');
193 | // }
194 |
195 | return (
196 |
215 |
227 |
238 | GitHub Profile
{" "} 239 |
244 | Comparison
245 |
246 |
247 |
248 |
249 | {!haveData && (
250 |
263 |
310 | )}
311 |
312 |
313 |
314 | {myData && comparerData && (
315 |
322 |
382 | )}
383 |
384 |
385 | {" "} 239 |
264 | {myError && (
265 |
279 | 266 | {myError} 267 |
268 | )} 269 | setMyUserName(e.currentTarget.value)} 272 | placeholder="Your Username" 273 | required 274 | className={`border bg-white shadow-[0px_4px_50px_rgba(0,_255,_87,_0.5)] w-[294px] ${ 275 | myError ? " outline outline-red-500" : "" 276 | } py-3 px-4 text-[18px] rounded-full`} 277 | /> 278 |
280 | {isLoading ?
282 |
283 | {comparerError && (
284 |
298 | {comparerError}
285 | )} 286 | 289 | setComparerUserInput(e.currentTarget.value) 290 | } 291 | placeholder="Enter other persons username" 292 | required 293 | className={`border bg-white shadow-[0px_4px_50px_rgba(0,_255,_87,_0.5)] w-[294px] ${ 294 | comparerError ? " outline outline-red-500" : "" 295 | } py-3 px-4 text-[18px] rounded-full`} 296 | /> 297 |
299 |
308 |
309 |
323 |
354 |
329 |
352 |
353 |
330 |
331 |
340 |
332 |
339 | 333 | {myName} 334 |
335 |336 | Total Contribution : {myTotalContribution} 337 |
338 |
341 |
342 |
351 |
343 |
350 | 344 | {comparerName} 345 |
346 |347 | Total Contribution : {comparertotalContri} 348 |
349 |
355 | {/* 
*/}
356 |
381 |
357 | {winner && loser && (
358 |
366 | {/* Meme
*/}
367 | {/*
368 |
379 |
*/}
380 |
27 |
45 | }
46 |
47 |
48 |
49 |
50 |
51 |
52 |
53 |
54 |
55 |
56 |
57 | );
58 | }
59 |
60 | export default Project
--------------------------------------------------------------------------------
/src/Pages/ProjectDetail.jsx:
--------------------------------------------------------------------------------
1 | // import React, { useState, useEffect } from 'react';
2 | // import { useParams } from 'react-router-dom';
3 |
4 | // function ProjectDetail(prop) {
5 | // const { projectId } = useParams();
6 | // const [project, setProject] = useState(null);
7 |
8 | // const sampleProjects = [
9 | // {
10 | // id: 1,
11 | // title: 'Build a Personal Portfolio',
12 | // description: 'Create a responsive personal portfolio to showcase projects.',
13 | // progress: 75,
14 | // github: 'https://github.com/sample-user',
15 | // username: 'sample-user',
16 | // developer: 'John Doe',
17 | // },
18 | // {
19 | // id: 2,
20 | // title: 'E-Commerce Website',
21 | // description: 'Develop a fully functional e-commerce site with a shopping cart.',
22 | // progress: 40,
23 | // github: 'https://github.com/sample-user',
24 | // username: 'sample-user',
25 | // developer: 'Jane Smith',
26 | // },
27 | // ];
28 |
29 | // // const project = sampleProjects.find((proj) => proj.id === parseInt(projectId));
30 |
31 |
32 | // useEffect(() => {
33 | // // Fetch project details using the projectId
34 | // const fetchProject = async () => {
35 | // try {
36 | // const response = await fetch(`/api/solo-projects/${projectId}`);
37 | // const data = await response.json();
38 | // setProject(data);
39 | // } catch (error) {
40 | // console.error('Error fetching project details:', error);
41 | // }
42 | // };
43 |
44 | // fetchProject();
45 | // }, [projectId]);
46 |
47 | // if (!project) return
28 |
40 |
41 | {/* Modal */}
42 |
43 | {
44 | isOpen &&
29 | {cards.map((card, index) => (
30 |
33 | {/* Floating Action Button */}
34 |
39 | Loading...
; 48 | 49 | // return ( 50 | //
51 | //
67 | // );
68 | // }
69 |
70 | // export default ProjectDetail;
71 |
--------------------------------------------------------------------------------
/src/Pages/ProjectIdea.jsx:
--------------------------------------------------------------------------------
1 | import React, { useState, useEffect } from 'react';
2 | import ReactPaginate from 'react-paginate';
3 |
4 | const ProjectIdea = () => {
5 | const [ideas, setIdeas] = useState([]);
6 | const [currentPage, setCurrentPage] = useState(0);
7 | const itemsPerPage = 6;
8 |
9 | useEffect(() => {
10 | fetchIdeas();
11 | }, []);
12 |
13 | const fetchIdeas = async () => {
14 | try {
15 | const response = await fetch('/api/project-ideas'); // Replace with your actual API endpoint
16 | const data = await response.json();
17 | setIdeas(data);
18 | } catch (error) {
19 | console.error('Error fetching project ideas:', error);
20 | }
21 | };
22 |
23 | const handlePageClick = ({ selected }) => {
24 | setCurrentPage(selected);
25 | };
26 |
27 | const offset = currentPage * itemsPerPage;
28 | const currentItems = ideas.slice(offset, offset + itemsPerPage);
29 | const pageCount = Math.ceil(ideas.length / itemsPerPage);
30 |
31 | return (
32 | {project.title}
52 | //{project.description}
53 | //
54 | // {/* Action buttons */}
55 | //
56 | //
57 | //
63 | // View Developer's GitHub Profile
64 | //
65 | //
66 | //
33 |
77 | );
78 | };
79 |
80 | export default ProjectIdea;
81 |
--------------------------------------------------------------------------------
/src/Pages/mentorship.jsx:
--------------------------------------------------------------------------------
1 | import Mentorship from '../components/Mentorship';
2 |
3 | const MentorshipPage = () => {
4 | return
34 |
37 | Project Ideas
35 |Explore various project ideas and their current status.
36 |
38 | {currentItems.map((project) => (
39 |
58 |
43 |
56 | ))}
57 |
44 |
55 | {project.title}
45 |{project.description}
46 |Client: {project.client}
47 |52 | Status: {project.status} 53 |
54 |
59 |
76 |
7 | //
40 | // );
41 | // };
42 |
43 | // export default Card;
--------------------------------------------------------------------------------
/src/components/CompareButton.jsx:
--------------------------------------------------------------------------------
1 | import { FaArrowRight } from "react-icons/fa";
2 | import { useNavigate } from 'react-router-dom';
3 |
4 | import meme from '../assets/meme.png';
5 |
6 | const CompareButton = () => {
7 | const navigate = useNavigate();
8 | return (
9 |
8 | //
24 |
25 | //
9 | // 
14 | //
19 | //
15 | //
18 | // {author.name}
16 | //{author.role}
17 | //
20 | // {points}
21 | //
23 | //
26 | //
29 |
30 | // {title}
27 | //{description}
28 | //
31 | //
39 | //
32 | //
36 | //
37 | // {progress}% complete
38 | //navigate('/meme')} className='cursor-pointer hover:scale-105 transition-all duration-500 flex items-center gap-2 p-1 px-5 bg-gradient-to-r from-violet-700 to-fuchsia-500 rounded-full'>
10 | 
11 | Compare Github
12 |
14 | )
15 | }
16 |
17 | export default CompareButton;
--------------------------------------------------------------------------------
/src/components/Container.jsx:
--------------------------------------------------------------------------------
1 |
2 | // eslint-disable-next-line react/prop-types
3 | export function Container({ children, className = "" }) {
4 | return (
5 |
6 | {children}
7 |
8 | );
9 | }
--------------------------------------------------------------------------------
/src/components/InputText.jsx:
--------------------------------------------------------------------------------
1 | /* eslint-disable react/prop-types */
2 | import React, { useId } from 'react'
3 |
4 | const InputText = React.forwardRef(function InputText({
5 |
6 | label,
7 | type = "text",
8 | className = "",
9 | ...props
10 | }, ref){
11 | const id = useId()
12 | return (
13 |
14 | {label &&
19 | }
20 |
27 |
28 | )
29 | })
30 |
31 | export default InputText
--------------------------------------------------------------------------------
/src/components/LinneChart.jsx:
--------------------------------------------------------------------------------
1 | /* eslint-disable react/prop-types */
2 | import { Line } from "react-chartjs-2";
3 | import { Chart as ChartJS, CategoryScale, LinearScale, BarElement, PointElement, LineElement, Tooltip } from "chart.js";
4 | import { useEffect, useState } from "react";
5 |
6 | ChartJS.register(CategoryScale,LinearScale,BarElement, PointElement, LineElement, Tooltip )
7 |
8 |
9 | export function LinneChart({myData, comparerData, userNames}) {
10 |
11 |
12 | const [myContributions, setMyContributions] = useState(Object.values(myData));
13 | const [comparerContributions, setComparerContributions] = useState(Object.values(comparerData));
14 | const getUserYearsforLabel = (myData, comparerData) => {
15 | const myYears = Object.keys(myData);
16 | const comparerYears = Object.keys(comparerData);
17 | if(myYears.length > comparerYears.length){
18 | return myYears
19 | }else {
20 | return comparerYears
21 | }
22 | }
23 | const mainLabel = getUserYearsforLabel(myData, comparerData)
24 |
25 | useEffect(() => {
26 | const maxLength = Math.max(myContributions.length, comparerContributions.length);
27 |
28 | // Function to pad an array with null at the start
29 | const padArray = (arr, length) => {
30 | const padding = Array(length - arr.length).fill(null);
31 | return [...padding, ...arr];
32 | };
33 |
34 | if (myContributions.length < maxLength) {
35 | setMyContributions(padArray(myContributions, maxLength));
36 | }
37 |
38 | if (comparerContributions.length < maxLength) {
39 | setComparerContributions(padArray(comparerContributions, maxLength));
40 | }
41 | }, []);
42 |
43 | const LINECHART_DATA = {
44 | labels: mainLabel,
45 | datasets: [
46 | { label: userNames.myname,
47 | data: myContributions,
48 | borderColor: '#63FF60',
49 | pointBackgroundColor: '#fff',
50 | pointBorderColor: '#fff',
51 | pointWidth: 5,
52 | pointRadius: 5,
53 | borderWidth: 4
54 | },
55 | { label: userNames.comparerName,
56 | data: comparerContributions,
57 | borderColor: '#FFE55B',
58 | pointBackgroundColor: '#fff',
59 | pointBorderColor: '#fff',
60 | pointWidth: 5,
61 | pointRadius: 5,
62 | borderWidth: 4
63 | },
64 | ],
65 |
66 | }
67 |
68 | const options = {
69 | scales: {
70 | x: {
71 | grid: {
72 | color: '#FFFFFF33',
73 | },
74 | ticks: {
75 | color: '#fff'
76 | }
77 | },
78 | y: {
79 | grid: {
80 | color: '#FFFFFF33',
81 | },
82 | ticks: {
83 | color: '#fff'
84 | }
85 | },
86 | },
87 | }
88 | return (
89 |
90 |
6 |
22 | Loading...
23 |
24 | );
25 | }
--------------------------------------------------------------------------------
/src/components/MemeGenerator.jsx:
--------------------------------------------------------------------------------
1 | /* eslint-disable react/prop-types */
2 | import { useEffect, useRef } from 'react';
3 | import {
4 | firstMeme,
5 | secondMeme,
6 | thirdMeme,
7 | fourthMeme,
8 | fifthMeme,
9 | sixthMeme,
10 | seventhMeme,
11 | eighthMeme,
12 | ninthMeme,
13 | tenth
14 | } from '../assets/memes';
15 |
16 | const MemeGenerator = ({ winnerName, loserName, memeIndex }) => {
17 | const canvasRef = useRef(null);
18 |
19 | const memeArray = [
20 | {
21 | image: firstMeme,
22 | titlePosition: { x: 240, y: 275 },
23 | winnerNamePosition: { x: 80, y: 220 },
24 | loserNamePosition: { x: 250, y: 240 },
25 | titleFontSize: 24,
26 | nameFontSize: 28
27 | },
28 | {
29 | image: secondMeme,
30 | titlePosition: { x: 240, y: 275 },
31 | winnerNamePosition: { x: 80, y: 120 },
32 | loserNamePosition: { x: 220, y: 150 },
33 | titleFontSize: 24,
34 | nameFontSize: 28
35 | },
36 | {
37 | image: thirdMeme,
38 | titlePosition: { x: 45, y: 275 },
39 | winnerNamePosition: { x: 120, y: 80 },
40 | loserNamePosition: { x: 180, y: 200 },
41 | titleFontSize: 14,
42 | nameFontSize: 28
43 | },
44 | {
45 | image: fourthMeme,
46 | titlePosition: { x: 270, y: 275 },
47 | winnerNamePosition: { x: 80, y: 180 },
48 | loserNamePosition: { x: 250, y: 200 },
49 | titleFontSize: 14,
50 | nameFontSize: 28
51 | },
52 | {
53 | image: fifthMeme,
54 | titlePosition: { x: 80, y: 10 },
55 | winnerNamePosition: { x: 120, y: 120 },
56 | loserNamePosition: { x: 230, y: 220 },
57 | titleFontSize: 12,
58 | nameFontSize: 28
59 | },
60 | {
61 | image: sixthMeme,
62 | titlePosition: { x: 45, y: 275 },
63 | winnerNamePosition: { x: 90, y: 140 },
64 | loserNamePosition: { x: 240, y: 240 },
65 | titleFontSize: 14,
66 | nameFontSize: 28
67 | },
68 | {
69 | image: seventhMeme,
70 | titlePosition: { x: 270, y: 275 },
71 | winnerNamePosition: { x: 80, y: 80 },
72 | loserNamePosition: { x: 240, y: 100 },
73 | titleFontSize: 14,
74 | nameFontSize: 28
75 | },
76 | {
77 | image: eighthMeme,
78 | titlePosition: { x: 270, y: 275 },
79 | winnerNamePosition: { x: 80, y: 100 },
80 | loserNamePosition: { x: 250, y: 80 },
81 | titleFontSize: 14,
82 | nameFontSize: 26
83 | },
84 | {
85 | image: ninthMeme,
86 | titlePosition: { x: 270, y: 275 },
87 | winnerNamePosition: { x: 120, y: 140 },
88 | loserNamePosition: { x: 80, y: 250 },
89 | titleFontSize: 14,
90 | nameFontSize: 28
91 | },
92 | {
93 | image: tenth,
94 | titlePosition: { x: 45, y: 15 },
95 | winnerNamePosition: { x: 220, y: 200 },
96 | loserNamePosition: { x: 0, y: 0 },
97 | titleFontSize: 14,
98 | nameFontSize: 28
99 | },
100 |
101 | ];
102 |
103 | const meme = memeArray[memeIndex];
104 |
105 | useEffect(() => {
106 | if (!winnerName || !loserName) return; // Prevent drawing until winner and loser names are determined
107 |
108 | const canvas = canvasRef.current;
109 | const ctx = canvas.getContext('2d');
110 | const img = new Image();
111 | img.src = meme.image;
112 |
113 | img.onload = () => {
114 | canvas.width = img.width;
115 | canvas.height = img.height;
116 |
117 | ctx.drawImage(img, 0, 0);
118 |
119 | // Draw title
120 | ctx.font = `bold ${meme.titleFontSize}px Arial`;
121 | ctx.fillStyle = 'white';
122 | ctx.strokeStyle = 'black';
123 | ctx.lineWidth = 2;
124 | ctx.textAlign = 'center';
125 | ctx.fillText('- @agastya18', meme.titlePosition.x, meme.titlePosition.y);
126 | ctx.strokeText('- @agastya18', meme.titlePosition.x, meme.titlePosition.y);
127 |
128 | // Draw winner name
129 | ctx.font = `bold ${meme.nameFontSize}px Arial`;
130 | ctx.fillText(winnerName, meme.winnerNamePosition.x, meme.winnerNamePosition.y);
131 | ctx.strokeText(winnerName, meme.winnerNamePosition.x, meme.winnerNamePosition.y);
132 |
133 | // Draw loser name
134 | ctx.fillText(loserName, meme.loserNamePosition.x, meme.loserNamePosition.y);
135 | ctx.strokeText(loserName, meme.loserNamePosition.x, meme.loserNamePosition.y);
136 | };
137 | }, [winnerName, loserName, meme]);
138 |
139 | return ;
140 | };
141 |
142 | export default MemeGenerator;
--------------------------------------------------------------------------------
/src/components/Mentorship.jsx:
--------------------------------------------------------------------------------
1 | import { useState, useEffect } from 'react';
2 | import ReactPaginate from 'react-paginate';
3 | import 'animate.css'; // Import Animate.css for animations
4 |
5 | function Mentorship() {
6 | const [mentors, setMentors] = useState([]);
7 | const itemsPerPage = 2; // Number of mentors per page
8 | const [currentPage, setCurrentPage] = useState(0);
9 |
10 | useEffect(() => {
11 | // Fetch mentors data from your API
12 | fetchMentors();
13 | }, []);
14 |
15 | const fetchMentors = async () => {
16 | try {
17 | const response = await fetch('/api/mentors'); // Replace with your actual API endpoint
18 | const data = await response.json();
19 | setMentors(data);
20 | } catch (error) {
21 | console.error('Error fetching mentors:', error);
22 | }
23 | };
24 |
25 | const handlePageClick = ({ selected }) => {
26 | setCurrentPage(selected);
27 | };
28 |
29 | const offset = currentPage * itemsPerPage;
30 | const currentItems = mentors.slice(offset, offset + itemsPerPage);
31 | const pageCount = Math.ceil(mentors.length / itemsPerPage);
32 |
33 | return (
34 |
35 |
76 | );
77 | }
78 |
79 | export default Mentorship;
80 |
--------------------------------------------------------------------------------
/src/components/Nav.jsx:
--------------------------------------------------------------------------------
1 | import { track } from '@vercel/analytics';
2 | import {
3 | Dropdown,
4 | DropdownTrigger,
5 | DropdownMenu,
6 | Button,
7 | Badge,
8 | DropdownItem
9 | } from "@nextui-org/react";
10 | import { FaAngleDown } from "react-icons/fa";
11 | import { IoMenu } from "react-icons/io5";
12 | import { Link } from "react-router-dom";
13 | import {
14 | SignedIn,
15 | SignedOut,
16 | SignInButton,
17 | UserButton,
18 | useUser,
19 | } from "@clerk/clerk-react";
20 | import { useEffect, useState } from "react";
21 | import { FaFire } from "react-icons/fa";
22 | import axios from "axios";
23 | import { Github } from "../components/icons/Github";
24 | import { API_URL } from "../utils/constants";
25 | import '../index.css'; // Ensure this imports your custom styles
26 |
27 | export default function App() {
28 | const { user } = useUser();
29 | const [userStats, setUserStats] = useState(0);
30 | const [menuOpen, setMenuOpen] = useState(false);
31 | // const location = useLocation();
32 |
33 | useEffect(() => {
34 | const getUserStats = async (user) => {
35 | if (!user) return;
36 |
37 | const res = await axios.get(`${API_URL}/v1/users/stat?id=${user.id}`);
38 |
39 | setUserStats(res.data);
40 | };
41 |
42 | getUserStats(user);
43 | }, [user]);
44 |
45 | const handleCloseMenu = () => {
46 | setMenuOpen(!menuOpen);
47 | };
48 |
49 | // useEffect(() => {
50 | // handleCloseMenu();
51 | // }, [location]);
52 |
53 | return (
54 | Our Mentors
36 |
37 | {currentItems.map((mentor, index) => (
38 |
59 |
42 | 
43 |
57 | ))}
58 | {mentor.name}
44 |{mentor.expertise}
45 |{mentor.bio}
46 |
47 |
48 | {mentor.serviceType}
49 |
50 |
51 |
52 |
55 |
56 |
60 |
75 |
56 |
131 |
57 |
130 |
58 |
59 | 
62 |
63 |
64 |
62 |
63 |
65 |
85 |
86 |
87 | {userStats && (
88 |
99 |
101 |
102 |
104 |
105 |
108 | {menuOpen && (
109 |
89 |
90 |
110 |
128 | )}
129 |
111 |
127 | -
112 | {/*
-
113 |
114 | 118 |115 | 116 | 117 |
119 | - 120 | Mentorship 121 | */} 122 |
- 123 | Join Community 124 | 125 |
10 | {/*
30 | )
31 | }
32 |
33 | export default PlusModel
--------------------------------------------------------------------------------
/src/components/icons/ChevronDownIcon.jsx:
--------------------------------------------------------------------------------
1 | export const ChevronDownIcon = ({strokeWidth = 1.5, ...otherProps}) => (
2 |
21 | );
22 |
--------------------------------------------------------------------------------
/src/components/icons/Discord.jsx:
--------------------------------------------------------------------------------
1 | export function Discord(props) {
2 | return (
3 |
13 |
14 | )
15 | }
--------------------------------------------------------------------------------
/src/components/icons/Github.jsx:
--------------------------------------------------------------------------------
1 | export function Github(props) {
2 | return ();
5 | }
6 |
7 |
--------------------------------------------------------------------------------
/src/components/icons/X.jsx:
--------------------------------------------------------------------------------
1 | export function XLogo(props) {
2 | return ();
3 | }
--------------------------------------------------------------------------------
/src/components/icons/Youtube.jsx:
--------------------------------------------------------------------------------
1 | export function YoutubeLogo(props) {
2 | return (
3 |
4 | )
5 | }
--------------------------------------------------------------------------------
/src/components/icons/index.jsx:
--------------------------------------------------------------------------------
1 | export { Discord } from "./Discord";
2 | export { XLogo } from "./X";
3 | export { YoutubeLogo } from "./Youtube";
4 | export { ChevronDownIcon } from "./ChevronDownIcon";
--------------------------------------------------------------------------------
/src/hooks/useGetLeaderboard.js:
--------------------------------------------------------------------------------
1 | import { useEffect, useState } from "react";
2 | import axios from "axios";
3 | import { API_URL } from "../utils/constants";
4 |
5 | const useGetLeaderboard = () => {
6 | const [isLoading, setIsLoading] = useState(true);
7 | const [leaderboard, setLeaderboard] = useState();
8 |
9 | const getLeaderboard = async () => {
10 | // Don't refetch if board is already present
11 | if (leaderboard) return;
12 |
13 | try {
14 | setIsLoading(true);
15 |
16 | const response = await axios.get(`${API_URL}/v1/users/leaderboard`);
17 |
18 | setLeaderboard(response.data);
19 | } catch (e) {
20 | //TODO: Show error to user
21 | } finally {
22 | setIsLoading(false);
23 | }
24 | };
25 |
26 | useEffect(() => {
27 | getLeaderboard();
28 | }, []);
29 |
30 | return {
31 | isLoading,
32 | leaderboard,
33 | topThree: leaderboard ? leaderboard.slice(0, 3) : [],
34 | };
35 | };
36 |
37 | export default useGetLeaderboard;
38 |
--------------------------------------------------------------------------------
/src/index.css:
--------------------------------------------------------------------------------
1 | @tailwind base;
2 | @tailwind components;
3 | @tailwind utilities;
4 |
5 | /* body{
6 | margin: 3rem;
7 | } */
8 |
9 | .light-mode-github {
10 | color: #000000; /* Text color */
11 | background-color: #ffffff; /* Background color */
12 | border: 1px solid #000000; /* Optional: Border color for better visibility */
13 | padding: 5px; /* Optional: Padding for better click area */
14 | border-radius: 5px; /* Optional: Rounded corners */
15 | }
16 |
17 | .light-mode-github:hover {
18 | background-color: #f0f0f0; /* Optional: Slightly darker background on hover */
19 | }
20 |
21 | .light-mode-button {
22 | color: #000000; /* Text color */
23 | background-color: #ffffff; /* Background color */
24 | border: 1px solid #000000; /* Optional: Border color for better visibility */
25 | padding: 5px; /* Optional: Padding for better click area */
26 | border-radius: 5px; /* Optional: Rounded corners */
27 | }
28 |
29 | .light-mode-button:hover {
30 | background-color: #f0f0f0; /* Optional: Slightly darker background on hover */
31 | }
32 |
33 |
--------------------------------------------------------------------------------
/src/main.jsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import ReactDOM from "react-dom/client";
3 | import App from "./App.jsx";
4 | import "./index.css";
5 | import { ClerkProvider } from "@clerk/clerk-react";
6 |
7 |
8 | //Pages
9 |
10 |
11 |
12 | import { BrowserRouter } from "react-router-dom";
13 |
14 |
15 |
16 | const clerkPKey = import.meta.env.VITE_CLERK_PUBLISHABLE_KEY;
17 |
18 | ReactDOM.createRoot(document.getElementById("root")).render(
19 |
11 | +
12 |
*/}
13 |
14 |
29 |
15 |
18 |
23 |
24 | {/* */}
27 |
28 | Create Project
19 | 20 | 21 | 22 |
7 |
8 | "Consistency Beats Talent"
9 |
10 |
26 |
27 | );
28 | };
29 |
30 | export default CommunityLead;
31 |
--------------------------------------------------------------------------------
/src/sections/Footer.jsx:
--------------------------------------------------------------------------------
1 | import { track } from "@vercel/analytics";
2 | import { XLogo, YoutubeLogo, Discord } from "../components/icons";
3 |
4 | import logo from '/logo.png'
5 | import { Link } from 'react-router-dom';
6 |
7 |
8 | const Footer = () => {
9 | return (
10 |
52 | );
53 | };
54 |
55 | export default Footer;
56 |
--------------------------------------------------------------------------------
/src/sections/Hero.jsx:
--------------------------------------------------------------------------------
1 | import background from '../assets/images/background.jpg';
2 | import summmary from '../assets/images/summary.png';
3 | import { FaArrowRight } from "react-icons/fa";
4 | import { useNavigate } from 'react-router-dom';
5 |
6 | const Hero = () => {
7 | return (
8 |
11 | Consistency beats talent because it is more sustainable, adaptable,
12 | and rewarding.
13 | It helps one improve skills, achieve goals, and overcome challenges.
14 |
14 |
37 | );
38 | };
39 |
40 | export default Hero;
41 |
--------------------------------------------------------------------------------
/src/sections/Leaderboard.jsx:
--------------------------------------------------------------------------------
1 | import React, { useEffect } from "react";
2 | import axios from "axios";
3 | import {
4 | Table,
5 | TableHeader,
6 | TableColumn,
7 | TableBody,
8 | TableRow,
9 | TableCell,
10 | Input,
11 | Button,
12 | DropdownTrigger,
13 | Dropdown,
14 | DropdownMenu,
15 | DropdownItem,
16 | User,
17 | Pagination,
18 | Link,
19 | } from "@nextui-org/react";
20 | import { FaMedal } from "react-icons/fa";
21 | import { SearchIcon } from "./SearchIcon";
22 | import { ChevronDownIcon } from "../components/icons/ChevronDownIcon";
23 | import { columns } from "./data";
24 | import { capitalize } from "./utils";
25 | import { useUser } from "@clerk/clerk-react"
26 |
27 | const INITIAL_VISIBLE_COLUMNS = [
28 | "rank",
29 | "developer",
30 | "streak",
31 | "contributions",
32 | "compare",
33 | ];
34 |
35 | const Leaderboard = ({ leaderboard }) => {
36 | const [filterValue, setFilterValue] = React.useState("");
37 | const [selectedKeys, setSelectedKeys] = React.useState(new Set([]));
38 | const [visibleColumns, setVisibleColumns] = React.useState(
39 | new Set(INITIAL_VISIBLE_COLUMNS)
40 | );
41 | const [statusFilter, setStatusFilter] = React.useState("all");
42 | const [rowsPerPage, setRowsPerPage] = React.useState(15);
43 | const [sortDescriptor, setSortDescriptor] = React.useState({
44 | column: "streak",
45 | direction: "ascending",
46 | });
47 |
48 | const [page, setPage] = React.useState(1);
49 |
50 | const { user: currentUser } = useUser();
51 |
52 | const rankedUsers = leaderboard ?? [];
53 |
54 | const hasSearchFilter = Boolean(filterValue);
55 | const headerColumns = React.useMemo(() => {
56 | if (visibleColumns === "all") return columns;
57 |
58 | return columns.filter((column) =>
59 | Array.from(visibleColumns).includes(column.uid)
60 | );
61 | }, [visibleColumns]);
62 |
63 | const pages = Math.ceil(rankedUsers.length / rowsPerPage);
64 |
65 | const items = React.useMemo(() => {
66 | const start = (page - 1) * rowsPerPage;
67 | const end = start + rowsPerPage;
68 |
69 | return rankedUsers
70 | .filter((user) =>
71 | user.username.toLowerCase().includes(filterValue.toLowerCase())
72 | )
73 | .slice(start, end);
74 | }, [page, rankedUsers, rowsPerPage, filterValue]);
75 |
76 | const renderCell = React.useCallback((user, columnKey) => {
77 | const cellValue = user[columnKey];
78 |
79 | switch (columnKey) {
80 | case "rank":
81 | return (
82 |
15 |
36 |
16 |
27 |
28 | 17 | Welcome to 18 | Githubstreak 19 |
20 |21 | Improve your coding skills by solving real-world problems. 22 |
23 |24 | Join a community of developers who stay accountable to each other to stay consistent in their coding journey. 25 |
26 |
29 | 
34 |
35 |
83 | {user.rank === 1 &&
88 | );
89 | case "developer":
90 | return (
91 |
95 |
106 |
110 | );
111 | case "compare":
112 | return (
113 | !currentUser ? 107 | {user.currentStreak.count} 108 |
109 |Sign in to compare
114 | : 115 | 121 | 122 | 123 | ) 124 | default: 125 | return cellValue; 126 | } 127 | }, []); 128 | 129 | const onNextPage = React.useCallback(() => { 130 | if (page < pages) { 131 | setPage(page + 1); 132 | } 133 | }, [page, pages]); 134 | 135 | const onPreviousPage = React.useCallback(() => { 136 | if (page > 1) { 137 | setPage(page - 1); 138 | } 139 | }, [page]); 140 | 141 | const onRowsPerPageChange = React.useCallback((e) => { 142 | setRowsPerPage(Number(e.target.value)); 143 | setPage(1); 144 | }, []); 145 | 146 | const onSearchChange = React.useCallback((value) => { 147 | if (value) { 148 | setFilterValue(value); 149 | setPage(1); 150 | } else { 151 | setFilterValue(""); 152 | } 153 | }, []); 154 | 155 | const onClear = React.useCallback(() => { 156 | setFilterValue(""); 157 | setPage(1); 158 | }, []); 159 | 160 | const topContent = React.useMemo(() => { 161 | return ( 162 |
163 |
218 | );
219 | }, [
220 | filterValue,
221 | statusFilter,
222 | rankedUsers,
223 | visibleColumns,
224 | onRowsPerPageChange,
225 | onSearchChange,
226 | hasSearchFilter,
227 | ]);
228 |
229 | const bottomContent = React.useMemo(() => {
230 | return (
231 |
164 | }
169 | value={filterValue}
170 | onClear={() => onClear()}
171 | onValueChange={onSearchChange}
172 | />
173 |
201 |
174 |
175 |
176 | }
178 | variant="flat"
179 | color="success"
180 | >
181 | Columns
182 |
183 |
184 |
192 | {columns.map((column) => (
193 |
194 | {capitalize(column.name)}
195 |
196 | ))}
197 |
198 |
199 |
200 |
202 |
203 | Total users {rankedUsers.length}
204 |
205 |
216 |
217 |
232 |
262 | );
263 | }, [selectedKeys, items.length, page, pages, hasSearchFilter]);
264 |
265 | return (
266 |
242 |
251 |
260 |
261 |
7 |
42 | );
43 | };
44 |
45 | export default Topthree;
46 |
--------------------------------------------------------------------------------
/src/sections/data.js:
--------------------------------------------------------------------------------
1 | const columns = [
2 | { name: "RANK", uid: "rank", sortable: true },
3 | { name: "DEVELOPER", uid: "developer" },
4 | { name: "STREAK", uid: "streak", sortable: true },
5 | { name: "CONTRIBUTIONS", uid: "contributions", sortable: true },
6 | { name: "COMPARE", uid: "compare", sortable: false },
7 | ];
8 |
9 | export { columns };
10 |
--------------------------------------------------------------------------------
/src/sections/index.js:
--------------------------------------------------------------------------------
1 | import Hero from './Hero';
2 | import Leaderboard from './Leaderboard';
3 | import Topthree from './Topthree';
4 |
5 | import CommunityLead from './CommunityLead';
6 | import Footer from './Footer';
7 |
8 |
9 | export {
10 | Hero,
11 | Leaderboard,
12 | Topthree,
13 |
14 | CommunityLead,
15 | Footer,
16 | }
--------------------------------------------------------------------------------
/src/sections/utils.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | export function capitalize(str) {
3 | return str.charAt(0).toUpperCase() + str.slice(1);
4 | }
5 |
--------------------------------------------------------------------------------
/src/utils/constants.js:
--------------------------------------------------------------------------------
1 | export const API_URL = import.meta.env.DEV
2 | ? "http://localhost:3001"
3 | : "https://api.ggithubstreak.com";
4 |
--------------------------------------------------------------------------------
/tailwind.config.js:
--------------------------------------------------------------------------------
1 | const {nextui} = require("@nextui-org/react");
2 |
3 | /** @type {import('tailwindcss').Config} */
4 | export default {
5 | content: [
6 | "./index.html",
7 | "./src/**/*.{js,ts,jsx,tsx}",
8 | "./node_modules/@nextui-org/theme/dist/**/*.{js,ts,jsx,tsx}",
9 | ],
10 | theme: {
11 | extend: {},
12 | },
13 | darkMode: "class",
14 | plugins: [nextui(), require("daisyui")],
15 | }
16 |
17 |
--------------------------------------------------------------------------------
/vercel.json:
--------------------------------------------------------------------------------
1 | {
2 | "routes": [
3 | {"src": "/[^.]+", "dest": "/" , "status": 200}
4 | ]
5 | }
--------------------------------------------------------------------------------
/vite.config.js:
--------------------------------------------------------------------------------
1 | import { defineConfig } from 'vite'
2 | import react from '@vitejs/plugin-react'
3 |
4 | // https://vitejs.dev/config/
5 | export default defineConfig({
6 | plugins: [react()],
7 | })
8 |
--------------------------------------------------------------------------------
8 |
9 | Top 1% Contributors in the last 7 days
10 |
11 |
41 |
12 | {topThree.map((user) => (
13 |
14 |
15 |
25 | {`@${user.username}`}
26 |
27 | }
28 | avatarProps={{
29 | src: user.avatar + "&s=48",
30 | }}
31 | />
32 |
33 |
34 | Rank {user.rank}
35 |
37 |
38 | ))}
39 |
40 | Contributions {user.contributions}
36 |