├── public
├── contestclock.png
├── contestclock.svg
└── vite.svg
├── src
├── assets
│ ├── leetcode-96.png
│ ├── icons8-alarm-64.png
│ ├── icons8-link-48.png
│ ├── icons8-calendar-48.png
│ ├── icons8-caution-48.png
│ ├── icons8-google-48.png
│ ├── icons8-leetcode-50.png
│ ├── icons8-stopwatch-48.png
│ ├── icons8-calendar-plus-48.png
│ ├── icons8-empty-hourglass-48.png
│ ├── contestclock.svg
│ ├── calendar.svg
│ ├── startTime.svg
│ ├── code-forces.svg
│ ├── g4gremind.svg
│ ├── geeks.svg
│ ├── geeksForGeeks.svg
│ ├── bell.svg
│ ├── leetcode.svg
│ ├── react.svg
│ ├── codeChef.svg
│ └── chefLogo.svg
├── utils
│ ├── constants.js
│ ├── appStore.js
│ ├── userSlice.js
│ ├── registeredContestsSlice.js
│ └── firebase.js
├── lib
│ └── utils.js
├── main.jsx
├── components
│ ├── Home.jsx
│ ├── Popovers.jsx
│ ├── CalendarUI.jsx
│ ├── AddCalendarWrapper.jsx
│ ├── AddCalendar.jsx
│ ├── ui
│ │ ├── popover.jsx
│ │ ├── accordion.jsx
│ │ ├── button.jsx
│ │ ├── card.jsx
│ │ └── calendar.jsx
│ ├── CalendarWrapper.jsx
│ ├── DayContests.jsx
│ ├── ContestList.jsx
│ ├── PopoverTriggerData.jsx
│ ├── ContestCalendar.jsx
│ ├── PopoverData.jsx
│ ├── Footer.jsx
│ ├── FilterContests.jsx
│ ├── RegisteredContests.jsx
│ ├── Shimmer
│ │ └── ShimmerList.jsx
│ ├── UpcomingWrapper.jsx
│ ├── Body.jsx
│ ├── UpcomingContests.jsx
│ ├── Header.jsx
│ └── CardsContest.jsx
├── App.jsx
└── index.css
├── jsconfig.json
├── .gitignore
├── vite.config.js
├── components.json
├── eslint.config.js
├── index.html
├── README.md
└── package.json
/public/contestclock.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SreekarSBS/ContestClock-UI/HEAD/public/contestclock.png
--------------------------------------------------------------------------------
/src/assets/leetcode-96.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SreekarSBS/ContestClock-UI/HEAD/src/assets/leetcode-96.png
--------------------------------------------------------------------------------
/src/utils/constants.js:
--------------------------------------------------------------------------------
1 | export const BASE_URL = location.hostname === "localhost" ? "http://localhost:3000" : "/api"
--------------------------------------------------------------------------------
/src/assets/icons8-alarm-64.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SreekarSBS/ContestClock-UI/HEAD/src/assets/icons8-alarm-64.png
--------------------------------------------------------------------------------
/src/assets/icons8-link-48.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SreekarSBS/ContestClock-UI/HEAD/src/assets/icons8-link-48.png
--------------------------------------------------------------------------------
/src/assets/icons8-calendar-48.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SreekarSBS/ContestClock-UI/HEAD/src/assets/icons8-calendar-48.png
--------------------------------------------------------------------------------
/src/assets/icons8-caution-48.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SreekarSBS/ContestClock-UI/HEAD/src/assets/icons8-caution-48.png
--------------------------------------------------------------------------------
/src/assets/icons8-google-48.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SreekarSBS/ContestClock-UI/HEAD/src/assets/icons8-google-48.png
--------------------------------------------------------------------------------
/src/assets/icons8-leetcode-50.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SreekarSBS/ContestClock-UI/HEAD/src/assets/icons8-leetcode-50.png
--------------------------------------------------------------------------------
/src/assets/icons8-stopwatch-48.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SreekarSBS/ContestClock-UI/HEAD/src/assets/icons8-stopwatch-48.png
--------------------------------------------------------------------------------
/src/assets/icons8-calendar-plus-48.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SreekarSBS/ContestClock-UI/HEAD/src/assets/icons8-calendar-plus-48.png
--------------------------------------------------------------------------------
/src/assets/icons8-empty-hourglass-48.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SreekarSBS/ContestClock-UI/HEAD/src/assets/icons8-empty-hourglass-48.png
--------------------------------------------------------------------------------
/jsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "baseUrl": ".",
4 | "paths": {
5 | "@/*": ["src/*"]
6 | }
7 | }
8 | }
9 |
--------------------------------------------------------------------------------
/src/lib/utils.js:
--------------------------------------------------------------------------------
1 | import { clsx } from "clsx";
2 | import { twMerge } from "tailwind-merge"
3 |
4 | export function cn(...inputs) {
5 | return twMerge(clsx(inputs));
6 | }
7 |
--------------------------------------------------------------------------------
/src/main.jsx:
--------------------------------------------------------------------------------
1 | import { StrictMode } from 'react'
2 | import { createRoot } from 'react-dom/client'
3 | import './index.css'
4 | import App from './App.jsx'
5 |
6 |
7 | createRoot(document.getElementById('root')).render(
8 |
9 |
10 |
11 | ,
12 | )
13 |
--------------------------------------------------------------------------------
/src/utils/appStore.js:
--------------------------------------------------------------------------------
1 | import { configureStore } from "@reduxjs/toolkit";
2 | import userReducer from "./userSlice"
3 | import registeredContestReducer from "./registeredContestsSlice"
4 | const appStore = configureStore({
5 | reducer : {
6 | user : userReducer,
7 | registeredContests : registeredContestReducer
8 | }
9 | })
10 |
11 |
12 | export default appStore
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | # Logs
2 | logs
3 | *.log
4 | npm-debug.log*
5 | yarn-debug.log*
6 | yarn-error.log*
7 | pnpm-debug.log*
8 | lerna-debug.log*
9 |
10 | node_modules
11 | dist
12 | dist-ssr
13 | *.local
14 | stats.html
15 | # Editor directories and files
16 | .vscode/*
17 | !.vscode/extensions.json
18 | .idea
19 | .DS_Store
20 | *.suo
21 | *.ntvs*
22 | *.njsproj
23 | *.sln
24 | *.sw?
25 |
--------------------------------------------------------------------------------
/src/utils/userSlice.js:
--------------------------------------------------------------------------------
1 | import { createSlice } from "@reduxjs/toolkit";
2 |
3 | const userSlice = createSlice({
4 | name : "user",
5 | initialState : null,
6 | reducers : {
7 | addUser : (state,action) => action.payload,
8 | removeUser : () => null
9 | }
10 | })
11 |
12 | export const {addUser,removeUser} = userSlice.actions
13 | export default userSlice.reducer
--------------------------------------------------------------------------------
/vite.config.js:
--------------------------------------------------------------------------------
1 | import { defineConfig } from 'vite'
2 | import react from '@vitejs/plugin-react'
3 | import tailwindcss from '@tailwindcss/vite'
4 | import { visualizer } from "rollup-plugin-visualizer";
5 |
6 | // https://vite.dev/config/
7 | export default defineConfig({
8 | plugins: [react() ,tailwindcss(),visualizer({ open: true })],
9 | build: {
10 | minify: "esbuild",
11 | }
12 | })
13 |
--------------------------------------------------------------------------------
/src/components/Home.jsx:
--------------------------------------------------------------------------------
1 |
2 |
3 | import CalendarUI from './CalendarUI'
4 | import ContestCalendar from './ContestCalendar'
5 | import ContestList from './ContestList'
6 |
7 |
8 |
9 |
10 | const Home = () => {
11 |
12 | return (
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 | )
21 | }
22 |
23 | export default Home
24 |
--------------------------------------------------------------------------------
/components.json:
--------------------------------------------------------------------------------
1 | {
2 | "$schema": "https://ui.shadcn.com/schema.json",
3 | "style": "new-york",
4 | "rsc": false,
5 | "tsx": false,
6 | "tailwind": {
7 | "config": "",
8 | "css": "src/index.css",
9 | "baseColor": "neutral",
10 | "cssVariables": true,
11 | "prefix": ""
12 | },
13 | "aliases": {
14 | "components": "@/components",
15 | "utils": "@/lib/utils",
16 | "ui": "@/components/ui",
17 | "lib": "@/lib",
18 | "hooks": "@/hooks"
19 | },
20 | "iconLibrary": "lucide"
21 | }
--------------------------------------------------------------------------------
/src/utils/registeredContestsSlice.js:
--------------------------------------------------------------------------------
1 | import { createSlice } from "@reduxjs/toolkit";
2 |
3 | const registeredContestSlice = createSlice({
4 | name : "registeredContests",
5 | initialState : null,
6 | reducers : {
7 | addContest : (state,action) => action.payload,
8 | removeContest : (state,action) => {
9 | const filteredContests = state.filter(item => item._id != action.payload)
10 | return filteredContests
11 | },
12 | clearContest :() => null
13 | }
14 | })
15 |
16 | export const {addContest,removeContest,clearContest} = registeredContestSlice.actions;
17 | export default registeredContestSlice.reducer
--------------------------------------------------------------------------------
/public/contestclock.svg:
--------------------------------------------------------------------------------
1 |
4 |
--------------------------------------------------------------------------------
/src/assets/contestclock.svg:
--------------------------------------------------------------------------------
1 |
4 |
--------------------------------------------------------------------------------
/src/assets/calendar.svg:
--------------------------------------------------------------------------------
1 |
7 |
--------------------------------------------------------------------------------
/src/components/Popovers.jsx:
--------------------------------------------------------------------------------
1 |
2 | import {
3 | Popover,
4 | PopoverContent,
5 | PopoverTrigger,
6 | } from "./ui/popover"
7 |
8 | import PopoverData from "./PopoverData";
9 | import PopoverTriggerData from "./PopoverTriggerData";
10 |
11 | const Popovers = ({eventInfo}) =>
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 | export default Popovers
--------------------------------------------------------------------------------
/src/components/CalendarUI.jsx:
--------------------------------------------------------------------------------
1 | import { useState } from "react";
2 | import { Calendar } from "./ui/calendar";
3 | import ContestList from "./ContestList";
4 | import { useNavigate } from "react-router-dom";
5 |
6 | const CalendarUI = () => {
7 | const [date, setDate] = useState(new Date());
8 | const navigate = useNavigate()
9 |
10 | const handleClick = (selectedDate) => {
11 | setDate(selectedDate)
12 | navigate("/contests/"+selectedDate)
13 | }
14 |
15 | return (
16 |
23 |
24 |
25 |
26 | );
27 | }
28 |
29 | export default CalendarUI;
30 |
--------------------------------------------------------------------------------
/src/assets/startTime.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/eslint.config.js:
--------------------------------------------------------------------------------
1 | import js from '@eslint/js'
2 | import globals from 'globals'
3 | import reactHooks from 'eslint-plugin-react-hooks'
4 | import reactRefresh from 'eslint-plugin-react-refresh'
5 | import { defineConfig, globalIgnores } from 'eslint/config'
6 |
7 | export default defineConfig([
8 | globalIgnores(['dist']),
9 | {
10 | files: ['**/*.{js,jsx}'],
11 | extends: [
12 | js.configs.recommended,
13 | reactHooks.configs['recommended-latest'],
14 | reactRefresh.configs.vite,
15 | ],
16 | languageOptions: {
17 | ecmaVersion: 2020,
18 | globals: globals.browser,
19 | parserOptions: {
20 | ecmaVersion: 'latest',
21 | ecmaFeatures: { jsx: true },
22 | sourceType: 'module',
23 | },
24 | },
25 | rules: {
26 | 'no-unused-vars': ['error', { varsIgnorePattern: '^[A-Z_]' }],
27 | },
28 | },
29 | ])
30 |
--------------------------------------------------------------------------------
/src/utils/firebase.js:
--------------------------------------------------------------------------------
1 | // Import the functions you need from the SDKs you need
2 | import { initializeApp } from "firebase/app";
3 | import { getAuth } from "firebase/auth";
4 | // TODO: Add SDKs for Firebase products that you want to use
5 | // https://firebase.google.com/docs/web/setup#available-libraries
6 |
7 | // Your web app's Firebase configuration
8 | // For Firebase JS SDK v7.20.0 and later, measurementId is optional
9 | const firebaseConfig = {
10 | apiKey: "AIzaSyBNDsqYa19R7cLAnU7VUw5ol6uQ6CUobmk",
11 | authDomain: "contesthub-8e38c.firebaseapp.com",
12 | projectId: "contesthub-8e38c",
13 | storageBucket: "contesthub-8e38c.firebasestorage.app",
14 | messagingSenderId: "146142469926",
15 | appId: "1:146142469926:web:a1d9820c335c5c4fe76be7",
16 | measurementId: "G-QZH2KBCZL1"
17 | };
18 |
19 | // Initialize Firebase
20 | const app = initializeApp(firebaseConfig);
21 | export const auth = getAuth(app);
--------------------------------------------------------------------------------
/src/assets/code-forces.svg:
--------------------------------------------------------------------------------
1 |
9 |
--------------------------------------------------------------------------------
/src/App.jsx:
--------------------------------------------------------------------------------
1 | import { BrowserRouter, Route, Routes } from "react-router-dom"
2 | import Body from "./components/Body"
3 | import Home from "./components/Home"
4 | import DayContests from "./components/DayContests"
5 | import ContestCalendar from "./components/ContestCalendar"
6 | import { Provider } from "react-redux"
7 | import appStore from "./utils/appStore"
8 | import RegisteredContests from "./components/RegisteredContests"
9 |
10 |
11 |
12 | function App() {
13 |
14 | return (
15 | <>
16 |
17 |
18 |
19 | }>
20 | } />
21 | } />
22 | } />
23 | } />
24 |
25 |
26 |
27 |
28 |
29 | )
30 | }
31 |
32 | export default App
33 |
--------------------------------------------------------------------------------
/src/components/AddCalendarWrapper.jsx:
--------------------------------------------------------------------------------
1 |
2 | import { AddToCalendarButton } from 'add-to-calendar-button-react'
3 | const AddCalendarWrapper = ({eventInfo,item,startDate,endDate,startTime,endTime}) => {
4 | const contestUrl = eventInfo?.event?.url || item?.contestUrl;
5 |
6 | return (
7 |
8 |
26 | )
27 | }
28 |
29 | export default AddCalendarWrapper
30 |
--------------------------------------------------------------------------------
/src/assets/g4gremind.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/src/assets/geeks.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/src/assets/geeksForGeeks.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
19 |
20 | Contest Clock
21 |
22 |
23 |
24 |
25 |
26 |
27 |
--------------------------------------------------------------------------------
/src/components/AddCalendar.jsx:
--------------------------------------------------------------------------------
1 |
2 | import { lazy, Suspense } from 'react';
3 | const AddCalendarWrapper = lazy(() => import("./AddCalendarWrapper"));
4 |
5 | const AddCalendar = ({eventInfo,item}) => {
6 | const startObj = new Date(eventInfo?.event?.extendedProps?.contestStartDate || item?.contestStartDate)
7 | const endObj = new Date(eventInfo?.event?.extendedProps?.contestEndDate || item?.contestEndDate)
8 | const startDate = startObj.toISOString().split('T')[0];
9 | const endDate = endObj.toISOString().split('T')[0]
10 |
11 | const toISTTime = (date) =>
12 | new Intl.DateTimeFormat('en-GB', {
13 | hour: '2-digit',
14 | minute: '2-digit',
15 | hour12: false,
16 | timeZone: Intl.DateTimeFormat().resolvedOptions().timeZone,
17 | }).format(date)
18 |
19 | const startTime = toISTTime(startObj)
20 | const endTime = toISTTime(endObj)
21 |
22 |
23 | return (
24 | Loading Calendar...}>
25 |
33 |
34 | )
35 | }
36 |
37 | export default AddCalendar
38 |
39 |
40 |
41 |
--------------------------------------------------------------------------------
/public/vite.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/src/assets/bell.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/src/assets/leetcode.svg:
--------------------------------------------------------------------------------
1 |
6 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # ⏰ ContestClock
2 |
3 | > Your all-in-one competitive programming calendar app. Stay updated with upcoming contests across platforms like Codeforces, LeetCode, CodeChef, and more — all in one beautiful and responsive interface.
4 |
5 | ---
6 |
7 | ## 🚀 Features
8 |
9 | - 📅 Full calendar view with color-coded contest platforms
10 | - 🔔 Contest reminders & real-time updates
11 | - 💾 Save contests you're interested in
12 | - 🧑💻 Firebase authentication (Google login)
13 | - 🗓️ Add contests directly to your personal calendar with the built-in "Add to Calendar" feature.
14 | - 📊 Contest filtering by platform
15 | - 📌 Personalized dashboard with saved contests
16 | - 🎨 Responsive UI built with TailwindCSS and Ant Design
17 | - ⚙️ Backend with Express.js, MongoDB, and Firebase Admin SDK
18 |
19 | ---
20 |
21 |
22 | ## 🛠️ Tech Stack
23 |
24 | **Frontend**
25 | - React.js (with Vite)
26 | - TailwindCSS + Ant Design
27 | - Firebase Auth
28 |
29 | **Backend**
30 | - Node.js + Express.js
31 | - MongoDB (Mongoose)
32 | - Firebase Admin SDK (Token Verification)
33 |
34 | **Dev Tools**
35 | - Axios
36 | - FullCalendar.js
37 | - React-Toastify
38 | - Resend for notifications
39 |
40 | ---
41 |
42 | ## 🔧 Setup & Installation
43 |
44 | ### 1. Clone the repository
45 |
46 | ```bash
47 | git clone https://github.com/SreekarSBS/ContestClock-UI.git
48 | cd ContestClock
49 | ```
50 | ### 2. Setup the Frontend
51 | ```bash
52 | npm run dev
53 | ```
54 | ### Backend Microservice - [Contest Clock](https://github.com/SreekarSBS/ContestClock.git)
55 |
--------------------------------------------------------------------------------
/src/components/ui/popover.jsx:
--------------------------------------------------------------------------------
1 | import * as React from "react"
2 | import * as PopoverPrimitive from "@radix-ui/react-popover"
3 |
4 | import { cn } from "../../lib/utils"
5 |
6 | function Popover({
7 | ...props
8 | }) {
9 | return ;
10 | }
11 |
12 | function PopoverTrigger({
13 | ...props
14 | }) {
15 | return ;
16 | }
17 |
18 | function PopoverContent({
19 | className,
20 | align = "center",
21 | sideOffset = 4,
22 | ...props
23 | }) {
24 | return (
25 |
26 |
35 |
36 | );
37 | }
38 |
39 | function PopoverAnchor({
40 | ...props
41 | }) {
42 | return ;
43 | }
44 |
45 | export { Popover, PopoverTrigger, PopoverContent, PopoverAnchor }
46 |
--------------------------------------------------------------------------------
/src/components/CalendarWrapper.jsx:
--------------------------------------------------------------------------------
1 | import FullCalendar from "@fullcalendar/react";
2 | import dayGridPlugin from "@fullcalendar/daygrid";
3 | import Popovers from "./Popovers";
4 | import { useLocation } from "react-router-dom";
5 | const CalendarWrapper = ({events,savedEvents,handleClick}) => {
6 | const location = useLocation()
7 | return (
8 |
9 | {location.pathname === "/contest" &&
Scheduled Contests
}
10 |
{
13 | //console.log("Selected Date Range:", info.startStr, "to", info.endStr);
14 | }}
15 | plugins={[dayGridPlugin]}
16 | initialView="dayGridMonth"
17 | events={location.pathname === "/" && events || location.pathname === "/contest" && savedEvents}
18 | eventContent={(eventInfo) =>
19 |
20 | }
21 | dayCellContent={(arg) => {
22 | return (
23 | handleClick(arg)}
26 | style={{ cursor: "pointer" }}
27 | >
28 | {arg.dayNumberText}
29 |
30 | );
31 | }}
32 | eventClick={(info) => {
33 | // console.log(info);
34 |
35 | info.jsEvent.preventDefault();
36 | // window.open(info.event.url);
37 | }}
38 | />
39 | {children}
58 |
59 | );
60 | }
61 |
62 | export { Accordion, AccordionItem, AccordionTrigger, AccordionContent }
63 |
--------------------------------------------------------------------------------
/src/components/DayContests.jsx:
--------------------------------------------------------------------------------
1 | import { BASE_URL } from '../utils/constants'
2 | import axios from 'axios'
3 | import React, { useEffect, useState } from 'react'
4 | import { useParams } from 'react-router-dom'
5 | import CardsContest from './CardsContest'
6 | import Alert from '@mui/material/Alert';
7 |
8 |
9 |
10 |
11 | const DayContests = () => {
12 | const [contests,setContests] = useState([])
13 | useEffect(() => {
14 | fetchDayContests()
15 | },[])
16 |
17 | const {date} = useParams()
18 | const newDate = new Date(date)
19 | const options = { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' };
20 | const formattedDate = newDate.toLocaleString('en-us',options)
21 |
22 | const fetchDayContests = async() => {
23 | try {
24 | const res = await axios.get(BASE_URL + "/contests/day/"+date,{
25 | withCredentials : true
26 | })
27 |
28 | setContests(res?.data?.data)
29 |
30 | }catch(err){
31 | // console.log(err);
32 | }
33 | }
34 | let msg;
35 | if(newDate > new Date()) msg = "No Contests Scheduled on " + formattedDate;
36 | else if(newDate < new Date) msg = "No Contests were Conducted on " + formattedDate
37 | else msg = "No Contests for Today! Keep Practicing "
38 |
39 |
40 |
41 |
42 | return contests.length > 0 ? (
43 |
44 |
{formattedDate}
45 |
46 | {
47 | contests?.map((item) => {
48 | return
52 | })
53 | }
54 |
55 |
59 |
60 | {msg}
61 |
62 |
55 |
56 | Upcoming Contests
57 |
58 |
59 |
60 |
61 | {(!contests) &&
}
62 | {(contests?.length === 0) ?
63 | Looks Like there are no upcoming contests for the selected platforms. Please select other platforms or try again later.
64 |
65 |
66 |
67 |
:
68 |
}
69 |
}
9 | {
10 | eventInfo.event.extendedProps?.platform === "leetcode" && 
}
11 | {
12 | eventInfo.event.extendedProps?.platform === "atcoder" && 
}
13 | {eventInfo.event.extendedProps.platform === "codeforces"&& 
}
14 | {eventInfo.event.extendedProps.contestName}
15 |
16 | )
17 | }
18 |
19 | export default PopoverTriggerData
20 |
--------------------------------------------------------------------------------
/src/components/ContestCalendar.jsx:
--------------------------------------------------------------------------------
1 |
2 | import { lazy, Suspense, useState } from "react";
3 | import { useNavigate, useOutletContext } from "react-router-dom";
4 | import { BASE_URL } from "../utils/constants";
5 |
6 | const CalendarWrapper = lazy(() => import("./CalendarWrapper"));
7 | import { Bounce, toast } from "react-toastify";
8 | import { useSelector } from "react-redux";
9 | import {
10 | Card,
11 | CardAction,
12 | CardContent,
13 | CardDescription,
14 | CardFooter,
15 | CardHeader,
16 | CardTitle,
17 | } from "../components/ui/card"
18 | import { Button } from "./ui/button";
19 | import { GoogleAuthProvider, signInWithPopup } from "firebase/auth";
20 | import { auth } from "../utils/firebase";
21 |
22 |
23 |
24 | const ContestCalendar = () => {
25 | const navigate = useNavigate();
26 | const [date, setDate] = useState(new Date());
27 | const user = useSelector((store) => store.user);
28 |
29 | const context = useOutletContext()
30 | const events = context[2]
31 | let savedEvents = context[3]
32 |
33 | // console.log(date);
34 | const handleSignIn = async() => {
35 | const provider = new GoogleAuthProvider()
36 | signInWithPopup(auth, provider)
37 | .then((result) => {
38 |
39 | const credential = GoogleAuthProvider.credentialFromResult(result);
40 | const token = credential.accessToken;
41 | // console.log(token);
42 | toast.success('Logged In Successfully !', {
43 | position: "top-right",
44 | autoClose: 5000,
45 | hideProgressBar: false,
46 | closeOnClick: false,
47 | pauseOnHover: true,
48 | draggable: true,
49 | progress: undefined,
50 | theme: "dark",
51 | transition: Bounce,
52 | });
53 | const user = result.user;
54 | // console.log(user);
55 |
56 |
57 | }).catch((error) => {
58 |
59 |
60 | const errorMessage = error.message;
61 |
62 | // console.log(errorMessage);
63 |
64 | });
65 | }
66 | if(!user && location.pathname === "/contest") {
67 | savedEvents = [];
68 |
69 | return
70 |
71 |
72 | Login to ContestClock
73 | Sign In with Google
74 |
75 | 
76 |
77 |
78 |
79 |
80 |
81 |
82 |
83 |
84 |
85 | To Track Your Saved Contests
86 | please sign in with your Google Account
87 |
88 |
89 |
{eventInfo?.event?.title}
15 |
16 |
17 |
{new Date(eventInfo?.event?.extendedProps?.contestStartDate).toLocaleString('en-us',options)}
18 |
20 |
23 |
{new Date(eventInfo?.event?.extendedProps?.contestStartDate).toLocaleString('en-us',optionsTimer)}
24 |
26 |
27 |
{ Math.floor(Number(eventInfo?.event?.extendedProps?.contestDuration)/3600) } : {String(Math.floor(Number(eventInfo?.event?.extendedProps?.contestDuration)%3600/60)).padStart(2, "0")} hrs
28 |
30 |
31 | {
32 | new Date(eventInfo?.event?.extendedProps?.contestEndDate) >= new Date() ?
33 | <>
34 |
Register Now
35 | :<>
36 |
37 |
Contest Ended
38 | }
39 |
40 |
43 |
44 | )
45 | }
46 |
47 | export default PopoverData
48 |
--------------------------------------------------------------------------------
/src/components/Footer.jsx:
--------------------------------------------------------------------------------
1 | import { Link } from "react-router-dom"
2 |
3 |
4 | const Footer = () => {
5 | return (
6 |
46 | )
47 | }
48 |
49 | export default Footer
50 |
--------------------------------------------------------------------------------
/src/assets/react.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/src/components/FilterContests.jsx:
--------------------------------------------------------------------------------
1 | import { Switch } from 'antd';
2 | import React from 'react'
3 | import { useOutletContext } from 'react-router-dom';
4 | import CODE_FORCES_ICON from "../assets/code-forces.svg"
5 | import GEEKS_LOGO from "../assets/geeks.svg"
6 | import CHEF_ICON from "../assets/chefLogo.svg"
7 | import LEETCODE_ICON from "../assets/leetcode-96.png"
8 | const FilterContests = () => {
9 | const context = useOutletContext()
10 | const visibleContests = context[0];
11 | const setVisibleContests = context[1];
12 | const handleFilterGeeksForGeeks = (checked) => {
13 | if(!checked) setVisibleContests((item) => item.filter(contest => contest !== 'geeksforgeeks' ) )
14 | else setVisibleContests(prev =>
15 | prev.includes('geeksforgeeks') ? prev : [...prev, 'geeksforgeeks']
16 | );
17 | }
18 | const handleFilterLeetcode = (checked) => {
19 | if(!checked) setVisibleContests((item) => item.filter(contest => contest !== 'leetcode' ) )
20 | else setVisibleContests(prev =>
21 | prev.includes('leetcode') ? prev : [...prev, 'leetcode']
22 | );
23 | }
24 | const handleFilterAtcoder = (checked) => {
25 | if(!checked) setVisibleContests((item) => item.filter(contest => contest !== 'atcoder' ) )
26 | else setVisibleContests(prev =>
27 | prev.includes('atcoder') ? prev : [...prev, 'atcoder']
28 | );
29 | }
30 | const handleFilterCodeChef = (checked) => {
31 | if(!checked) setVisibleContests((item) => item.filter(contest => contest !== 'codechef' ) )
32 | else setVisibleContests(prev =>
33 | prev.includes('codechef') ? prev : [...prev, 'codechef']
34 | );
35 | }
36 | const handleFilterCodeForces = (checked) => {
37 | if(!checked) setVisibleContests((item) => item.filter(contest => contest !== 'codeforces' ) )
38 | else setVisibleContests(prev =>
39 | prev.includes('codeforces') ? prev : [...prev, 'codeforces']
40 | );
41 | }
42 | return (
43 |
44 |
45 |
46 | 
47 |
49 |
50 |
51 | 
52 | {/* 
*/}
53 |
54 |
55 |
57 |
58 |
59 | 
60 |
62 |
63 |
64 | 
65 |
66 |
68 |
69 |
70 |
71 |
73 |
74 |
63 |
64 |
65 | Login to ContestClock
66 | Sign In with Google
67 |
68 | 
69 |
70 |
71 |
72 |
73 |
74 |
75 |
76 |
77 |
78 | To Track Your Saved Contests
79 | please sign in with your Google Account
80 |
81 |
82 |
93 |
Saved Contests
94 |
95 |
98 |
99 |
100 | No Saved Contests
101 | Looks like you haven't kept any reminders to contests yet.
102 |
103 | 
104 |
105 |
106 |
107 |
108 |
109 |
110 |
111 | Please explore and Press 🔔 to be notified an hour before contest inception.
112 |
113 |
114 |
115 |
121 |
122 |
123 |
Saved Contests
124 |
125 |
126 |
127 | { savedContests?.map((item) => {
128 |
129 | return
134 |
135 | } )}
136 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
item.contestName
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
item.contestName
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
32 |
item.contestName
33 |
34 |
35 |
36 |
37 |
38 |
39 |
40 |
41 |
42 |
item.contestName
43 |
44 |
45 |
46 |
47 |
48 |
49 |
50 |
51 |
52 |
item.contestName
53 |
54 |
55 |
56 |
57 |
58 |
59 |
60 |
61 |
62 |
item.contestName
63 |
64 |
65 |
66 |
67 |
68 |
69 |
70 |
71 |
72 |
73 |
74 |
23 |
24 | {item?.platform === "geeksforgeeks" &&
}
25 | {item?.platform === "codeforces" &&
26 | } { item?.platform === "codechef" &&
}
27 | {
28 | item?.platform === "leetcode" &&
}
29 | {
30 | item?.platform === "atcoder" &&
}
31 |
32 |
33 |
34 | {item?.contestName}
35 |
36 |
Register
37 | { savedContests?.some(contest => contest._id === item?._id) ?
handleDeleteContest(item?._id)} className='cursor-pointer hover:text-black hover:bg-gradient-to-bl from-green-600 to-emerald-500 p-1.5 m-2 md:p-2 border border-blue-400 rounded-2xl'>
38 |
39 |
40 |
41 |
42 | :
43 |
handleRemindClick(item?._id)} className='cursor-pointer hover:text-black hover:bg-gradient-to-bl from-green-600 to-emerald-500 p-1.5 m-2 md:p-2 border border-blue-400 rounded-2xl'>
44 |
45 |
46 |
47 |
48 | }
49 |
50 |
51 |
52 |
53 |
55 |
56 |
57 |
58 |
59 |
60 |
![]({CALENDAR_ICON}alt="calendar"/)
61 |
{new Date(item.contestStartDate).toLocaleString('en-us',options)}
62 |
63 |
64 |
65 |
{new Date(item?.contestStartDate).toLocaleString('en-us',optionsTimer)}
66 |
67 |
68 |
69 |
70 |
71 |
72 |
73 |
74 |
75 |
{ Math.floor(Number(item?.contestDuration)/3600) } : {String(Math.floor(Number(item?.contestDuration)%3600/60)).padStart(2, "0")} hrs
76 |
77 |
78 |
79 |
81 |
82 |
83 |
182 |
183 |
184 |
185 |
186 |
187 |
188 |
189 |
190 |
191 |
192 |
193 |
194 | )
195 | }
196 |
197 | export default Body
198 |
--------------------------------------------------------------------------------
/src/components/UpcomingContests.jsx:
--------------------------------------------------------------------------------
1 | import React, { lazy, Suspense } from 'react'
2 | import { useDispatch, useSelector } from 'react-redux';
3 | const UpcomingWrapper = lazy(() => import('./UpcomingWrapper'));
4 | import {
5 | Accordion,
6 | } from "./ui/accordion"
7 | import { addContest } from '../utils/registeredContestsSlice';
8 | import { Bounce, toast } from 'react-toastify';
9 | import axios from 'axios';
10 | import { BASE_URL } from '../utils/constants';
11 | import { useOutletContext } from 'react-router-dom';
12 |
13 |
14 |
15 |
16 | const UpcomingContests = ({contests}) => {
17 | const dispatch = useDispatch()
18 | const context = useOutletContext();
19 | const user = useSelector(store => store.user)
20 | const savedContests = useSelector(store => store.registeredContests)
21 | const options = { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric'};
22 | const optionsTimer = { hour : 'numeric',minute : 'numeric'}
23 |
24 | const setSavedEvents = context[4]
25 | const handleRemindClick = async(contestId) => {
26 | try{
27 | if(!user) toast.error('Please Login to register Contests!', {
28 | position: "top-right",
29 | autoClose: 5000,
30 | hideProgressBar: false,
31 | closeOnClick: false,
32 | pauseOnHover: true,
33 | draggable: true,
34 | progress: undefined,
35 | theme: "dark",
36 | transition: Bounce,
37 | });
38 | const res = await axios.post(BASE_URL + "/user/saveContests/" + contestId ,{},{
39 | withCredentials : true,
40 | headers : {
41 | 'Authorization' : "Bearer " + user?.token
42 | }
43 | })
44 | const formattedObject = res?.data?.data?.savedContests.
45 | map((item) => {
46 | const {
47 | platform,
48 | contestType,
49 | contestEndDate,
50 | contestSlug,
51 | contestRegistrationStartDate,
52 | contestRegistrationEndDate,
53 | contestName,
54 | contestDuration,
55 | contestCode,
56 | contestStartDate
57 | } = item;
58 | return {
59 | title: item?.contestName,
60 | start: item?.contestStartDate,
61 |
62 | url: item?.contestUrl,
63 | extendedProps: {
64 | contestStartDate,
65 | platform,
66 | contestEndDate,
67 | contestType,
68 | contestSlug,
69 | contestRegistrationStartDate,
70 | contestRegistrationEndDate,
71 | contestName,
72 | contestDuration,
73 | contestCode
74 | },
75 | };
76 | });
77 | setSavedEvents(formattedObject);
78 | dispatch(addContest(res?.data?.data.savedContests));
79 | // console.log(res?.data?.data.savedContests);
80 | toast.success('Reminder Set for an Hour before the contest !', {
81 | position: "top-right",
82 | autoClose: 5000,
83 | hideProgressBar: false,
84 | closeOnClick: false,
85 | pauseOnHover: true,
86 | draggable: true,
87 | progress: undefined,
88 | theme: "dark",
89 | transition: Bounce,
90 | });
91 | }
92 | catch(err){
93 | // console.log(err);
94 | }
95 | }
96 |
97 | const handleDeleteContest = async(contestId) => {
98 |
99 | try {
100 | const res = await axios.delete(BASE_URL +"/user/deleteContests/"+contestId,{
101 | withCredentials : true,
102 | headers : {
103 | 'Authorization': 'Bearer ' + user?.token
104 | }
105 | })
106 | const formattedObject = res?.data?.data?.savedContests.
107 | map((item) => {
108 | const {
109 | platform,
110 | contestType,
111 | contestEndDate,
112 | contestSlug,
113 | contestRegistrationStartDate,
114 | contestRegistrationEndDate,
115 | contestName,
116 | contestDuration,
117 | contestCode,
118 | contestStartDate
119 | } = item;
120 | return {
121 | title: item?.contestName,
122 | start: item?.contestStartDate,
123 |
124 | url: item?.contestUrl,
125 | extendedProps: {
126 | contestStartDate,
127 | platform,
128 | contestEndDate,
129 | contestType,
130 | contestSlug,
131 | contestRegistrationStartDate,
132 | contestRegistrationEndDate,
133 | contestName,
134 | contestDuration,
135 | contestCode
136 | },
137 | };
138 | });
139 | setSavedEvents(formattedObject);
140 | dispatch(addContest(res?.data?.data?.savedContests))
141 | // console.log(res?.data?.data?.savedContests);
142 | toast.success('Reminder removed Successfully !', {
143 | position: "top-right",
144 | autoClose: 5000,
145 | hideProgressBar: false,
146 | closeOnClick: false,
147 | pauseOnHover: true,
148 | draggable: true,
149 | progress: undefined,
150 | theme: "dark",
151 | transition: Bounce,
152 | });
153 | }catch(err){
154 | // console.log(err);
155 |
156 | }
157 | }
158 |
159 | return (
160 |
161 | {
162 | contests?.map((item,index) => {
163 | return (
164 |
165 | Loading...
108 |
109 |
110 |
113 |
116 | - Event Tracker
117 | {/* { -
118 | Parent
119 |
123 |
} */}
124 | - Reminders
125 |
126 |
127 |
128 |
129 |
132 |
ContestClock
133 | {/*
ContestClock */}
134 |
135 |
136 |
137 |
138 |
139 | - Event Tracker
140 | {/* -
141 |
142 | Parent
143 |
147 |
148 | */}
149 | - Saved Contests
150 |
151 |
152 |
153 | { !user?
154 |
155 |
156 |
157 | :
158 |
159 |
{user?.displayName}
160 |
161 |
162 |
167 |
168 |
169 |
175 |
176 |
177 | }
178 |
179 |
124 |
126 | {children}
127 |
128 | |
129 | );
130 | },
131 | ...components,
132 | }}
133 | {...props} />
134 | );
135 | }
136 |
137 | function CalendarDayButton({
138 | className,
139 | day,
140 | modifiers,
141 | ...props
142 | }) {
143 |
144 |
145 | const defaultClassNames = getDefaultClassNames()
146 |
147 | const ref = React.useRef(null)
148 | React.useEffect(() => {
149 | if (modifiers.focused) ref.current?.focus()
150 |
151 |
152 | }, [modifiers.focused])
153 |
154 |
155 | return (
156 |