├── .eslintrc.json
├── .vscode
    └── settings.json
├── assets
    ├── Blanka.otf
    └── jwoc_logo.svg
├── public
    ├── favicon.ico
    └── vercel.svg
├── postcss.config.js
├── atoms
    ├── modalAtom.ts
    └── selectedUserAtom.ts
├── next-env.d.ts
├── pages
    ├── _app.tsx
    ├── api
    │   └── hello.ts
    └── index.tsx
├── backend
    ├── utils
    │   ├── writeJson.js
    │   └── allRepos.js
    └── generate.js
├── types
    └── index.ts
├── utils
    ├── parseName.ts
    └── generateConfetti.ts
├── next.config.js
├── .gitignore
├── tsconfig.json
├── components
    ├── Table.tsx
    ├── Footer.tsx
    ├── MetaTags.tsx
    ├── Header.tsx
    ├── TableHeader.tsx
    ├── EachPR.tsx
    ├── PRModal.tsx
    ├── TopCard.tsx
    └── UserCard.tsx
├── .github
    └── workflows
    │   └── main.yml
├── package.json
├── tailwind.config.js
├── README.md
└── styles
    └── globals.css


/.eslintrc.json:
--------------------------------------------------------------------------------
1 | {
2 |   "extends": "next/core-web-vitals"
3 | }
4 | 


--------------------------------------------------------------------------------
/.vscode/settings.json:
--------------------------------------------------------------------------------
1 | {
2 |     "typescript.tsdk": "node_modules\\typescript\\lib"
3 | }


--------------------------------------------------------------------------------
/assets/Blanka.otf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/niloysikdar/jwoc-leaderboard/HEAD/assets/Blanka.otf


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/niloysikdar/jwoc-leaderboard/HEAD/public/favicon.ico


--------------------------------------------------------------------------------
/postcss.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   plugins: {
3 |     tailwindcss: {},
4 |     autoprefixer: {},
5 |   },
6 | }
7 | 


--------------------------------------------------------------------------------
/atoms/modalAtom.ts:
--------------------------------------------------------------------------------
1 | import { atom } from "recoil";
2 | 
3 | export const modalState = atom({
4 |   key: "modal",
5 |   default: false,
6 | });
7 | 


--------------------------------------------------------------------------------
/next-env.d.ts:
--------------------------------------------------------------------------------
1 | /// <reference types="next" />
2 | /// <reference types="next/image-types/global" />
3 | 
4 | // NOTE: This file should not be edited
5 | // see https://nextjs.org/docs/basic-features/typescript for more information.
6 | 


--------------------------------------------------------------------------------
/pages/_app.tsx:
--------------------------------------------------------------------------------
 1 | import "../styles/globals.css";
 2 | import type { AppProps } from "next/app";
 3 | import { RecoilRoot } from "recoil";
 4 | 
 5 | function MyApp({ Component, pageProps }: AppProps) {
 6 |   return (
 7 |     <RecoilRoot>
 8 |       <Component {...pageProps} />
 9 |     </RecoilRoot>
10 |   );
11 | }
12 | 
13 | export default MyApp;
14 | 


--------------------------------------------------------------------------------
/backend/utils/writeJson.js:
--------------------------------------------------------------------------------
 1 | const fs = require("fs");
 2 | 
 3 | const writeJson = (data) => {
 4 |   fs.writeFile("data.json", JSON.stringify(data), (error) => {
 5 |     if (error) {
 6 |       console.log(error);
 7 |     } else {
 8 |       console.log("File has been written successfully");
 9 |     }
10 |   });
11 | };
12 | 
13 | module.exports = { writeJson };
14 | 


--------------------------------------------------------------------------------
/pages/api/hello.ts:
--------------------------------------------------------------------------------
 1 | // Next.js API route support: https://nextjs.org/docs/api-routes/introduction
 2 | import type { NextApiRequest, NextApiResponse } from 'next'
 3 | 
 4 | type Data = {
 5 |   name: string
 6 | }
 7 | 
 8 | export default function handler(
 9 |   req: NextApiRequest,
10 |   res: NextApiResponse<Data>
11 | ) {
12 |   res.status(200).json({ name: 'John Doe' })
13 | }
14 | 


--------------------------------------------------------------------------------
/types/index.ts:
--------------------------------------------------------------------------------
 1 | export interface TableDataType {
 2 |   user_name: string;
 3 |   avatar_url: string;
 4 |   user_url: string;
 5 |   total_points: number;
 6 |   pr_urls: PRDataType[];
 7 |   full_name: string;
 8 |   college: string;
 9 |   rank: number;
10 | }
11 | 
12 | interface PRDataType {
13 |   url: string;
14 |   difficulty: string;
15 |   phase: number;
16 | }
17 | 


--------------------------------------------------------------------------------
/atoms/selectedUserAtom.ts:
--------------------------------------------------------------------------------
 1 | import { atom } from "recoil";
 2 | 
 3 | export const selectedUserState = atom({
 4 |   key: "pr",
 5 |   default: {
 6 |     user_name: "",
 7 |     avatar_url: "",
 8 |     user_url: "",
 9 |     total_points: 0,
10 |     pr_urls: [
11 |       {
12 |         url: "",
13 |         difficulty: "",
14 |         phase: 0,
15 |       },
16 |     ],
17 |     full_name: "",
18 |     college: "",
19 |     rank: 0,
20 |   },
21 | });
22 | 


--------------------------------------------------------------------------------
/utils/parseName.ts:
--------------------------------------------------------------------------------
 1 | export const parseName = (name: string): string => {
 2 |   if (name.length === 0) {
 3 |     return "";
 4 |   }
 5 |   if (name.split(" ").length !== 2) {
 6 |     return name;
 7 |   } else {
 8 |     const [firstName, lastName] = name.split(" ");
 9 |     const newFirst =
10 |       firstName.charAt(0).toUpperCase() + firstName.toLowerCase().substring(1);
11 |     const newLast =
12 |       lastName.charAt(0).toUpperCase() + lastName.toLowerCase().substring(1);
13 | 
14 |     return `${newFirst} ${newLast}`;
15 |   }
16 | };
17 | 


--------------------------------------------------------------------------------
/next.config.js:
--------------------------------------------------------------------------------
 1 | /** @type {import('next').NextConfig} */
 2 | const intercept = require("intercept-stdout");
 3 | 
 4 | // safely ignore recoil stdout warning messages
 5 | function interceptStdout(text) {
 6 |   if (text.includes("Duplicate atom key")) {
 7 |     return "";
 8 |   }
 9 |   return text;
10 | }
11 | 
12 | // Intercept in dev and prod
13 | intercept(interceptStdout);
14 | 
15 | const nextConfig = {
16 |   reactStrictMode: true,
17 |   images: {
18 |     domains: ["avatars.githubusercontent.com"],
19 |   },
20 | };
21 | 
22 | module.exports = nextConfig;
23 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 2 | 
 3 | # dependencies
 4 | /node_modules
 5 | /.pnp
 6 | .pnp.js
 7 | 
 8 | # testing
 9 | /coverage
10 | 
11 | # next.js
12 | /.next/
13 | /out/
14 | 
15 | # production
16 | /build
17 | 
18 | # misc
19 | .DS_Store
20 | *.pem
21 | 
22 | # debug
23 | npm-debug.log*
24 | yarn-debug.log*
25 | yarn-error.log*
26 | 
27 | # local env files
28 | .env
29 | .env.local
30 | .env.development.local
31 | .env.test.local
32 | .env.production.local
33 | 
34 | # vercel
35 | .vercel
36 | 
37 | # typescript
38 | *.tsbuildinfo
39 | 


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "target": "es5",
 4 |     "lib": ["dom", "dom.iterable", "esnext"],
 5 |     "allowJs": true,
 6 |     "skipLibCheck": true,
 7 |     "strict": true,
 8 |     "forceConsistentCasingInFileNames": true,
 9 |     "noEmit": true,
10 |     "esModuleInterop": true,
11 |     "module": "esnext",
12 |     "moduleResolution": "node",
13 |     "resolveJsonModule": true,
14 |     "isolatedModules": true,
15 |     "jsx": "preserve",
16 |     "incremental": true
17 |   },
18 |   "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
19 |   "exclude": ["node_modules"]
20 | }
21 | 


--------------------------------------------------------------------------------
/components/Table.tsx:
--------------------------------------------------------------------------------
 1 | import { TableDataType } from "../types";
 2 | import TableHeader from "./TableHeader";
 3 | import UserCard from "./UserCard";
 4 | 
 5 | const Table = ({ data }: { data: TableDataType[] }) => {
 6 |   return (
 7 |     <div className="container my-4 px-12 lg:px-8 sm:px-2">
 8 |       <div className="shadow-[0_0_2px_rgba(50,69,107,0.4)] rounded-lg overflow-hidden">
 9 |         <table className="w-full table-auto">
10 |           <TableHeader />
11 | 
12 |           <tbody>
13 |             {data.map((item, i) => (
14 |               <UserCard key={item.user_name} data={item} index={i} />
15 |             ))}
16 |           </tbody>
17 |         </table>
18 |       </div>
19 |     </div>
20 |   );
21 | };
22 | 
23 | export default Table;
24 | 


--------------------------------------------------------------------------------
/utils/generateConfetti.ts:
--------------------------------------------------------------------------------
 1 | import confetti from "canvas-confetti";
 2 | 
 3 | var end = Date.now() + 5 * 1000;
 4 | 
 5 | var colors = ["#ff1700", "#5800ff"];
 6 | 
 7 | export const generateConfetti = () => {
 8 |   (function frame() {
 9 |     confetti({
10 |       particleCount: 2,
11 |       angle: 60,
12 |       spread: 100,
13 |       origin: { x: 0 },
14 |       colors: colors,
15 |       shapes: ["circle", "square"],
16 |     });
17 |     confetti({
18 |       particleCount: 2,
19 |       angle: 120,
20 |       spread: 100,
21 |       origin: { x: 1 },
22 |       colors: colors,
23 |       shapes: ["circle", "square"],
24 |     });
25 | 
26 |     if (Date.now() < end) {
27 |       requestAnimationFrame(frame);
28 |     }
29 |   })();
30 | };
31 | 


--------------------------------------------------------------------------------
/components/Footer.tsx:
--------------------------------------------------------------------------------
 1 | import Image from "next/image";
 2 | import Logo from "../assets/jwoc_logo.svg";
 3 | 
 4 | const Footer = () => {
 5 |   return (
 6 |     <footer className="mt-[5rem] mx-auto mb-[2rem] flex justify-center items-center flex-col">
 7 |       <Image src={Logo} alt="Logo" height="100px" width="100px" />
 8 |       <h2 className="my-1 font-['Blanka'] text-[2rem] font-medium text-lightblack tracking-[3px]">
 9 |         JWOC
10 |       </h2>
11 |       <h4 className="my-1 font-codefont text-[1.6rem] font-medium text-lightblack tracking-wide">
12 |         JGEC Winter of Code
13 |       </h4>
14 |       <p className="my-1 font-mainfont text-[1.2rem] font-semibold text-darkgrey tracking-wide">
15 |         Copyright © JWOC 2022. All rights reserved.
16 |       </p>
17 |     </footer>
18 |   );
19 | };
20 | 
21 | export default Footer;
22 | 


--------------------------------------------------------------------------------
/.github/workflows/main.yml:
--------------------------------------------------------------------------------
 1 | name: Cron Job
 2 | 
 3 | on:
 4 |   schedule:
 5 |     # At every 3 hours
 6 |     - cron: "0 */3 * * *"
 7 | 
 8 | jobs:
 9 |   fetch:
10 |     name: FetchData
11 |     runs-on: windows-latest
12 |     steps:
13 |       - uses: actions/checkout@v2
14 | 
15 |       - name: npm install, check, build, and test using Node.js ${{ matrix.node-version }}
16 |         uses: actions/setup-node@v2
17 |         with:
18 |           node-version: ${{ matrix.node-version }}
19 |       - run: npm install
20 |       - run: npm run generate
21 |         env:
22 |           GH_ACCESS_TOKEN: ${{ secrets.GH_ACCESS_TOKEN }}
23 |           MONGODB_URL: ${{ secrets.MONGODB_URL }}
24 | 
25 |       - uses: stefanzweifel/git-auto-commit-action@v4
26 |         with:
27 |           commit_message: "feat: updated data using GitHub workflow"
28 |           commit_user_name: niloysikdar
29 |           commit_user_email: niloysikdar30@gmail.com
30 |           commit_author: Niloy Sikdar
31 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "jwoc-leaderboard",
 3 |   "private": true,
 4 |   "scripts": {
 5 |     "dev": "next dev",
 6 |     "build": "next build",
 7 |     "start": "next start",
 8 |     "lint": "next lint",
 9 |     "generate": "node backend/generate.js"
10 |   },
11 |   "dependencies": {
12 |     "@heroicons/react": "^1.0.5",
13 |     "axios": "^0.25.0",
14 |     "canvas-confetti": "^1.5.1",
15 |     "dotenv": "^16.0.0",
16 |     "fuse.js": "^6.5.3",
17 |     "intercept-stdout": "^0.1.2",
18 |     "mongodb": "^4.3.1",
19 |     "next": "12.0.10",
20 |     "react": "17.0.2",
21 |     "react-dom": "17.0.2",
22 |     "recoil": "^0.6.1",
23 |     "sharp": "^0.30.1"
24 |   },
25 |   "devDependencies": {
26 |     "@types/canvas-confetti": "^1.4.2",
27 |     "@types/node": "17.0.17",
28 |     "@types/react": "17.0.39",
29 |     "autoprefixer": "^10.4.2",
30 |     "eslint": "8.8.0",
31 |     "eslint-config-next": "12.0.10",
32 |     "postcss": "^8.4.6",
33 |     "tailwindcss": "^3.0.19",
34 |     "typescript": "4.5.5"
35 |   }
36 | }
37 | 


--------------------------------------------------------------------------------
/public/vercel.svg:
--------------------------------------------------------------------------------
1 | <svg width="283" height="64" viewBox="0 0 283 64" fill="none" 
2 |     xmlns="http://www.w3.org/2000/svg">
3 |     <path d="M141.04 16c-11.04 0-19 7.2-19 18s8.96 18 20 18c6.67 0 12.55-2.64 16.19-7.09l-7.65-4.42c-2.02 2.21-5.09 3.5-8.54 3.5-4.79 0-8.86-2.5-10.37-6.5h28.02c.22-1.12.35-2.28.35-3.5 0-10.79-7.96-17.99-19-17.99zm-9.46 14.5c1.25-3.99 4.67-6.5 9.45-6.5 4.79 0 8.21 2.51 9.45 6.5h-18.9zM248.72 16c-11.04 0-19 7.2-19 18s8.96 18 20 18c6.67 0 12.55-2.64 16.19-7.09l-7.65-4.42c-2.02 2.21-5.09 3.5-8.54 3.5-4.79 0-8.86-2.5-10.37-6.5h28.02c.22-1.12.35-2.28.35-3.5 0-10.79-7.96-17.99-19-17.99zm-9.45 14.5c1.25-3.99 4.67-6.5 9.45-6.5 4.79 0 8.21 2.51 9.45 6.5h-18.9zM200.24 34c0 6 3.92 10 10 10 4.12 0 7.21-1.87 8.8-4.92l7.68 4.43c-3.18 5.3-9.14 8.49-16.48 8.49-11.05 0-19-7.2-19-18s7.96-18 19-18c7.34 0 13.29 3.19 16.48 8.49l-7.68 4.43c-1.59-3.05-4.68-4.92-8.8-4.92-6.07 0-10 4-10 10zm82.48-29v46h-9V5h9zM36.95 0L73.9 64H0L36.95 0zm92.38 5l-27.71 48L73.91 5H84.3l17.32 30 17.32-30h10.39zm58.91 12v9.69c-1-.29-2.06-.49-3.2-.49-5.81 0-10 4-10 10V51h-9V17h9v9.2c0-5.08 5.91-9.2 13.2-9.2z" fill="#000"/>
4 | </svg>


--------------------------------------------------------------------------------
/tailwind.config.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |   content: [
 3 |     "./pages/**/*.{js,ts,jsx,tsx}",
 4 |     "./components/**/*.{js,ts,jsx,tsx}",
 5 |   ],
 6 |   theme: {
 7 |     screens: {
 8 |       "2xl": { max: "1535px" },
 9 |       xl: { max: "1279px" },
10 |       lg: { max: "1023px" },
11 |       md: { max: "767px" },
12 |       sm: { max: "639px" },
13 |       xs: { max: "325px" },
14 |     },
15 |     extend: {
16 |       colors: {
17 |         darkblack: "#222831",
18 |         lightblack: "#3c434e",
19 |         darkwhite: "#ffffff",
20 |         lightwhite: "#f7fafc",
21 |         darkgrey: "#787a91",
22 |         lightgrey: "#9ba4b4",
23 |         primaryoff: "#99feff",
24 |         primarylight: "#385cf0",
25 |         primarydark: "#1d4cb0",
26 |         highlight: "#f7f0c2",
27 |         warningoff: "#ff3838",
28 |         discordBg: "#404eed",
29 |       },
30 | 
31 |       fontFamily: {
32 |         mainfont: ["Inter", "sans-serif"],
33 |         codefont: ["Outfit", "sans-serif"],
34 |         curlfont: ["Quicksand", "sans-serif"],
35 |       },
36 |     },
37 |   },
38 |   extend: {},
39 |   plugins: [],
40 | };
41 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | <p align="center">
 2 |   <a href="https://www.youtube.com/watch?v=1QzLg3DIarU"><img src="https://user-images.githubusercontent.com/58071992/155016490-352a3f88-ac75-4be7-b47c-8dd16288cf79.jpg" alt="Logo" width="75%"></a>
 3 | 
 4 |   <h1 align="center">JWOC Leaderboard</h1>
 5 | 
 6 |   <h3 align="center">
 7 |     Official leaderboard for JWOC 2k22
 8 |     <br />
 9 |     <br />
10 |     <a href="https://leaderboard.jwoc.tech">Visit Here</a>
11 |     ·
12 |     <a href="https://www.youtube.com/watch?v=1QzLg3DIarU">YouTube Live</a>
13 |     ·
14 |     <a href="https://github.com/niloysikdar/jwoc-leaderboard/issues">Report Bug</a>
15 |   </h3>
16 | </p>
17 | 
18 | ### Star the [GitHub repo](https://github.com/niloysikdar/jwoc-leaderboard) to keep the developer motivated ✨
19 | 
20 | ### Built With
21 | 
22 | - [React](https://reactjs.org)
23 | - [Next.js](https://nextjs.org)
24 | - [TypeScript](https://www.typescriptlang.org)
25 | - [TailwindCSS](https://tailwindcss.com)
26 | - [Recoil](https://recoiljs.org)
27 | - [MongoDB](https://www.mongodb.com)
28 | - [GitHub API](https://docs.github.com/en/rest)
29 | - [GitHub Actions](https://docs.github.com/en/actions)
30 | 


--------------------------------------------------------------------------------
/components/MetaTags.tsx:
--------------------------------------------------------------------------------
 1 | const MetaTags = () => {
 2 |   return (
 3 |     <>
 4 |       <meta charSet="UTF-8" />
 5 |       <meta httpEquiv="X-UA-Compatible" content="IE=edge" />
 6 |       <meta
 7 |         name="viewport"
 8 |         content="width=device-width, initial-scale=1.0, maximum-scale=1.0"
 9 |       />
10 | 
11 |       <meta name="author" content="JWOC ORG" />
12 |       <meta
13 |         name="description"
14 |         content="Participant's Ranks in JWoC: JGEC Winter of Code, 2k22."
15 |       />
16 |       <meta
17 |         name="keywords"
18 |         content="jwoc, 2k22, jgec, winter, developer, code, jgec winter of code"
19 |       />
20 | 
21 |       <meta property="og:site_name" content="JWOC 2K22" />
22 |       <meta property="og:title" content="JWOC 2K22" />
23 |       <meta
24 |         property="og:description"
25 |         content="Participant's Ranks in JWoC: JGEC Winter of Code, 2k22."
26 |       />
27 |       <meta
28 |         property="og:image"
29 |         content="https://jwoc.tech/assets/img/opengraph.png"
30 |       />
31 |       <meta property="og:url" content="https://jwoc.tech/" />
32 | 
33 |       <meta name="theme-color" content="#0d1524" />
34 |       <meta name="msapplication-navbutton-color" content="#0d1524" />
35 |     </>
36 |   );
37 | };
38 | 
39 | export default MetaTags;
40 | 


--------------------------------------------------------------------------------
/components/Header.tsx:
--------------------------------------------------------------------------------
 1 | import Image from "next/image";
 2 | 
 3 | import { HomeIcon } from "@heroicons/react/solid";
 4 | import Logo from "../assets/jwoc_logo.svg";
 5 | 
 6 | const Header = () => {
 7 |   return (
 8 |     <header className="fixed top-0 z-10 w-full px-20 py-1 bg-[rgba(255,255,255,0.8)] shadow-[0_2px_4px_rgba(0,0,0,0.1)] md:px-4 transition">
 9 |       <nav className="flex justify-between items-center">
10 |         <a
11 |           href="https://jwoc.tech"
12 |           className="flex justify-center items-center"
13 |         >
14 |           <Image src={Logo} alt="Logo" height="60px" width="60px" />
15 |           <span className="mx-0.5 font-['Orbitron'] text-[30px] font-bold text-lightblack tracking-wide sm:hidden">
16 |             JWoC
17 |           </span>
18 |         </a>
19 | 
20 |         <a
21 |           href="https://jwoc.tech"
22 |           className="px-4 py-2 flex justify-center items-center bg-primarylight hover:bg-primarydark transition rounded-lg text-center cursor-pointer md:px-2 md:py-1.5"
23 |         >
24 |           <HomeIcon className="mx-0.5 h-5 w-5 text-darkwhite" />
25 |           <span className="mx-0.5 font-codefont text-[1.2rem] font-medium text-darkwhite tracking-wide md:text-[1rem]">
26 |             Home
27 |           </span>
28 |         </a>
29 |       </nav>
30 |     </header>
31 |   );
32 | };
33 | 
34 | export default Header;
35 | 


--------------------------------------------------------------------------------
/components/TableHeader.tsx:
--------------------------------------------------------------------------------
 1 | const TableHeader = () => {
 2 |   return (
 3 |     <thead>
 4 |       <tr>
 5 |         <th className="px-4 py-5 border-b-2 border-gray-200 bg-lightblack text-center text-base font-semibold text-darkwhite uppercase tracking-wider lg:hidden">
 6 |           SL No.
 7 |         </th>
 8 |         <th className="px-4 py-5 border-b-2 border-gray-200 bg-lightblack text-center text-base font-semibold text-darkwhite uppercase tracking-wider lg:text-sm">
 9 |           Rank
10 |         </th>
11 |         <th className="px-4 py-5 border-b-2 border-gray-200 bg-lightblack text-left text-base font-semibold text-darkwhite uppercase tracking-wider lg:text-sm">
12 |           Participant&apos;s Info
13 |         </th>
14 |         <th className="px-4 py-5 border-b-2 border-gray-200 bg-lightblack text-left text-base font-semibold text-darkwhite uppercase tracking-wider lg:hidden">
15 |           GitHub Handle
16 |         </th>
17 |         <th className="px-4 py-5 border-b-2 border-gray-200 bg-lightblack text-left text-base font-semibold text-darkwhite uppercase tracking-wider lg:hidden">
18 |           View All PRs
19 |         </th>
20 |         <th className="px-4 py-5 border-b-2 border-gray-200 bg-lightblack text-center text-base font-semibold text-darkwhite uppercase tracking-wider lg:text-sm xs:hidden">
21 |           Points
22 |         </th>
23 |       </tr>
24 |     </thead>
25 |   );
26 | };
27 | 
28 | export default TableHeader;
29 | 


--------------------------------------------------------------------------------
/backend/utils/allRepos.js:
--------------------------------------------------------------------------------
 1 | const allRepos = [
 2 |   "chiraag-kakar/createnshare",
 3 |   "niloysikdar/Get-Set-Go",
 4 |   "niloysikdar/Kahani",
 5 |   "niloysikdar/CFI-JGEC",
 6 |   "maityamit/Tracky-Track-your-goals-or-targets",
 7 |   "Kajal13081/Musgenix",
 8 |   "Kajal13081/Gallery-Application",
 9 |   "harshita2216/hello-jobs",
10 |   "Ly0kami/QuotesApp-JWoC",
11 |   "theblockchainchief/web3-hub",
12 |   "BRAVO68WEB/url-minify",
13 |   "HITK-TECH-Community/Community-Website",
14 |   "The-Shivam-garg/BigB-E-learn-Websit-e",
15 |   "Codehackerone/Medify",
16 |   "aman34503/Go-Airbnb",
17 |   "SauravMukherjee44/Aec-Library-Website",
18 |   "riyajha2305/Instagram-Clone",
19 |   "SaraswatGit/PlanZap",
20 |   "abhisheks008/ML-Crate",
21 |   "opticSquid/hive",
22 |   "gdscjgec/Image-Editor",
23 |   "prathimacode-hub/Treksy",
24 |   "gdscjgec/Pictionary",
25 |   "prathimacode-hub/MedFlare",
26 |   "ZiaCodes/counter.js",
27 |   "ZiaCodes/claim-prize",
28 |   "shibam-naskar/wally",
29 |   "harshita214/Chrome-Extension",
30 |   "imniladri/DevHub",
31 |   "skpandey885/HealhUb",
32 |   "sahilsaha7773/SpotLight",
33 |   "shibam-naskar/IMAGE_COMPRESOR",
34 |   "mohit200008/medi-Care",
35 |   "HackClubRAIT/HackClubRAIT-Website.github.io",
36 |   "Saup21/Code-Sandbox",
37 |   "agamjotsingh18/pollitup",
38 |   "neelshah2409/Bot-Collection",
39 |   "BlueBlaze6335/Illicit-Illustrations",
40 |   "codejay411/Fake-News-Detection-App",
41 |   "sagnik1511/Tabular-AutoML",
42 |   "Tech-N-Science/FunwithScience",
43 |   "smaranjitghose/awesome-portfolio-websites",
44 |   "IAmTamal/Milan",
45 |   "smaranjitghose/indokhaadyam",
46 |   "7saikat7/supply_chain",
47 | ];
48 | 
49 | module.exports = { allRepos };
50 | 


--------------------------------------------------------------------------------
/components/EachPR.tsx:
--------------------------------------------------------------------------------
 1 | const EachPR = ({
 2 |   link,
 3 |   difficulty,
 4 |   phase,
 5 | }: {
 6 |   link: string;
 7 |   difficulty: string;
 8 |   phase: number;
 9 | }) => {
10 |   const { bgColor, textColor } = getColor(difficulty);
11 | 
12 |   return (
13 |     <>
14 |       <li className="my-3 p-2 text-lg font-medium font-mainfont bg-slate-50 rounded-[8px] hover:bg-slate-100">
15 |         <a
16 |           href={link}
17 |           target="_blank"
18 |           rel="noreferrer"
19 |           className="text-blue-500 text-lg font-medium font-codefont hover:text-blue-800 transition tracking-wide"
20 |         >
21 |           {link}
22 |         </a>
23 |         <div className="flex items-center flex-wrap gap-1">
24 |           <span className="mt-1 block text-slate-500 text-base font-medium font-codefont tracking-wider">
25 |             Difficulty:
26 |             <span
27 |               className={`mx-1 px-2 py-[2px] rounded-full ${bgColor} ${textColor}`}
28 |             >
29 |               {difficulty}
30 |             </span>
31 |           </span>
32 |           <span className="mt-1 text-slate-500 text-base font-medium font-codefont tracking-wider flex items-center">
33 |             Phase: {phase}
34 |           </span>
35 |         </div>
36 |       </li>
37 |     </>
38 |   );
39 | };
40 | 
41 | const getColor = (difficulty: string) => {
42 |   let result = { bgColor: "", textColor: "" };
43 | 
44 |   const bgValues = {
45 |     easy: "bg-green-200",
46 |     medium: "bg-yellow-200",
47 |     hard: "bg-red-200",
48 |   };
49 |   const textColor = {
50 |     easy: "text-green-700",
51 |     medium: "text-yellow-700",
52 |     hard: "text-red-700",
53 |   };
54 | 
55 |   if (difficulty === "Easy") {
56 |     result.bgColor = bgValues.easy;
57 |     result.textColor = textColor.easy;
58 |   } else if (difficulty === "Medium") {
59 |     result.bgColor = bgValues.medium;
60 |     result.textColor = textColor.medium;
61 |   } else if (difficulty === "Hard") {
62 |     result.bgColor = bgValues.hard;
63 |     result.textColor = textColor.hard;
64 |   }
65 | 
66 |   return result;
67 | };
68 | 
69 | export default EachPR;
70 | 


--------------------------------------------------------------------------------
/styles/globals.css:
--------------------------------------------------------------------------------
 1 | /* **************************** Fonts **************************** */
 2 | 
 3 | @import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap");
 4 | @import url("https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700&display=swap");
 5 | @import url("https://fonts.googleapis.com/css2?family=Quicksand:wght@500;600;700&display=swap");
 6 | @import url("https://fonts.googleapis.com/css2?family=Orbitron:wght@500;600;700;800&display=swap");
 7 | 
 8 | /* **************************** Site General Settings **************************** */
 9 | 
10 | * {
11 |   margin: 0;
12 |   padding: 0;
13 | }
14 | 
15 | @tailwind base;
16 | @tailwind components;
17 | @tailwind utilities;
18 | 
19 | /* **************************** Body Settings **************************** */
20 | 
21 | body {
22 |   background: #ffffff;
23 |   font-family: "Inter", sans-serif;
24 | }
25 | 
26 | /* **************************** Scroll Bar **************************** */
27 | 
28 | ::-webkit-scrollbar {
29 |   width: 8px;
30 |   height: 8px;
31 |   background: transparent;
32 | }
33 | ::-webkit-scrollbar-thumb {
34 |   background: #222831;
35 |   border-radius: 2px;
36 | }
37 | 
38 | #div_ScrollBar::-webkit-scrollbar {
39 |   width: 6px;
40 |   height: 6px;
41 |   background: transparent;
42 | }
43 | #div_ScrollBar::-webkit-scrollbar-track {
44 |   background: #e2e8f0;
45 |   border-radius: 4px;
46 | }
47 | #div_ScrollBar::-webkit-scrollbar-thumb {
48 |   background: #94a3b8;
49 |   border-radius: 4px;
50 | }
51 | 
52 | /* **************************** Selection **************************** */
53 | 
54 | ::selection {
55 |   color: #222831;
56 |   background: #f7f0c2;
57 | }
58 | 
59 | /* **************************** User Select None **************************** */
60 | 
61 | img,
62 | .noselect {
63 |   user-select: none;
64 |   -webkit-user-select: none;
65 |   -moz-user-select: none;
66 |   -ms-user-select: none;
67 | 
68 |   pointer-events: none;
69 | 
70 |   -webkit-user-drag: none;
71 |   -moz-user-drag: none;
72 |   -o-user-drag: none;
73 | }
74 | 
75 | .user_image {
76 |   position: relative !important;
77 | }
78 | 
79 | /* **************************** Custom Fonts **************************** */
80 | 
81 | @font-face {
82 |   font-family: "Blanka";
83 |   src: url(../assets/Blanka.otf);
84 | }
85 | 
86 | /* **************************** Styles End **************************** */
87 | 


--------------------------------------------------------------------------------
/components/PRModal.tsx:
--------------------------------------------------------------------------------
 1 | import EachPR from "./EachPR";
 2 | import { XIcon } from "@heroicons/react/outline";
 3 | import { useRecoilState, useRecoilValue } from "recoil";
 4 | import { modalState } from "../atoms/modalAtom";
 5 | import { selectedUserState } from "../atoms/selectedUserAtom";
 6 | import { TableDataType } from "../types";
 7 | import { parseName } from "../utils/parseName";
 8 | 
 9 | const PRModal = () => {
10 |   const [val, setModalOpen] = useRecoilState(modalState);
11 |   const userData: TableDataType = useRecoilValue(selectedUserState);
12 | 
13 |   return (
14 |     <div className="w-full h-screen fixed left-0 top-0 z-10 bg-[rgba(0,0,0,0.6)] flex justify-center items-center">
15 |       <div className="relative bg-white px-2 py-2 rounded-md pb-6 max-w-[90vw]">
16 |         <div className="absolute top-4 right-4">
17 |           <XIcon
18 |             className="h-10 w-10 cursor-pointer rounded-full p-1 text-red-600 hover:bg-red-100 transition"
19 |             onClick={() => setModalOpen(false)}
20 |           />
21 |         </div>
22 |         <div className="mt-6 px-5 lg:px-2">
23 |           <h2 className="my-[2px] text-2xl text-slate-500 font-medium font-codefont tracking-wide">
24 |             Name:
25 |             <span className="mx-2 text-slate-700">
26 |               {parseName(userData.full_name)}
27 |             </span>
28 |           </h2>
29 |           <h2 className="my-[3px] text-lg text-slate-500 font-medium font-codefont tracking-wide">
30 |             Total Points:
31 |             <span className="mx-2 text-xl text-slate-700">
32 |               {userData.total_points}
33 |             </span>
34 |           </h2>
35 |           <h2 className="my-[3px] text-lg text-slate-500 font-medium font-codefont tracking-wide">
36 |             Total PR Count:
37 |             <span className="mx-2 text-xl text-slate-700">
38 |               {userData.pr_urls.length}
39 |             </span>
40 |           </h2>
41 | 
42 |           <p className="mt-4 text-lg text-slate-600 font-medium font-codefont tracking-wide">
43 |             PR Links:
44 |           </p>
45 | 
46 |           <div
47 |             className="max-h-[65vh] pr-12 pt-3 pb-4 mt-2 overflow-y-scroll"
48 |             id="div_ScrollBar"
49 |           >
50 |             <ol className="list-decimal ml-10 w-full">
51 |               {userData.pr_urls.map((prData) => (
52 |                 <EachPR
53 |                   key={prData.url}
54 |                   link={prData.url}
55 |                   difficulty={prData.difficulty}
56 |                   phase={prData.phase}
57 |                 />
58 |               ))}
59 |             </ol>
60 |           </div>
61 |         </div>
62 |       </div>
63 |     </div>
64 |   );
65 | };
66 | 
67 | export default PRModal;
68 | 


--------------------------------------------------------------------------------
/components/TopCard.tsx:
--------------------------------------------------------------------------------
 1 | import Image from "next/image";
 2 | import { useRecoilState } from "recoil";
 3 | import { modalState } from "../atoms/modalAtom";
 4 | import { selectedUserState } from "../atoms/selectedUserAtom";
 5 | import { TableDataType } from "../types";
 6 | import { parseName } from "../utils/parseName";
 7 | 
 8 | const TopCard = ({ userData }: { userData: TableDataType }) => {
 9 |   const [i, setModal] = useRecoilState(modalState);
10 |   const [j, setUserData] = useRecoilState(selectedUserState);
11 | 
12 |   return (
13 |     <div className="relative m-auto p-2 w-full flex justify-center align-center flex-col bg-darkwhite shadow-[0_0_4px_rgba(50,69,107,0.2)] rounded-[6px] z-[1] overflow-hidden">
14 |       <div className="m-auto w-full flex justify-center align-center flex-col bg-primarylight rounded-[6px]">
15 |         <h2 className="mt-2.5 mb-0 mx-auto text-4xl font-medium font-codefont text-darkwhite text-center tracking-[0.8px]">
16 |           {userData.total_points}
17 |         </h2>
18 |         <p className="-mt-[2px] mb-2.5 mx-auto text-lg font-medium font-mainfont text-darkwhite text-center tracking-[0.8px]">
19 |           Points
20 |         </p>
21 |         <span className="-mt-[2px] mb-2.5 mx-auto px-5 py-1 text-xl font-medium font-codefont text-lightblack bg-darkwhite text-center tracking-[0.2px] rounded-[4px]">
22 |           Rank: {userData.rank}
23 |         </span>
24 |       </div>
25 | 
26 |       <div className="flex flex-col items-center mt-4">
27 |         <div className="w-24 h-24 relative rounded-full overflow-hidden shadow lg:w-20 lg:h-20">
28 |           <Image
29 |             src={userData.avatar_url}
30 |             alt={userData.user_name}
31 |             layout="fill"
32 |             objectFit="cover"
33 |             quality={100}
34 |             className="w-full h-full user_image"
35 |           />
36 |         </div>
37 |         <h1 className="my-2 mx-auto text-2xl font-medium font-codefont text-darkblack text-center tracking-[0.2px]">
38 |           {parseName(userData.full_name)}
39 |         </h1>
40 |         <a
41 |           href={userData.user_url}
42 |           target="_blank"
43 |           rel="noreferrer"
44 |           className="m-auto px-5 py-1 text-lg font-medium font-mainfont text-darkblack bg-primaryoff text-center italic tracking-[0.2px] rounded-[8px]"
45 |         >
46 |           {userData.user_name}
47 |         </a>
48 |         <p className="my-2 mx-auto text-lg font-medium font-mainfont text-lightblack text-center italic tracking-[0.2px] lg:text-base">
49 |           {userData.college}
50 |         </p>
51 |         <button
52 |           onClick={() => {
53 |             setModal(true);
54 |             setUserData(userData);
55 |           }}
56 |           className="m-auto mb-1.5 px-3 py-1 text-lg font-bold font-curlfont text-sky-600 bg-sky-100 hover:bg-sky-200 text-center rounded-full transition"
57 |         >
58 |           View All PRs
59 |         </button>
60 |       </div>
61 |     </div>
62 |   );
63 | };
64 | 
65 | export default TopCard;
66 | 


--------------------------------------------------------------------------------
/components/UserCard.tsx:
--------------------------------------------------------------------------------
 1 | import Image from "next/image";
 2 | import { useRecoilState } from "recoil";
 3 | import { modalState } from "../atoms/modalAtom";
 4 | import { selectedUserState } from "../atoms/selectedUserAtom";
 5 | import { TableDataType } from "../types";
 6 | import { parseName } from "../utils/parseName";
 7 | 
 8 | const UserCard = ({ data, index }: { data: TableDataType; index: number }) => {
 9 |   const [isModalOpen, setModalOpen] = useRecoilState(modalState);
10 |   const [userData, setUserData] = useRecoilState(selectedUserState);
11 | 
12 |   return (
13 |     <tr>
14 |       <td className="p-5 border-b border-gray-200 bg-darkwhite lg:hidden">
15 |         <p className="font-mainfont text-lg font-medium text-darkgrey text-center">
16 |           {index + 4}
17 |         </p>
18 |       </td>
19 |       <td className="border-b border-gray-200 bg-darkwhite">
20 |         <p className="items-center font-codefont text-xl font-semibold text-primarydark text-center lg:px-3 lg:py-4 lg:text-lg md:text-base">
21 |           # {data.rank}
22 |         </p>
23 |       </td>
24 |       <td className="p-5 border-b border-gray-200 bg-darkwhite w-1/2 lg:px-3 lg:py-4">
25 |         <div className="flex items-center">
26 |           <div className="flex-shrink-0 w-12 h-12 mr-5 lg:hidden">
27 |             <Image
28 |               className="w-full h-full rounded-full"
29 |               src={data.avatar_url}
30 |               alt={data.user_name}
31 |               height={60}
32 |               width={60}
33 |             />
34 |           </div>
35 |           <div>
36 |             <p className="font-codefont text-xl font-medium text-lightblack tracking-wide capitalize lg:text-lg md:text-base">
37 |               {parseName(data.full_name) || (
38 |                 <span className="text-lightgrey">Name not found...</span>
39 |               )}
40 |             </p>
41 |             <p className="font-curlfont text-base font-semibold text-darkgrey lg:hidden">
42 |               {data.college || (
43 |                 <span className="text-warningoff">College not found...</span>
44 |               )}
45 |             </p>
46 |           </div>
47 |         </div>
48 |       </td>
49 |       <td className="p-5 border-b border-gray-200 bg-darkwhite lg:hidden">
50 |         <a
51 |           href={data.user_url}
52 |           target="_blank"
53 |           rel="noreferrer"
54 |           className="py-1 px-4 font-codefont text-base font-medium text-lightblack bg-primaryoff rounded-lg tracking-wide text-center"
55 |         >
56 |           {data.user_name}
57 |         </a>
58 |       </td>
59 |       <td className="p-5 border-b text-center border-gray-200 bg-darkwhite text-center lg:hidden">
60 |         <p
61 |           className="py-1 px-3 cursor-pointer font-curlfont text-base font-bold text-lightblack w-fit hover:text-darkwhite hover:bg-primarylight transition rounded-lg text-center"
62 |           onClick={() => {
63 |             setModalOpen(true);
64 |             setUserData(data);
65 |           }}
66 |         >
67 |           View All PRs
68 |         </p>
69 |       </td>
70 |       <td className="p-5 border-b border-gray-200 bg-darkwhite text-center lg:px-3 lg:py-4 xs:hidden">
71 |         <span className="font-codefont text-xl font-medium text-lightblack lg:text-base">
72 |           {data.total_points}
73 |         </span>
74 |       </td>
75 |     </tr>
76 |   );
77 | };
78 | 
79 | export default UserCard;
80 | 


--------------------------------------------------------------------------------
/assets/jwoc_logo.svg:
--------------------------------------------------------------------------------
1 | <svg id="OBJECTS" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 457.15 332"><defs><style>.cls-1{fill:url(#linear-gradient);}.cls-2,.cls-4,.cls-5{fill:#f7f0c2;}.cls-2,.cls-4,.cls-5,.cls-6{stroke-miterlimit:10;}.cls-2,.cls-5{stroke-width:5px;}.cls-2{stroke:url(#linear-gradient-2);}.cls-3{fill:url(#linear-gradient-3);}.cls-4{stroke-width:7px;stroke:url(#linear-gradient-4);}.cls-5{stroke:url(#linear-gradient-5);}.cls-6{fill:#1d4cb0;stroke:#1d9dcd;stroke-width:2px;}</style><linearGradient id="linear-gradient" x1="354.27" y1="141.25" x2="354.27" y2="414.25" gradientUnits="userSpaceOnUse"><stop offset="0.21" stop-color="#1d9dcd"/><stop offset="0.43" stop-color="#1678ad"/><stop offset="0.91" stop-color="#05195b"/><stop offset="1" stop-color="#01064b"/></linearGradient><linearGradient id="linear-gradient-2" x1="433.46" y1="283.75" x2="585.11" y2="283.75" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#1d9dcd"/><stop offset="0.15" stop-color="#1678ad"/><stop offset="0.49" stop-color="#05195b"/><stop offset="0.56" stop-color="#01064b"/><stop offset="1" stop-color="#1d9dcd"/></linearGradient><linearGradient id="linear-gradient-3" x1="354.46" y1="276.75" x2="354.46" y2="383.22" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#f7f0c2"/><stop offset="0.15" stop-color="#f2efc4"/><stop offset="0.34" stop-color="#e3edc9"/><stop offset="0.54" stop-color="#c9ead3"/><stop offset="0.76" stop-color="#a6e6df"/><stop offset="0.98" stop-color="#7ae0f0"/><stop offset="1" stop-color="#76e0f1"/></linearGradient><linearGradient id="linear-gradient-4" x1="247.67" y1="167.52" x2="473.35" y2="167.52" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#1d9dcd"/><stop offset="0.16" stop-color="#1678ad"/><stop offset="0.51" stop-color="#05195b"/><stop offset="0.58" stop-color="#01064b"/><stop offset="1" stop-color="#1d9dcd"/></linearGradient><linearGradient id="linear-gradient-5" x1="290.63" y1="370.08" x2="180.97" y2="180.14" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#1d9dcd"/><stop offset="0.08" stop-color="#1c98c8"/><stop offset="0.17" stop-color="#1989bb"/><stop offset="0.27" stop-color="#1570a6"/><stop offset="0.38" stop-color="#0e4d88"/><stop offset="0.5" stop-color="#062162"/><stop offset="0.56" stop-color="#01064b"/><stop offset="0.56" stop-color="#01084c"/><stop offset="0.67" stop-color="#0b3d7a"/><stop offset="0.77" stop-color="#13669e"/><stop offset="0.86" stop-color="#1884b8"/><stop offset="0.94" stop-color="#1c96c7"/><stop offset="1" stop-color="#1d9dcd"/></linearGradient></defs><title>jwoc_logo</title><g id="Main_Logo" data-name="Main Logo"><path id="Back" class="cls-1" d="M381.09,411.38a111.17,111.17,0,0,0,17.76-4.06c56.2-18,96.73-69.23,96.73-129.57,0-75.39-63.27-136.5-141.31-136.5S213,202.36,213,277.75s63.27,136.5,141.31,136.5h.1a109.08,109.08,0,0,0,16-1.28Z" transform="translate(-127.96 -82.25)"/><path id="C" class="cls-2" d="M568.68,235.35l13.51-34.52a5.19,5.19,0,0,0-4.83-7.08H478.53c-24.62,0-42.57,19.95-42.57,44.56v92.88c0,24.61,18,42.56,42.57,42.56h98.89c3.64,0,6.15-1.65,4.84-5l-13.61-35.57a6.86,6.86,0,0,0-6.39-4.39H474.57a4.6,4.6,0,0,1-4.61-4.6V243.4a4.6,4.6,0,0,1,4.65-4.6l87.63.9A6.83,6.83,0,0,0,568.68,235.35Z" transform="translate(-127.96 -82.25)"/><path id="O" class="cls-3" d="M336.64,382.77c-23.29-6.45-38.73-30.76-36.46-56.55,2.51-28.44,27.09-50.15,55.64-49.45A54.51,54.51,0,0,1,372,382.87s-5,1.88-5-3.12,2.91-19.52-2.71-24.75a.16.16,0,0,1,.08-.29c3.87-.43,36.52-5.18,18.63-41a28.57,28.57,0,0,0,0-14,25.24,25.24,0,0,0-15,6,51.26,51.26,0,0,0-27,0s-8-6-14-6c0,0-4,5-1,14,0,0-18.94,34.9,17.85,41a.13.13,0,0,1,.1.17c-.32.94-2.13,6.23-3,7.86-1,2-11.47,2-13.69-2.15a17.51,17.51,0,0,0-1.59-2.63c-2.21-2.84-6.89-7.77-10.56-4.37a.17.17,0,0,0,0,.27c1.09.88,7.53,6.19,8.67,10.61a4.59,4.59,0,0,0,1.78,2.58,17.64,17.64,0,0,0,14.64,2.9.59.59,0,0,1,.75.57v10.22S340.31,383.79,336.64,382.77Z" transform="translate(-127.96 -82.25)"/><path id="W" class="cls-4" d="M251.71,93.63l73.22,153.76a3.3,3.3,0,0,0,6,0L361,181.75l31,65.64a3.29,3.29,0,0,0,6,0l71.41-153.8a5.51,5.51,0,0,0-5-7.83H436.48a5.54,5.54,0,0,0-5,3.19L395,167.75l-32.08-67a2.1,2.1,0,0,0-3.79,0l-31.13,67L291.44,88.94a5.51,5.51,0,0,0-5-3.19H256.69A5.51,5.51,0,0,0,251.71,93.63Z" transform="translate(-127.96 -82.25)"/><path id="J" class="cls-5" d="M222,334.56c-3,5.54-5.54,11.53-5.54,18.3a33,33,0,1,0,49.47-28.61l.36-94.9A33,33,0,1,0,231,230.86l.46,63.39a79.88,79.88,0,0,0-28-5c-17,0-23.17-28.9-23.17-28.9,8.57-6,16.17-17.87,16.17-29.1A33,33,0,1,0,147,259.86s-4.54,60.39,64.46,67.39C211.46,327.25,224.53,329.86,222,334.56Z" transform="translate(-127.96 -82.25)"/><g id="J_o"><circle id="J_o-2" data-name="J_o" class="cls-6" cx="119.5" cy="269" r="16"/><circle id="J_o-3" data-name="J_o" class="cls-6" cx="119.5" cy="121" r="16"/><circle id="J_o-4" data-name="J_o" class="cls-6" cx="34.5" cy="151" r="16"/></g></g></svg>


--------------------------------------------------------------------------------
/pages/index.tsx:
--------------------------------------------------------------------------------
  1 | import type { NextPage } from "next";
  2 | import Head from "next/head";
  3 | import Script from "next/script";
  4 | import { ChangeEvent, useState, useEffect } from "react";
  5 | import Fuse from "fuse.js";
  6 | import { useRecoilValue } from "recoil";
  7 | import { modalState } from "../atoms/modalAtom";
  8 | 
  9 | import Table from "../components/Table";
 10 | import Header from "../components/Header";
 11 | import Footer from "../components/Footer";
 12 | import MetaTags from "../components/MetaTags";
 13 | 
 14 | import data from "../data.json";
 15 | import PRModal from "../components/PRModal";
 16 | import TopCard from "../components/TopCard";
 17 | import { TableDataType } from "../types";
 18 | import { generateConfetti } from "../utils/generateConfetti";
 19 | 
 20 | const Home: NextPage = () => {
 21 |   const isModalOpen = useRecoilValue(modalState);
 22 | 
 23 |   const [tableData, setTableData] = useState(
 24 |     data.data.slice(3, data.data.length)
 25 |   );
 26 |   const [searchText, setSearchText] = useState("");
 27 |   const [searchedData, setSearchedData] = useState<TableDataType[]>();
 28 | 
 29 |   const handleSearch = (
 30 |     e: ChangeEvent<HTMLTextAreaElement | HTMLInputElement>
 31 |   ) => {
 32 |     setSearchText(e.target.value);
 33 |     const fuse = new Fuse(tableData as TableDataType[], {
 34 |       keys: ["user_name", "full_name", "college"],
 35 |       threshold: 0.2,
 36 |     });
 37 |     const result = fuse.search(e.target.value).map((item) => item.item);
 38 |     setSearchedData(result);
 39 |   };
 40 | 
 41 |   useEffect(() => {
 42 |     generateConfetti();
 43 |   }, []);
 44 | 
 45 |   return (
 46 |     <>
 47 |       <Head>
 48 |         <title>Leaderboard | JWoC 2K22</title>
 49 |         <link
 50 |           rel="shortcut icon"
 51 |           type="image/png"
 52 |           href="https://jwoc.tech/assets/img/favicon.png"
 53 |         />
 54 |         <MetaTags />
 55 |       </Head>
 56 | 
 57 |       <Script
 58 |         src="https://www.googletagmanager.com/gtag/js?id=G-ESEG18CYHY"
 59 |         strategy="afterInteractive"
 60 |       />
 61 | 
 62 |       <Script id="google-analytics" strategy="afterInteractive">
 63 |         {`
 64 |            window.dataLayer = window.dataLayer || [];
 65 |               function gtag(){dataLayer.push(arguments);}
 66 |               gtag('js', new Date());
 67 |               gtag('config', 'G-ESEG18CYHY', { page_path: window.location.pathname });
 68 |         `}
 69 |       </Script>
 70 | 
 71 |       <Header />
 72 | 
 73 |       <section className="relative mx-auto mt-32 mb-12">
 74 |         <div className="px-5 lg:px-0">
 75 |           <div className="relative my-10 mx-auto flex justify-center items-center flex-col text-center lg:mx-8 sm:mx-2">
 76 |             <h2 className="my-1.5 pt-0 px-2 pb-2 font-['Blanka'] text-[2rem] font-bold text-lightblack tracking-[4px] rounded-lg bg-[rgba(255,255,255,0.8)] shadow-[0_0_4px_rgba(50,69,107,0.2)] md:text-[1rem]">
 77 |               JWoC 2K22 Leaderboard
 78 |             </h2>
 79 |             <p className="my-4 font-codefont text-2xl font-medium text-lightblack tracking-wide">
 80 |               Check your rank here!
 81 |             </p>
 82 |             <p className="my-2 font-codefont text-lg font-medium text-lightblack tracking-wide">
 83 |               Last updated on:
 84 |               <span className="mx-0.5 font-curlfont font-bold text-primarydark italic">
 85 |                 {new Date(data.lastUpdated).toLocaleString("en-US", {
 86 |                   dateStyle: "full",
 87 |                   timeStyle: "full",
 88 |                 })}
 89 |               </span>
 90 |             </p>
 91 |           </div>
 92 | 
 93 |           <div className="relative my-10 px-12 flex justify-center items-center gap-8 lg:px-8 sm:px-2 md:flex-col">
 94 |             <TopCard userData={data.data[0]} />
 95 |             <TopCard userData={data.data[1]} />
 96 |             <TopCard userData={data.data[2]} />
 97 |           </div>
 98 | 
 99 |           <div className="my-12 mx-12 lg:mx-8 sm:mx-2">
100 |             <input
101 |               type="search"
102 |               className="h-14 w-full px-3 py-3 font-codefont text-lg text-lightblack font-medium shadow focus:outline-none border-[3px] border-darkgrey tracking-wider rounded-lg"
103 |               placeholder="Search for your Name, GitHub username or college"
104 |               value={searchText}
105 |               onChange={handleSearch}
106 |             />
107 |           </div>
108 | 
109 |           <Table
110 |             data={searchText ? (searchedData as TableDataType[]) : tableData}
111 |           />
112 |         </div>
113 |       </section>
114 | 
115 |       {isModalOpen && <PRModal />}
116 | 
117 |       <Footer />
118 |     </>
119 |   );
120 | };
121 | 
122 | export default Home;
123 | 


--------------------------------------------------------------------------------
/backend/generate.js:
--------------------------------------------------------------------------------
  1 | const { default: axios } = require("axios");
  2 | const { MongoClient } = require("mongodb");
  3 | const { writeJson } = require("./utils/writeJson");
  4 | 
  5 | const dotenv = require("dotenv");
  6 | dotenv.config();
  7 | const ACCESS_TOKEN = process.env.GH_ACCESS_TOKEN;
  8 | 
  9 | const { allRepos } = require("./utils/allRepos");
 10 | const repos = allRepos;
 11 | 
 12 | const eventLabel = "jwoc";
 13 | const levelsData = {
 14 |   easy: "Easy",
 15 |   medium: "Medium",
 16 |   hard: "Hard",
 17 | };
 18 | let finalData = [];
 19 | 
 20 | const MONGODB_URL = process.env.MONGODB_URL;
 21 | const client = new MongoClient(MONGODB_URL);
 22 | 
 23 | const fetchAllData = async () => {
 24 |   for (let i = 0; i < repos.length; i++) {
 25 |     const repoName = repos[i];
 26 |     const data = await fetchRepoData(repoName);
 27 |     console.log(`Completed for: ${repos[i]}`);
 28 |     console.log("!.!.!.!.!.!.!");
 29 |     console.log("*************");
 30 |     finalData = [...finalData, ...data];
 31 |   }
 32 | 
 33 |   let leaderboardData = generateRank(finalData).sort((a, b) =>
 34 |     a.total_points < b.total_points ? 1 : -1
 35 |   );
 36 | 
 37 |   let rank = 1;
 38 | 
 39 |   for (let pos = 0; pos < leaderboardData.length; pos++) {
 40 |     const currentData = leaderboardData[pos];
 41 | 
 42 |     const { full_name, college } = await getDatafromDB(currentData.user_name);
 43 | 
 44 |     currentData.full_name = full_name;
 45 |     currentData.college = college;
 46 | 
 47 |     if (pos === 0) {
 48 |       currentData.rank = rank;
 49 |     } else {
 50 |       const prevData = leaderboardData[pos - 1];
 51 |       if (prevData.total_points > currentData.total_points) {
 52 |         rank++;
 53 |         currentData.rank = rank;
 54 |       } else {
 55 |         currentData.rank = rank;
 56 |       }
 57 |     }
 58 |   }
 59 | 
 60 |   writeJson({
 61 |     lastUpdated: new Date(),
 62 |     data: leaderboardData,
 63 |   });
 64 | };
 65 | 
 66 | const getDatafromDB = async (userName) => {
 67 |   let finalData = { full_name: "", college: "" };
 68 |   try {
 69 |     const db = client.db("jwoc");
 70 |     const collection = db.collection("mentees");
 71 |     const data = await collection.findOne({ $text: { $search: userName } });
 72 |     if (data) {
 73 |       finalData.full_name = data.name;
 74 |       finalData.college = data.college;
 75 |     }
 76 |   } catch (error) {
 77 |     console.log(error);
 78 |   }
 79 | 
 80 |   return finalData;
 81 | };
 82 | 
 83 | let counter = 0;
 84 | 
 85 | const fetchRepoData = async (repoName) => {
 86 |   let pageCount = 1;
 87 |   let pageAvailabe = true;
 88 |   let allData = [];
 89 | 
 90 |   while (pageAvailabe) {
 91 |     const reqUrl = `https://api.github.com/repos/${repoName}/pulls?state=closed&per_page=100&page=${pageCount}`;
 92 |     try {
 93 |       counter++;
 94 |       console.log(
 95 |         `${counter}. Fetching data for: ${repoName} and pageCount: ${pageCount}`
 96 |       );
 97 |       const res = await axios.get(reqUrl, {
 98 |         headers: {
 99 |           authorization: `token ${ACCESS_TOKEN}`,
100 |           "User-Agent": "request",
101 |           Accept: "application/vnd.github.v3+json",
102 |         },
103 |       });
104 |       const resData = res.data;
105 | 
106 |       console.log(
107 |         `Data has been fetched for: ${repoName} and pageCount: ${pageCount}`
108 |       );
109 |       // await sleep(2000);
110 |       console.log("_____________");
111 | 
112 |       if (resData.length !== 0) {
113 |         const jwocData = filterJwoc(resData);
114 |         allData = [...allData, ...jwocData];
115 |         pageCount++;
116 |       } else {
117 |         pageAvailabe = false;
118 |       }
119 |     } catch (error) {
120 |       console.log(error.message);
121 |       pageAvailabe = false;
122 |       process.exit(1);
123 |     }
124 |   }
125 | 
126 |   return allData;
127 | };
128 | 
129 | const filterJwoc = (allData) => {
130 |   let finalData = [];
131 | 
132 |   const jwocData = allData.filter((prData) => {
133 |     let isJwoc = false;
134 |     if (prData.merged_at) {
135 |       prData.labels.map((eachLabel) => {
136 |         if (eachLabel.name.toLowerCase().includes(eventLabel.toLowerCase())) {
137 |           isJwoc = true;
138 |         }
139 |       });
140 |     }
141 | 
142 |     return isJwoc;
143 |   });
144 | 
145 |   if (jwocData.length !== 0) {
146 |     jwocData.map((prData) => {
147 |       const data = {
148 |         user_name: prData.user.login,
149 |         avatar_url: prData.user.avatar_url,
150 |         user_url: prData.user.html_url,
151 |         pr_url: prData.html_url,
152 |         labels: prData.labels.map((labelData) => labelData.name),
153 |         phase: getPhase(prData.created_at),
154 |       };
155 |       finalData = [...finalData, data];
156 |     });
157 |   }
158 | 
159 |   return finalData;
160 | };
161 | 
162 | const getPhase = (created_at) => {
163 |   const phase1deadlineISO = "2022-02-28T18:31:00.000Z";
164 |   const deadline1 = new Date(phase1deadlineISO);
165 |   const createdAtDate = new Date(created_at);
166 | 
167 |   if (createdAtDate > deadline1) return 2;
168 |   return 1;
169 | };
170 | 
171 | const generateRank = (fullData) => {
172 |   let finalData = [];
173 | 
174 |   fullData.map((eachPrData) => {
175 |     const index = finalData.findIndex(
176 |       (data) => data.user_name === eachPrData.user_name
177 |     );
178 | 
179 |     const { point, difficulty } = getPoints(
180 |       eachPrData.labels,
181 |       eachPrData.phase
182 |     );
183 | 
184 |     if (index === -1) {
185 |       const userData = {
186 |         user_name: eachPrData.user_name,
187 |         avatar_url: eachPrData.avatar_url,
188 |         user_url: eachPrData.user_url,
189 |         total_points: point,
190 |         pr_urls: [
191 |           {
192 |             url: eachPrData.pr_url,
193 |             difficulty: difficulty,
194 |             phase: eachPrData.phase,
195 |           },
196 |         ],
197 |       };
198 | 
199 |       finalData = [...finalData, userData];
200 |     } else {
201 |       finalData[index].total_points += point;
202 |       finalData[index].pr_urls.push({
203 |         url: eachPrData.pr_url,
204 |         difficulty: difficulty,
205 |         phase: eachPrData.phase,
206 |       });
207 |     }
208 |   });
209 | 
210 |   return finalData;
211 | };
212 | 
213 | const getPoints = (labelsArray, phase) => {
214 |   let point = 0,
215 |     difficulty = "";
216 | 
217 |   labelsArray.map((label) => {
218 |     if (label.toLowerCase().includes(levelsData.easy.toLowerCase())) {
219 |       difficulty = levelsData.easy;
220 |       if (phase === 1) {
221 |         point = 1;
222 |       } else {
223 |         point = 2;
224 |       }
225 |     }
226 |     if (label.toLowerCase().includes(levelsData.medium.toLowerCase())) {
227 |       difficulty = levelsData.medium;
228 |       if (phase === 1) {
229 |         point = 3;
230 |       } else {
231 |         point = 4;
232 |       }
233 |     }
234 |     if (label.toLowerCase().includes(levelsData.hard.toLowerCase())) {
235 |       difficulty = levelsData.hard;
236 |       if (phase === 1) {
237 |         point = 5;
238 |       } else {
239 |         point = 8;
240 |       }
241 |     }
242 |   });
243 | 
244 |   return { point, difficulty };
245 | };
246 | 
247 | client
248 |   .connect()
249 |   .then(() => fetchAllData().then(() => client.close()))
250 |   .catch((error) => console.log(error.message));
251 | 


--------------------------------------------------------------------------------