onMouseDown(row,col)}
15 | onMouseEnter={() => onMouseEnter(row,col)}
16 | onMouseUp={() => onMouseUp(row,col)}
17 | />
18 | );
19 | }
20 | getClassName(){
21 | if(this.props.node.isWall === true){
22 | return "node node-wall";
23 | } else if( this.props.node.isStartNode === true ){
24 | return "node node-start";
25 | } else if( this.props.node.isEndNode === true ){
26 | return "node node-end";
27 | } else if(this.props.node.ispathNode){
28 | return 'node node-shortest-path';
29 | }else if( this.props.node.isVisited === true ){
30 | return "node node-visited";
31 | } else{
32 | return "node";
33 | }
34 | }
35 | }
36 |
37 | export default Node;
--------------------------------------------------------------------------------
/src/pages/algoVisualiser/pathfinder/components/simpleSelect.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { makeStyles } from '@material-ui/core/styles';
3 | import InputLabel from '@material-ui/core/InputLabel';
4 | import MenuItem from '@material-ui/core/MenuItem';
5 | import FormHelperText from '@material-ui/core/FormHelperText';
6 | import FormControl from '@material-ui/core/FormControl';
7 | import Select from '@material-ui/core/Select';
8 |
9 | const useStyles = makeStyles((theme) => ({
10 | formControl: {
11 | margin: theme.spacing(1),
12 | minWidth: 120,
13 | },
14 | selectEmpty: {
15 | marginTop: theme.spacing(2),
16 | },
17 | }));
18 |
19 | const SimpleSelect = (props) => {
20 | const classes = useStyles();
21 | const [age, setAge] = React.useState('0');
22 |
23 | const handleChange = (event) => {
24 | setAge(event.target.value);
25 | props.onAlgoChanged(event.target.value);
26 | };
27 |
28 | return (
29 |
30 |
31 | Algorithm
32 |
46 |
47 |
48 | );
49 | }
50 |
51 | export default SimpleSelect;
--------------------------------------------------------------------------------
/src/pages/algoVisualiser/pathfinder/darktheme.css:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Surya-0804/dsa-tracker-website/75916b037994bf278a4e50790cf2508647f088eb/src/pages/algoVisualiser/pathfinder/darktheme.css
--------------------------------------------------------------------------------
/src/pages/algoVisualiser/pathfinder/style.css:
--------------------------------------------------------------------------------
1 | .pathfinder nav {
2 | display: flex;
3 | justify-content: center;
4 | align-items: center;
5 | }
6 |
7 | .pathfinder {
8 | min-height: 95vh;
9 | }
10 |
11 | .PathFinder {
12 | height: 85vh;
13 | display: flex;
14 | flex-direction: column;
15 | align-items: center;
16 | justify-content: center;
17 | }
18 |
19 | .pathfinder .selectAlgo {
20 | display: flex;
21 | }
22 |
23 | .pathfinder .selectOtions {
24 | display: flex;
25 | flex-wrap: wrap;
26 | }
27 |
28 | .pathfinder .selectOptions button {
29 | background: #569E61;
30 | color: #fff;
31 | cursor: pointer;
32 | outline: none;
33 | border: none;
34 | font-size: 1.2rem;
35 | border-radius: 0.6rem;
36 | padding: 0.4rem 1rem;
37 | margin: 0 0.4rem;
38 | transition: 0.5s;
39 | }
40 |
41 | .pathfinder .selectOptions button:hover {
42 | color: #569E61;
43 | background: #fff;
44 | box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.4);
45 | transition: 0.5s;
46 | }
--------------------------------------------------------------------------------
/src/pages/algoVisualiser/primeNumbers/style.css:
--------------------------------------------------------------------------------
1 | .primeNumbers .main {
2 | min-height: 85vh;
3 | display: flex;
4 | justify-content: center;
5 | flex-direction: column;
6 | text-align: center;
7 | color: var(--main-green);
8 | }
9 |
10 | .primeNumbers .main h1 {
11 | color: var(--main-green);
12 | font-size: 2.5rem;
13 | margin: 0;
14 | }
15 |
16 | .primeNumbers .main h3 {
17 | font-size: 1.7rem;
18 | margin: 0;
19 | }
20 |
21 |
22 |
--------------------------------------------------------------------------------
/src/pages/algoVisualiser/recursiveSorting/style.css:
--------------------------------------------------------------------------------
1 | .recursiveSorting .main {
2 | min-height: 85vh;
3 | display: flex;
4 | justify-content: center;
5 | flex-direction: column;
6 | text-align: center;
7 | color: var(--main-green);
8 | }
9 |
10 | .recursiveSorting .main h1 {
11 | color: var(--main-green);
12 | font-size: 2.5rem;
13 | margin: 0;
14 | }
15 |
16 | .recursiveSorting .main h3 {
17 | font-size: 1.7rem;
18 | margin: 0;
19 | }
--------------------------------------------------------------------------------
/src/pages/algoVisualiser/sorting/components/doubleSlider.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import {makeStyles, withStyles} from '@material-ui/core/styles';
3 | import Typography from '@material-ui/core/Typography';
4 | import Slider from '@material-ui/core/Slider';
5 |
6 | const useStyles = makeStyles({
7 | root: {
8 | width: 200,
9 | },
10 | });
11 |
12 |
13 | const CSlider = withStyles({
14 | root: {
15 | // color: "#ffffff",
16 | height: 3,
17 | padding: "13px 0",
18 | },
19 | track: {
20 | height: 4,
21 | borderRadius: 2,
22 | },
23 | thumb: {
24 | backgroundColor: "#fff",
25 | //color: "#fff",
26 | },
27 | })(Slider);
28 |
29 | function valuetext(value) {
30 | return `${value}`;
31 | }
32 |
33 |
34 |
35 | export default function RangeSlider(props) {
36 | const classes = useStyles();
37 | const [value, setValue] = React.useState([20, 37]);
38 |
39 | const handleChange = (event, newValue) => {
40 | setValue(newValue);
41 |
42 | };
43 | const handleCommit = (event, newValue) => {
44 | console.log(newValue);
45 | };
46 |
47 | return (
48 |
49 |
59 |
60 | Value range
61 |
62 |
63 | );
64 | }
65 |
--------------------------------------------------------------------------------
/src/pages/algoVisualiser/sorting/components/formControlLabel.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import FormGroup from '@material-ui/core/FormGroup';
3 | import FormControlLabel from '@material-ui/core/FormControlLabel';
4 | import Switch from '@material-ui/core/Switch';
5 |
6 | export default function SwitchLabels(props) {
7 | const [state, setState] = React.useState({
8 | checkedA: false,
9 | });
10 |
11 | const handleChange = (event) => {
12 | setState({ ...state, [event.target.name]: event.target.checked });
13 | props.onDoubleChange(event.target.checked);
14 | };
15 |
16 | return (
17 |
18 | }
20 | label="Duo"
21 | disabled={props.disable}
22 | />
23 |
24 |
25 | );
26 | }
27 |
--------------------------------------------------------------------------------
/src/pages/algoVisualiser/sorting/components/navbar.jsx:
--------------------------------------------------------------------------------
1 | import React, {Component} from 'react';
2 | import {Link} from "react-router-dom";
3 |
4 | class Navbar extends Component {
5 | render() {
6 | return (
7 |
23 | );
24 | }
25 | }
26 |
27 | export default Navbar;
--------------------------------------------------------------------------------
/src/pages/algoVisualiser/sorting/components/rect.jsx:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import './style.css';
3 | class Rect extends Component {
4 |
5 | render() {
6 | return (
7 |
15 |
16 |
17 | );
18 | }
19 | checkColor = () => {
20 | if (this.props.rect.isSorted) {
21 | return "#569E61";
22 | } else if (this.props.rect.isSorting) {
23 | return "rgb(217, 72, 72)";
24 | } else {
25 | return "#292c29"
26 | }
27 | }
28 | }
29 |
30 | export default Rect;
--------------------------------------------------------------------------------
/src/pages/algoVisualiser/sorting/components/rects.jsx:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import Rect from "./rect";
3 | import FlipMove from 'react-flip-move';
4 |
5 | class Rects extends Component {
6 | render() {
7 | let margin = 5;
8 | if (this.props.rects.length > 50) {
9 | margin = 1;
10 | }
11 | return (
12 | <>
13 |
17 | {this.props.rects.map((rect, rectidx) => {
18 | return (
19 |
24 | );
25 | })}
26 |
27 |
28 | );
29 | }
30 | }
31 |
32 | export default Rects;
--------------------------------------------------------------------------------
/src/pages/algoVisualiser/sorting/components/simpleSelect.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { makeStyles } from '@material-ui/core/styles';
3 | import InputLabel from '@material-ui/core/InputLabel';
4 | import MenuItem from '@material-ui/core/MenuItem';
5 | import FormHelperText from '@material-ui/core/FormHelperText';
6 | import FormControl from '@material-ui/core/FormControl';
7 | import Select from '@material-ui/core/Select';
8 |
9 | const useStyles = makeStyles((theme) => ({
10 | formControl: {
11 | margin: theme.spacing(1),
12 | minWidth: 120,
13 | },
14 | selectEmpty: {
15 | marginTop: theme.spacing(2),
16 | },
17 | }));
18 |
19 | const SimpleSelect = (props) => {
20 | const classes = useStyles();
21 | const [age, setAge] = React.useState('0');
22 | const [state, setState] = React.useState({
23 | pos: props.pos,
24 | });
25 | const handleChange = (event) => {
26 | console.log(state.pos);
27 | setAge(event.target.value);
28 | props.onAlgoChanged(state.pos,event.target.value);
29 | };
30 |
31 | return (
32 |
33 |
34 | Algorithm
35 |
46 |
47 |
48 | );
49 | }
50 |
51 | export default SimpleSelect;
--------------------------------------------------------------------------------
/src/pages/algoVisualiser/sorting/components/slider.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { makeStyles } from '@material-ui/core/styles';
3 | import Typography from '@material-ui/core/Typography';
4 | import Slider from '@material-ui/core/Slider';
5 |
6 | const useStyles = makeStyles({
7 | root: {
8 | width: 200,
9 | },
10 | });
11 |
12 | function valuetext(value) {
13 | return `${value}`;
14 | }
15 |
16 |
17 | export default function DiscreteSlider(props) {
18 | const classes = useStyles();
19 | const handleChange = (event) =>{
20 | if( event.target.innerText === "" ){
21 | return;
22 | }
23 | const num = parseInt(event.target.innerText,10);
24 | props.onCountChange(num);
25 | }
26 | return (
27 |
28 |
29 |
42 |
43 | {props.title}
44 |
45 |
46 | );
47 | }
48 |
--------------------------------------------------------------------------------
/src/pages/algoVisualiser/sorting/components/style.css:
--------------------------------------------------------------------------------
1 | .rect{
2 | background-color: steelblue;
3 | outline: 1px black;
4 | height: 20px;
5 | width: 20px;
6 | border-radius: 5px;
7 | margin: 5px;
8 | }
--------------------------------------------------------------------------------
/src/pages/algoVisualiser/sorting/style.css:
--------------------------------------------------------------------------------
1 | .sorting .flip-move {
2 | justify-content: center;
3 | display: flex;
4 | align-items: flex-end;
5 | }
6 |
7 | .mainSorting {
8 | min-height: 85vh;
9 | display: flex;
10 | flex-direction: column;
11 | align-items: center;
12 | justify-content: center;
13 | }
14 |
15 | .sorting .mainSorting .nav {
16 | display: flex;
17 | flex-direction: column;
18 | width: 50vw;
19 | align-items: center;
20 | margin: 0 auto;
21 | }
22 |
23 | .sorting .mainSorting .nav .outer {
24 | display: flex;
25 | align-items: center;
26 | margin: 1.3rem 0;
27 | gap: 5vw;
28 | }
29 |
30 | .sorting .mainSorting .nav .outer div {
31 | display: flex;
32 | flex-direction: column;
33 | align-items: flex-start;
34 | justify-content: center;
35 | }
36 |
37 | .sorting .nav .visualize {
38 | margin-bottom: 4rem;
39 | }
40 |
41 | .sorting .nav button {
42 | font-family: 'poppins';
43 | width: auto;
44 | border: none;
45 | background: #569E61;
46 | color: #ffff;
47 | font-size: 1.1rem;
48 | font-family: "Poppins", sans-serif;
49 | font-weight: 450;
50 | font-style: normal;
51 | padding: 0.3rem 0.6rem;
52 | margin: 0.2rem 0.4rem;
53 | border-radius: 0.6rem;
54 | cursor: pointer;
55 | transition: 0.5s;
56 | }
57 |
58 | .sorting .nav button:hover {
59 | box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.2);
60 | transition: 0.2s;
61 | }
--------------------------------------------------------------------------------
/src/pages/algoVisualiser/sounds/buttonClick.mp3:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Surya-0804/dsa-tracker-website/75916b037994bf278a4e50790cf2508647f088eb/src/pages/algoVisualiser/sounds/buttonClick.mp3
--------------------------------------------------------------------------------
/src/pages/algoVisualiser/sounds/card-hover.mp3:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Surya-0804/dsa-tracker-website/75916b037994bf278a4e50790cf2508647f088eb/src/pages/algoVisualiser/sounds/card-hover.mp3
--------------------------------------------------------------------------------
/src/pages/algoVisualiser/sounds/card_flip.mp3:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Surya-0804/dsa-tracker-website/75916b037994bf278a4e50790cf2508647f088eb/src/pages/algoVisualiser/sounds/card_flip.mp3
--------------------------------------------------------------------------------
/src/pages/algoVisualiser/sounds/hover_quest.wav:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Surya-0804/dsa-tracker-website/75916b037994bf278a4e50790cf2508647f088eb/src/pages/algoVisualiser/sounds/hover_quest.wav
--------------------------------------------------------------------------------
/src/pages/algoVisualiser/sounds/loud_btn_clk.wav:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Surya-0804/dsa-tracker-website/75916b037994bf278a4e50790cf2508647f088eb/src/pages/algoVisualiser/sounds/loud_btn_clk.wav
--------------------------------------------------------------------------------
/src/pages/algoVisualiser/sounds/mech-keyboard.mp3:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Surya-0804/dsa-tracker-website/75916b037994bf278a4e50790cf2508647f088eb/src/pages/algoVisualiser/sounds/mech-keyboard.mp3
--------------------------------------------------------------------------------
/src/pages/auth/AuthContext.jsx:
--------------------------------------------------------------------------------
1 | import React, { createContext, useContext, useEffect, useState } from "react";
2 | import {
3 | getAuth,
4 | createUserWithEmailAndPassword,
5 | signInWithEmailAndPassword,
6 | signOut,
7 | onAuthStateChanged,
8 | } from "firebase/auth";
9 | import { app } from "./firebase";
10 |
11 | const AuthContext = createContext();
12 |
13 | export const useAuth = () => useContext(AuthContext);
14 |
15 | export const AuthProvider = ({ children }) => {
16 | const [currentUser, setCurrentUser] = useState(null);
17 | const [loading, setLoading] = useState(true);
18 | const auth = getAuth(app);
19 |
20 | const signup = (email, password) => {
21 | return createUserWithEmailAndPassword(auth, email, password);
22 | };
23 |
24 | const login = (email, password) => {
25 | return signInWithEmailAndPassword(auth, email, password);
26 | };
27 |
28 | const logout = () => {
29 | return signOut(auth);
30 | };
31 |
32 | useEffect(() => {
33 | const unsubscribe = onAuthStateChanged(auth, (user) => {
34 | setCurrentUser(user);
35 | setLoading(false);
36 | });
37 |
38 | return unsubscribe;
39 | }, [auth]);
40 |
41 | const value = {
42 | currentUser,
43 | signup,
44 | login,
45 | logout,
46 | };
47 |
48 | return (
49 |
50 | {!loading && children}
51 |
52 | );
53 | };
54 |
--------------------------------------------------------------------------------
/src/pages/auth/Dashboard.jsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import { useAuth } from "./AuthContext";
3 | import { useNavigate } from "react-router-dom";
4 |
5 | const Dashboard = () => {
6 | const { currentUser, logout } = useAuth();
7 | const navigate = useNavigate();
8 |
9 | const handleLogout = async () => {
10 | try {
11 | await logout();
12 | navigate("/login");
13 | } catch {
14 | console.error("Failed to log out");
15 | }
16 | };
17 |
18 | return (
19 |
20 |
Dashboard
21 |
Welcome, {currentUser.email}
22 |
23 |
24 | );
25 | };
26 |
27 | export default Dashboard;
28 |
--------------------------------------------------------------------------------
/src/pages/auth/PrivateRoute.jsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import { Navigate } from "react-router-dom";
3 | import { useAuth } from "./AuthContext";
4 |
5 | const PrivateRoute = ({ children }) => {
6 | const { currentUser } = useAuth();
7 |
8 | return currentUser ? children :
;
9 | };
10 |
11 | export default PrivateRoute;
12 |
--------------------------------------------------------------------------------
/src/pages/auth/firebase.js:
--------------------------------------------------------------------------------
1 | import { initializeApp } from "firebase/app";
2 | import { getFirestore } from "firebase/firestore";
3 | import { getAuth, GoogleAuthProvider } from "firebase/auth";
4 | const firebaseConfig = {
5 | apiKey: "AIzaSyC3a-2ZNR_bGh8D6jKZlfs95gVbv-t3RIM",
6 | authDomain: "skill-2040.firebaseapp.com",
7 | projectId: "skill-2040",
8 | storageBucket: "skill-2040.appspot.com",
9 | messagingSenderId: "613789960195",
10 | appId: "1:613789960195:web:b1b417578d902fcfb8a636",
11 | };
12 |
13 | const app = initializeApp(firebaseConfig);
14 | const db = getFirestore(app); // Initialize Firestore
15 | const auth = getAuth(app);
16 | const googleProvider = new GoogleAuthProvider();
17 |
18 |
19 | export { app, db, auth, googleProvider };
20 |
--------------------------------------------------------------------------------
/src/pages/components/PlaySound.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import useSound from 'use-sound';
3 | import loud_btn from './sounds/buttonClick.mp3';
4 |
5 | const PlaySound = ({ soundCallback }) => {
6 | const [play] = useSound(loud_btn);
7 |
8 | React.useEffect(() => {
9 | if (soundCallback) {
10 | soundCallback(play);
11 | }
12 | }, [soundCallback, play]);
13 |
14 | return null;
15 | };
16 |
17 | export default PlaySound;
18 |
--------------------------------------------------------------------------------
/src/pages/components/footer/Footer.jsx:
--------------------------------------------------------------------------------
1 | import React, { useState } from 'react';
2 | import { Link } from 'react-router-dom';
3 | import GVKDetails from '../gvkDetails/GVKDetails';
4 | import './style.css'
5 | import loud_btn from '../../pages/sounds/card-hover.mp3';
6 | import loud_btn2 from '../../pages/sounds/buttonClick.mp3';
7 | function Footer() {
8 | const sound = new Audio(loud_btn);
9 | const sound2 = new Audio(loud_btn2);
10 | const [isVisible, setIsVisible] = useState(false);
11 |
12 | const handleFooterClick = () => {
13 | sound.play();
14 | setIsVisible(true);
15 | };
16 |
17 | const handleClose = () => {
18 | sound2.play();
19 | setIsVisible(false);
20 | };
21 |
22 | return (
23 | <>
24 |
25 |
Made with ❤ by GantaVenkataKousik
26 |
27 |
28 | {isVisible &&
}
29 |
30 |
31 | );
32 | }
33 |
34 | export default Footer;
35 |
--------------------------------------------------------------------------------
/src/pages/components/footer/style.css:
--------------------------------------------------------------------------------
1 | .footer {
2 | background: #569E61;
3 | height: 5vh;
4 | display: flex;
5 | justify-content: center;
6 | align-items: center;
7 | opacity: 0.88;
8 | width: 100%;
9 | color: #fff;
10 | }
--------------------------------------------------------------------------------
/src/pages/components/gvkDetails/style.css:
--------------------------------------------------------------------------------
1 | .gvkdetails {
2 | position: fixed;
3 | top: 50%;
4 | left: 50%;
5 | transform: translate(-50%, -50%);
6 | background-color: white;
7 | border-radius: 8px;
8 | box-shadow: 0 2px 4px rgba(0, 0, 0, 0.8);
9 | padding: 20px;
10 | z-index: 1000;
11 | max-width: 90%;
12 | font-size: 1.2rem;
13 | color: #569E61;
14 | padding-bottom: 2rem;
15 | }
16 |
17 | .gvkdetails .container {
18 | text-align: center;
19 | }
20 |
21 | .gvkdetails .socialProfiles ul {
22 | display: flex;
23 | justify-content: center;
24 | flex-wrap: wrap;
25 | list-style-type: none;
26 | }
27 |
28 | .gvkdetails .socialProfiles ul li {
29 | margin: 10px;
30 | margin-top: 0px;
31 | width: 7vw;
32 | }
33 |
34 | .gvkdetails .socialProfiles a i {
35 | font-size: 45px;
36 | }
37 |
38 | .gvkdetails .socialProfiles a {
39 | text-decoration: none;
40 | color: #333;
41 | cursor: pointer;
42 | }
43 |
44 | .gvkdetails .close {
45 | position: absolute;
46 | top: 10px;
47 | right: 10px;
48 | cursor: pointer;
49 | }
50 |
51 | .gvkdetails .share {
52 | font-size: 1.5rem;
53 | margin: 0.4rem 0;
54 | }
55 |
56 | .gvkdetails h4 {
57 | font-weight: 500;
58 | font-size: 1.4rem;
59 | }
60 |
61 | .gvkdetails h2 {
62 | margin: 0.6rem 0;
63 | font-size: 1.8rem;
64 | }
65 |
66 | .gvkdetails .email a {
67 | color: #000;
68 | }
69 |
70 | .gvkdetails .mailme {
71 | margin-bottom: 0.4rem;
72 | }
--------------------------------------------------------------------------------
/src/pages/components/sounds/PlaySound.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import useSound from 'use-sound';
3 | import loud_btn from './sounds/buttonClick.wav';
4 |
5 | const PlaySound = ({ soundCallback }) => {
6 | const [play] = useSound(loud_btn);
7 |
8 | React.useEffect(() => {
9 | if (soundCallback) {
10 | soundCallback(play);
11 | }
12 | }, [soundCallback, play]);
13 |
14 | return null;
15 | };
16 |
17 | export default PlaySound;
18 |
--------------------------------------------------------------------------------
/src/pages/components/sounds/buttonClick.mp3:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Surya-0804/dsa-tracker-website/75916b037994bf278a4e50790cf2508647f088eb/src/pages/components/sounds/buttonClick.mp3
--------------------------------------------------------------------------------
/src/pages/components/sounds/hover_quest.wav:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Surya-0804/dsa-tracker-website/75916b037994bf278a4e50790cf2508647f088eb/src/pages/components/sounds/hover_quest.wav
--------------------------------------------------------------------------------
/src/pages/components/sounds/loud_btn_clk.wav:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Surya-0804/dsa-tracker-website/75916b037994bf278a4e50790cf2508647f088eb/src/pages/components/sounds/loud_btn_clk.wav
--------------------------------------------------------------------------------
/src/pages/contibutionboard/style.css:
--------------------------------------------------------------------------------
1 | .contribution-Container {
2 | margin: 0 auto;
3 | }
4 |
5 | .react-calendar-heatmap text {
6 | font-size: 0.5rem;
7 | fill: #aaa;
8 | }
9 |
10 | .react-calendar-heatmap .react-calendar-heatmap-small-text {
11 | font-size: 0.5vw;
12 | }
13 |
14 | .react-calendar-heatmap rect:hover {
15 | stroke: #555;
16 | stroke-width: 0.1vw;
17 | }
18 |
19 | .react-calendar-heatmap .color-empty {
20 | fill: #eeeeee;
21 | }
22 |
23 | .react-calendar-heatmap .color-scale-1 {
24 | fill: #d6e685;
25 | }
26 |
27 | .react-calendar-heatmap .color-scale-2 {
28 | fill: #8cc665;
29 | }
30 |
31 | .react-calendar-heatmap .color-scale-3 {
32 | fill: #44a340;
33 | }
34 |
35 | .react-calendar-heatmap .color-scale-4 {
36 | fill: #1e6823;
37 | }
38 |
39 | .react-calendar-heatmap rect {
40 | rx: 2px;
41 | ry: 2px;
42 | }
--------------------------------------------------------------------------------
/src/pages/dsajourney/components/ProblemHistory.jsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import "./style.css";
3 |
4 | export default function ProblemHistory({ problemName, timestamp, status }) {
5 | console.log("Received timestamp:", timestamp); // Debugging: Log the timestamp
6 |
7 | // Ensure the timestamp is valid
8 | const dateObject = new Date(timestamp);
9 | const formattedDate = isNaN(dateObject.getTime())
10 | ? "Invalid Date"
11 | : dateObject.toLocaleDateString();
12 | const formattedTime = isNaN(dateObject.getTime())
13 | ? "Invalid Time"
14 | : dateObject.toLocaleTimeString();
15 |
16 | // Define status colors
17 | const statusColors = {
18 | Solved: "rgba(50, 222, 132, 0.7)",
19 | Revision: "rgba(255, 159, 64, 0.7)",
20 | Unsolved: "rgba(229, 85, 78, 0.7)",
21 | Bookmarked: "rgba(54, 162, 235, 0.7)",
22 | "Showed Interest": "rgba(153, 102, 255, 0.7)",
23 | "Added Notes": "rgba(255, 205, 86, 0.7)",
24 | };
25 |
26 | // Set the background color based on the status
27 | const backgroundColor = statusColors[status] || "rgba(200, 200, 200, 0.7)"; // Default color if status is not found
28 |
29 | return (
30 |
31 |
32 |
{problemName}
{/* Display the problem name */}
33 | {formattedTime}
34 | {formattedDate}
35 |
36 |
37 | {status}
38 |
39 |
40 | );
41 | }
42 |
--------------------------------------------------------------------------------
/src/pages/dsajourney/components/style.css:
--------------------------------------------------------------------------------
1 | .problem-history-container {
2 | display: flex;
3 | font-family: "Poppins", system-ui;
4 | font-weight: 400;
5 | font-style: normal;
6 | width: 90vw;
7 | position: relative;
8 | align-items: center;
9 | border-bottom: 1px solid rgba(199, 194, 194, 1);
10 | padding: 1.5vw;
11 | box-sizing: border-box;
12 | }
13 |
14 | .problem-history-left-part h1 {
15 | font-weight: 400;
16 | font-size: 1.5rem;
17 | margin: 0;
18 | }
19 |
20 | .problem-history-left-part h2 {
21 | font-weight: 400;
22 | font-size: 2vh;
23 | margin: 0;
24 | margin-top: 1vh;
25 | }
26 |
27 | .problem-history-right-part {
28 | display: flex;
29 | justify-content: center;
30 | font-size: 2.6vh;
31 | font-weight: 600;
32 | height: fit-content;
33 | padding: 0.7vw 2.5vw;
34 | border-radius: 2vw;
35 | color: white;
36 | position: absolute;
37 | right: 0;
38 | }
39 |
40 | /* Responsive Styles */
41 | @media (max-width: 1000px) {
42 | .problem-history-container {
43 | width: 95vw;
44 | padding: 2vw;
45 | }
46 |
47 | .problem-history-left-part h1 {
48 | font-size: 1.3rem;
49 | }
50 |
51 | .problem-history-left-part h2 {
52 | font-size: 1.9vh;
53 | margin-top: 1.2vh;
54 | }
55 |
56 | .problem-history-right-part {
57 | font-size: 2.3vh;
58 | padding: 1vw 2vw;
59 | border-radius: 1.8vw;
60 | }
61 | }
62 |
63 | @media (max-width: 768px) {
64 | .problem-history-container {
65 | width: 95vw;
66 | padding: 2vw;
67 | }
68 |
69 | .problem-history-left-part h1 {
70 | font-size: 1.2rem;
71 | }
72 |
73 | .problem-history-left-part h2 {
74 | font-size: 1.8vh;
75 | margin-top: 1.5vh;
76 | }
77 |
78 | .problem-history-right-part {
79 | font-size: 2.2vh;
80 | padding: 1vw 2vw;
81 | border-radius: 1.5vw;
82 | }
83 | }
84 |
85 | @media (max-width: 430px) {
86 | .problem-history-container {
87 | width: 100vw;
88 | padding: 3vw;
89 | flex-direction: column;
90 | align-items: flex-start;
91 | }
92 |
93 | .problem-history-left-part h1 {
94 | font-size: 1rem;
95 | }
96 |
97 | .problem-history-left-part h2 {
98 | font-size: 1.5vh;
99 | margin-top: 1vh;
100 | }
101 |
102 | .problem-history-right-part {
103 | font-size: 2vh;
104 | padding: 1.5vw 2vw;
105 | border-radius: 1vw;
106 | position: relative; /* Ensures no overlap */
107 | margin-top: 2vw;
108 | }
109 | }
110 |
--------------------------------------------------------------------------------
/src/pages/dsajourney/style.css:
--------------------------------------------------------------------------------
1 | .dsa-journey {
2 | display: flex;
3 | flex-direction: column;
4 | align-items: center;
5 | }
6 | .dsa-journey-header {
7 | font-family: "Poppins", system-ui;
8 | font-weight: 700;
9 | font-style: normal;
10 | text-align: center;
11 | color: #393e46;
12 | font-size: 5vh;
13 | margin-top: 15vh;
14 | }
15 | @media (max-width: 770px) {
16 | .dsa-journey {
17 | padding-left: 1vw;
18 | padding-right: 1vw;
19 | }
20 | .dsa-journey-header {
21 | margin-top: 0;
22 | }
23 | }
24 |
--------------------------------------------------------------------------------
/src/pages/helpers/array_helpers.js:
--------------------------------------------------------------------------------
1 | /**
2 | * A set of monkey-patched Array helpers.
3 | * Probably a bad idea to use these in a real production environment.
4 | * Monkey-patching is confusing to anyone seeing the project for the first
5 | * time (or coming back to it after a few weeks).
6 | * That said, this is a simple demo project, so what the hell, let's break
7 | * some rules =D
8 | */
9 |
10 |
11 | /**
12 | * Array.prototype.swap
13 | * Rearrange an array to swap the positions of two elements.
14 | * @param {Number} a - the index of the first element to swap.
15 | * @param {Number} b - the index of the second element to swap.
16 | * @returns {Array}
17 | * @example
18 | * // returns [ 'a', 'c', 'b' ]
19 | * [ 'a', 'b', 'c' ].swap(1, 2)
20 | */
21 | Array.prototype.swap = function (a, b) {
22 | if ( b >= this.length || b < 0 ) return this;
23 |
24 | // Temporary variable to hold data while we juggle
25 | let temp = this[a];
26 | this[a] = this[b];
27 | this[b] = temp;
28 | return this;
29 | };
30 |
31 | /**
32 | * Array.range
33 | * Create a new array of length n, where the elements are numbers
34 | * from 0 to n - 1.
35 | * @param {Number} n - the desired length of the range.
36 | * @returns {Array}
37 | * @example
38 | * // returns [ 0, 1, 2, 3 ]
39 | * Array.range(4);
40 | */
41 | Array.range = n => Array.from(new Array(n), (x,i) => i);
42 |
43 | /**
44 | * Array.matrix
45 | * Create a new two-dimensional array, where each element is its own index.
46 | * @param {Number} x - the desired number of columns (possible x values)
47 | * @param {Number} y - the desired number of rows (possible y values)
48 | * @returns {Array}
49 | * @example
50 | * // returns [
51 | * // [ 0, 1, 2 ],
52 | * // [ 0, 1, 2 ]
53 | * // ]
54 | * Array.matrix(3, 2);
55 | */
56 | Array.matrix = (x, y) => {
57 | const rows = Array.range(y);
58 | const columns = Array.range(x);
59 | return rows.map( (row, i) => columns.slice() );
60 | }
61 |
--------------------------------------------------------------------------------
/src/pages/home/Home.jsx:
--------------------------------------------------------------------------------
1 | import './style.css'
2 | import React, { useState } from 'react';
3 | import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
4 | import Intro from './components/intro/Intro';
5 | import Problems from './problems/Problems.jsx'
6 | import { Analytics } from "@vercel/analytics/react";
7 | import Nav from '../../components/nav/Nav.jsx';
8 | import NewFooter from '../../components/footer/NewFooter.jsx';
9 | import DateStreak from '../../components/datestreak/DateStreak.jsx';
10 |
11 | function Home() {
12 | return (
13 |
22 | );
23 | }
24 |
25 | export default Home;
26 |
--------------------------------------------------------------------------------
/src/pages/home/components/Status/status.js:
--------------------------------------------------------------------------------
1 | const status = [
2 | "Solved",
3 | "Unsolved",
4 | "Revise"
5 | ];
6 | export default status;
--------------------------------------------------------------------------------
/src/pages/home/components/Status/style.css:
--------------------------------------------------------------------------------
1 | .difficulty .eachTopic {
2 | background: #ECECEC;
3 | padding: 0.4rem 1rem;
4 | border-radius: 1.4rem;
5 | font-size: 0.92rem;
6 | margin: 0.2rem;
7 | transition: 0.5s;
8 | cursor: pointer;
9 | }
10 |
11 | .difficulty .eachTopic:hover {
12 | background: #ECECEC;
13 | transition: 0.5s;
14 | box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.1);
15 | }
16 |
17 | .difficulty {
18 | border: 1.5px solid #ECECEC;
19 | border-radius: 2rem;
20 | height: auto;
21 | width: 20vw;
22 | margin-top: 3vh;
23 | }
24 |
25 | .difficulty .available-topics,
26 | .difficulty .selected {
27 |
28 | display: flex;
29 | flex-wrap: wrap;
30 | }
31 |
32 | .difficulty .topics {
33 | padding: 0.75rem;
34 | }
35 |
36 | .difficulty .selected .eachTopic {
37 | border: 1px solid rgb(208, 208, 208);
38 | background: #A1E5CD;
39 | }
40 |
41 |
42 | .difficulty .header {
43 | height: 4vh;
44 | background: #ECECEC;
45 | padding: 0.3rem 1.2rem;
46 | font-size: 1.3rem;
47 | display: flex;
48 | font-weight: 550;
49 | align-items: center;
50 | justify-content: center;
51 | color: rgb(65, 64, 64);
52 | font-size: 1.8rem;
53 | border-radius: 2rem;
54 | border-bottom-left-radius: 0rem;
55 | border-bottom-right-radius: 0rem;
56 | }
--------------------------------------------------------------------------------
/src/pages/home/components/difficulty/data.js:
--------------------------------------------------------------------------------
1 | const topics = [
2 | "Easy",
3 | "Medium",
4 | "Hard"
5 | ];
6 | export default topics;
--------------------------------------------------------------------------------
/src/pages/home/components/difficulty/style.css:
--------------------------------------------------------------------------------
1 | .difficulty .eachTopic {
2 | background: #ECECEC;
3 | padding: 0.4rem 1rem;
4 | border-radius: 1.4rem;
5 | font-size: 0.92rem;
6 | margin: 0.2rem;
7 | transition: 0.5s;
8 | cursor: pointer;
9 | }
10 |
11 | .difficulty .eachTopic:hover {
12 | background: #ECECEC;
13 | transition: 0.5s;
14 | box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.1);
15 | }
16 |
17 | .difficulty {
18 | border: 1.5px solid #ECECEC;
19 | border-radius: 2rem;
20 | height: auto;
21 | width: 20vw;
22 | margin-top: 3vh;
23 | }
24 |
25 | .difficulty .available-topics,
26 | .difficulty .selected {
27 |
28 | display: flex;
29 | flex-wrap: wrap;
30 | }
31 |
32 | .difficulty .topics {
33 | padding: 0.75rem;
34 | }
35 |
36 | .difficulty .selected .eachTopic {
37 | border: 1px solid rgb(208, 208, 208);
38 | background: #A1E5CD;
39 | }
40 |
41 |
42 | .difficulty .header {
43 | height: 4vh;
44 | background: #ECECEC;
45 | padding: 0.3rem 1.2rem;
46 | font-size: 1.3rem;
47 | display: flex;
48 | font-weight: 550;
49 | align-items: center;
50 | justify-content: center;
51 | color: rgb(65, 64, 64);
52 | font-size: 1.8rem;
53 | border-radius: 2rem;
54 | border-bottom-left-radius: 0rem;
55 | border-bottom-right-radius: 0rem;
56 | }
--------------------------------------------------------------------------------
/src/pages/home/components/horizontalScroll/style.css:
--------------------------------------------------------------------------------
1 | /* @import url("https://fonts.googleapis.com/css2?family=Anta&family=Archivo:ital,wght@0,100..900;1,100..900&family=Courier+Prime:ital,wght@0,400;0,700;1,400;1,700&family=Cutive&family=Kanit&family=Merriweather:ital,wght@0,300;0,400;0,700;0,900;1,300;1,400;1,700;1,900&family=Poppins:wght@400;500;700&family=REM:ital,wght@0,100..900;1,100..900&family=Radio+Canada+Big:ital,wght@0,400..700;1,400..700&family=Raleway:ital,wght@0,100..900;1,100..900&family=Special+Elite&display=swap"); */
2 |
3 | .horizontal-scroll-container {
4 | overflow: hidden;
5 | white-space: nowrap;
6 | position: relative;
7 | width: 100%;
8 | margin-top: 2.5vh;
9 | }
10 |
11 | .horizontal-scroll-content {
12 | display: flex;
13 | white-space: nowrap;
14 | font-size: 1.5rem;
15 | }
16 |
17 | .horizontal-scroll-span-text {
18 | display: inline-block;
19 | padding: 1px 2.2vw;
20 | white-space: nowrap;
21 | font-family: "Poppins", sans-serif;
22 | font-weight: 600;
23 | font-style: normal;
24 | color: #61d8ad;
25 | }
--------------------------------------------------------------------------------
/src/pages/home/components/intro/assets/Programmer.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Surya-0804/dsa-tracker-website/75916b037994bf278a4e50790cf2508647f088eb/src/pages/home/components/intro/assets/Programmer.gif
--------------------------------------------------------------------------------
/src/pages/home/components/intro/assets/Telecommuting.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Surya-0804/dsa-tracker-website/75916b037994bf278a4e50790cf2508647f088eb/src/pages/home/components/intro/assets/Telecommuting.gif
--------------------------------------------------------------------------------
/src/pages/home/components/intro/assets/about.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Surya-0804/dsa-tracker-website/75916b037994bf278a4e50790cf2508647f088eb/src/pages/home/components/intro/assets/about.jpg
--------------------------------------------------------------------------------
/src/pages/home/components/intro/assets/about1.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Surya-0804/dsa-tracker-website/75916b037994bf278a4e50790cf2508647f088eb/src/pages/home/components/intro/assets/about1.jpg
--------------------------------------------------------------------------------
/src/pages/home/components/intro/assets/coding.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Surya-0804/dsa-tracker-website/75916b037994bf278a4e50790cf2508647f088eb/src/pages/home/components/intro/assets/coding.png
--------------------------------------------------------------------------------
/src/pages/home/components/problems/combineData.js:
--------------------------------------------------------------------------------
1 | const combineData = (problemsData, userProgressData) => {
2 | // If userProgressData is undefined, return problemsData directly
3 | if (!userProgressData) {
4 | return problemsData;
5 | }
6 |
7 | const combinedData = {};
8 |
9 | for (const topic in problemsData) {
10 | combinedData[topic] = problemsData[topic].map(problem => {
11 | const { _id } = problem;
12 |
13 | // Check if the problem is bookmarked
14 | const isBookmarked = userProgressData.bookmarks.some(bookmark => bookmark.value === _id);
15 |
16 | // Check if the problem is a favorite
17 | const isFavourite = userProgressData.favourites.some(favourite => favourite.value === _id);
18 |
19 | // Get the notes associated with this problem
20 | const notesEntry = userProgressData.notes.find(note => note[0] === _id);
21 | const notes = notesEntry ? notesEntry[1] : [];
22 |
23 | // Get the solutions associated with this problem
24 | const solutionsEntry = userProgressData.solutions.find(solution => solution[0] === _id);
25 | const solutions = solutionsEntry ? solutionsEntry[1] : [];
26 |
27 | // Check if the problem is solved
28 | const isSolved = userProgressData.solvedProblems.some(solved => solved.value === _id);
29 |
30 | // Check if the problem is for revision
31 | const isRevision = userProgressData.revisionProblems.some(revision => revision.value === _id);
32 |
33 | return {
34 | ...problem,
35 | isBookmarked,
36 | isFavourite,
37 | notes,
38 | solutions,
39 | isSolved,
40 | isRevision
41 | };
42 | });
43 | }
44 |
45 | return combinedData;
46 | };
47 |
48 | export default combineData;
49 |
--------------------------------------------------------------------------------
/src/pages/home/components/problems/components/styles/Apple.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Surya-0804/dsa-tracker-website/75916b037994bf278a4e50790cf2508647f088eb/src/pages/home/components/problems/components/styles/Apple.png
--------------------------------------------------------------------------------
/src/pages/home/components/problems/components/styles/Dell.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Surya-0804/dsa-tracker-website/75916b037994bf278a4e50790cf2508647f088eb/src/pages/home/components/problems/components/styles/Dell.png
--------------------------------------------------------------------------------
/src/pages/home/components/problems/components/styles/GFG.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Surya-0804/dsa-tracker-website/75916b037994bf278a4e50790cf2508647f088eb/src/pages/home/components/problems/components/styles/GFG.png
--------------------------------------------------------------------------------
/src/pages/home/components/problems/components/styles/GFG.svg:
--------------------------------------------------------------------------------
1 |
4 |
--------------------------------------------------------------------------------
/src/pages/home/components/problems/components/styles/Google.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Surya-0804/dsa-tracker-website/75916b037994bf278a4e50790cf2508647f088eb/src/pages/home/components/problems/components/styles/Google.jpg
--------------------------------------------------------------------------------
/src/pages/home/components/problems/components/styles/LeetCode.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Surya-0804/dsa-tracker-website/75916b037994bf278a4e50790cf2508647f088eb/src/pages/home/components/problems/components/styles/LeetCode.png
--------------------------------------------------------------------------------
/src/pages/home/components/problems/components/styles/Microsoft.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Surya-0804/dsa-tracker-website/75916b037994bf278a4e50790cf2508647f088eb/src/pages/home/components/problems/components/styles/Microsoft.png
--------------------------------------------------------------------------------
/src/pages/home/components/problems/components/styles/Spotify.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Surya-0804/dsa-tracker-website/75916b037994bf278a4e50790cf2508647f088eb/src/pages/home/components/problems/components/styles/Spotify.png
--------------------------------------------------------------------------------
/src/pages/home/components/problems/components/styles/Telegram.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Surya-0804/dsa-tracker-website/75916b037994bf278a4e50790cf2508647f088eb/src/pages/home/components/problems/components/styles/Telegram.png
--------------------------------------------------------------------------------
/src/pages/home/components/problems/style.css:
--------------------------------------------------------------------------------
1 | @import url("https://fonts.googleapis.com/css2?family=Anta&family=Archivo:ital,wght@0,100..900;1,100..900&family=Kanit&family=Merriweather:ital,wght@0,300;0,400;0,700;0,900;1,300;1,400;1,700;1,900&family=Poppins:wght@400;500;700&family=Radio+Canada+Big:ital,wght@0,400..700;1,400..700&display=swap");
2 |
3 | .DSA-problems-pagination {
4 | display: flex;
5 | margin-top: 20px;
6 | flex-wrap: wrap;
7 | margin-bottom: 2rem;
8 | align-items: center;
9 | justify-content: center;
10 | }
11 |
12 | .Topics {
13 | display: flex;
14 | justify-content: space-between;
15 | align-items: center;
16 | font-weight: 400;
17 | font-size: 1.5rem;
18 | margin: 0.5rem 0;
19 | margin-top: 0.7rem;
20 | min-height: 4vh;
21 | padding: 0.5rem 1.7rem;
22 | width: 92%;
23 | border-radius: 1rem;
24 | background-color: #a1e5cd;
25 | border: 1px solid black;
26 | box-sizing: border-box;
27 | }
28 |
29 | .Topics i {
30 | font-size: 1.5rem;
31 | }
32 |
33 | .DSA-problems-pagination-button {
34 | background-color: none;
35 | /* border: 1px solid #ccc; */
36 | /* color: #333; */
37 | padding: 5px 10px;
38 | margin: 0 5px;
39 | cursor: pointer;
40 | border-radius: 50%;
41 | font-family: "Radio Canada Big", sans-serif;
42 | font-optical-sizing: auto;
43 | font-weight: 400;
44 | font-style: normal;
45 | font-size: 1.2rem;
46 | border: 1px solid white;
47 | background-color: white;
48 | border-radius: 50%;
49 | width: 40px;
50 | height: 40px;
51 | color: grey;
52 | }
53 |
54 | .DSA-problems-pagination-button:hover {
55 | background-color: #bcffe9;
56 | color: black;
57 | }
58 |
59 | .DSA-problems-pagination-button:disabled {
60 | background-color: #bcffe9;
61 | color: black;
62 | /* cursor: not-allowed; */
63 | /* border: 1px solid #aaa; */
64 | }
65 |
66 | .DSA-problems-pagination-director {
67 | margin: 0.6rem 0rem;
68 | background-color: white;
69 | border: 0px;
70 | }
71 |
72 | .DSA-problems-pagination-director:hover {
73 | cursor: pointer;
74 | /* background-color: aliceblue; */
75 | }
76 | .ellipse-pagination {
77 | display: flex;
78 | justify-content: center;
79 | align-items: center;
80 | }
81 | /* .DSA-problems-pagination
82 |
83 | .DSA-problems-pagination */
84 |
--------------------------------------------------------------------------------
/src/pages/home/components/sounds/buttonClick.mp3:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Surya-0804/dsa-tracker-website/75916b037994bf278a4e50790cf2508647f088eb/src/pages/home/components/sounds/buttonClick.mp3
--------------------------------------------------------------------------------
/src/pages/home/components/sounds/card-hover.mp3:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Surya-0804/dsa-tracker-website/75916b037994bf278a4e50790cf2508647f088eb/src/pages/home/components/sounds/card-hover.mp3
--------------------------------------------------------------------------------
/src/pages/home/components/sounds/card_flip.mp3:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Surya-0804/dsa-tracker-website/75916b037994bf278a4e50790cf2508647f088eb/src/pages/home/components/sounds/card_flip.mp3
--------------------------------------------------------------------------------
/src/pages/home/components/sounds/hover_quest.wav:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Surya-0804/dsa-tracker-website/75916b037994bf278a4e50790cf2508647f088eb/src/pages/home/components/sounds/hover_quest.wav
--------------------------------------------------------------------------------
/src/pages/home/components/sounds/loud_btn_clk.wav:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Surya-0804/dsa-tracker-website/75916b037994bf278a4e50790cf2508647f088eb/src/pages/home/components/sounds/loud_btn_clk.wav
--------------------------------------------------------------------------------
/src/pages/home/components/topics/Topics.jsx:
--------------------------------------------------------------------------------
1 | import React, { useState } from 'react';
2 | import topicsData from './data';
3 | import './style.css';
4 | import useSound from 'use-sound';
5 | import loud_btn from '../sounds/loud_btn_clk.wav';
6 |
7 | function Topics({ setSelectedTopics }) {
8 | const [play] = useSound(loud_btn);
9 | const [availableTopics, setAvailableTopics] = useState(topicsData);
10 | const [selectedTopics, setSelectedTopicsLocal] = useState([]);
11 |
12 | const handleTopicClick = (topic) => {
13 | play();
14 | setAvailableTopics(availableTopics.filter(t => t !== topic));
15 | const newSelectedTopics = [...selectedTopics, topic];
16 | setSelectedTopicsLocal(newSelectedTopics);
17 | setSelectedTopics(newSelectedTopics); // Update parent state
18 | };
19 |
20 | const handleSelectedTopicClick = (topic) => {
21 | play();
22 | setSelectedTopicsLocal(selectedTopics.filter(t => t !== topic));
23 | setAvailableTopics([...availableTopics, topic]);
24 | setSelectedTopics(selectedTopics.filter(t => t !== topic)); // Update parent state
25 | };
26 |
27 | return (
28 |
29 |
32 |
33 |
34 | {selectedTopics.map((topic, index) => (
35 | handleSelectedTopicClick(topic)} className='eachTopic'>
36 | {topic}
37 |
38 | ))}
39 |
40 |
41 | {availableTopics.map((topic, index) => (
42 | handleTopicClick(topic)} className='eachTopic'>
43 | {topic}
44 |
45 | ))}
46 |
47 |
48 |
49 | );
50 | }
51 |
52 | export default Topics;
--------------------------------------------------------------------------------
/src/pages/home/components/topics/data.js:
--------------------------------------------------------------------------------
1 | const topics = [
2 | "Array", "String", "Stacks & Queues", "Matrix", "LinkedList", "Searching & Sorting", "Bit Manipulation", "Binary Trees", "Binary Search Trees", "Greedy", "Heap", "BackTracking", "Dynamic Programming", "Graph",
3 | "Trie"
4 | ];
5 | export default topics;
--------------------------------------------------------------------------------
/src/pages/home/components/topics/style.css:
--------------------------------------------------------------------------------
1 | .topicsComponent .eachTopic {
2 | background: #ECECEC;
3 | padding: 0.4rem 1rem;
4 | border-radius: 1.4rem;
5 | font-size: 1.1rem;
6 | margin: 0.2rem;
7 | transition: 0.5s;
8 | cursor: pointer;
9 | }
10 |
11 | .topicsComponent .eachTopic:hover {
12 | background: #ECECEC;
13 | transition: 0.5s;
14 | box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.1);
15 | }
16 |
17 | .topicsComponent {
18 | border: 1.5px solid #ECECEC;
19 | border-radius: 2rem;
20 | height: auto;
21 | width: 20vw;
22 | margin-bottom: 2vh;
23 |
24 | }
25 |
26 | .topicsComponent .available-topics,
27 | .topicsComponent .selected {
28 | display: flex;
29 | flex-wrap: wrap;
30 | }
31 |
32 | .topicsComponent .topics {
33 | padding: 0.75rem;
34 | }
35 |
36 | .topicsComponent .selected .eachTopic {
37 | border: 1px solid rgb(208, 208, 208);
38 | background: #A1E5CD;
39 | }
40 |
41 |
42 | .topicsComponent .header {
43 | height: 4vh;
44 | background: #ECECEC;
45 | padding: 0.3rem 1.2rem;
46 | font-size: 1.3rem;
47 | display: flex;
48 | font-weight: 550;
49 | align-items: center;
50 | justify-content: center;
51 | color: rgb(65, 64, 64);
52 | font-size: 1.8rem;
53 | border-radius: 2rem;
54 | border-bottom-left-radius: 0rem;
55 | border-bottom-right-radius: 0rem;
56 | }
57 | @media (max-width: 700px){
58 | .topicsComponent{
59 | width: 80vw;
60 | }
61 | }
--------------------------------------------------------------------------------
/src/pages/home/problems/history.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Surya-0804/dsa-tracker-website/75916b037994bf278a4e50790cf2508647f088eb/src/pages/home/problems/history.png
--------------------------------------------------------------------------------
/src/pages/home/problems/style2.css:
--------------------------------------------------------------------------------
1 |
2 | @media (max-width: 700px) {
3 | .overtopics-container{
4 | display: flex;
5 | flex-direction: column;
6 | align-items: center;
7 | justify-content: center;
8 | margin-top: 20%;
9 | }
10 | .filter-button-opening{
11 | position: fixed;
12 | top: 90%;
13 | left: 80%;
14 | display: flex;
15 | flex-direction: column;
16 | justify-content: center;
17 | align-items: center;
18 | padding: 1em;
19 | border: 0px solid transparent;
20 | background-color: rgba(161, 229, 205, 0.84);
21 | border-radius: 1.5em;
22 | transition: all 0.2s linear;
23 | font-size: 1.25em;
24 | }
25 | .filter-container {
26 | position: fixed;
27 | right: 0;
28 | top: 0;
29 | height: 100%;
30 | width: 100%;
31 | background: white;
32 | box-shadow: -2px 0 5px rgba(0,0,0,0.5);
33 | transform: translateX(100%);
34 | transition: transform 0.3s ease-in-out;
35 | z-index: 10;
36 | }
37 |
38 | .filter-container.open {
39 | transform: translateX(0);
40 | }
41 |
42 | .filter-overlay {
43 | display: none;
44 | }
45 |
46 | .filter-overlay.show {
47 | display: block;
48 | position: fixed;
49 | top: 0;
50 | left: 0;
51 | right: 0;
52 | bottom: 0;
53 | background: rgba(0,0,0,0.5);
54 | z-index: 5;
55 | }
56 | .filter-responsive-closing-button{
57 | position: absolute;
58 | top: 3%;
59 | left: 7.5%;
60 | display: flex;
61 | flex-direction: column;
62 | justify-content: center;
63 | align-items: center;
64 | padding: 1em;
65 | border: 0px solid transparent;
66 | background-color: rgba(161, 229, 205, 0.84);
67 | border-radius: 1.5em;
68 | transition: all 0.2s linear;
69 | font-size: 1.25em;
70 | }
71 | }
72 | @media (min-width: 701px) {
73 | .filter-button-opening {
74 | display: none;
75 | }
76 | .filter-responsive-closing-button{
77 | display: none;
78 | }
79 | }
80 |
81 |
--------------------------------------------------------------------------------
/src/pages/home/style.css:
--------------------------------------------------------------------------------
1 | .main {
2 | margin-top: 8vh;
3 | }
4 | @media (max-width: 800px) {
5 | .main {
6 | margin-top: 0vh;
7 | }
8 | }
9 |
--------------------------------------------------------------------------------
/src/pages/profile/components/geeksforgeeks/GFG.svg:
--------------------------------------------------------------------------------
1 |
4 |
--------------------------------------------------------------------------------
/src/pages/profile/components/geeksforgeeks/style.css:
--------------------------------------------------------------------------------
1 | .profile-page-geeksforgeeks-container {
2 | width: 90%;
3 | margin-left: 5vw;
4 | border: 1px solid #ccc;
5 | display: flex;
6 | flex-direction: column;
7 | margin-bottom: 5%;
8 | border-radius: 2rem;
9 | box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
10 | }
11 | .profile-page-geeksforgeeks-header {
12 | font-family: "Poppins", sans-serif;
13 | font-weight: 700;
14 | font-style: normal;
15 | font-size: 2.5vw;
16 | display: flex;
17 | align-items: center;
18 | margin-top: 6vh;
19 | justify-content: center;
20 | }
21 | .profile-page-geeksforgeeks-header img {
22 | padding-left: 1vw;
23 | }
24 | .profile-page-geeksforgeeks-inner-container {
25 | display: flex;
26 | height: 100%;
27 | margin-bottom: 8vh;
28 | }
29 | .profile-page-geeksforgeeks-inner-container-1 {
30 | width: 50%;
31 | display: flex;
32 | flex-direction: column;
33 | justify-content: center;
34 | align-items: center;
35 | }
36 | .profile-page-geeksforgeeks-username {
37 | color: #2f8d46;
38 | font-family: "Poppins", sans-serif;
39 | font-weight: 600;
40 | font-style: normal;
41 | margin-bottom: 1vh;
42 |
43 | font-size: 4vh;
44 | }
45 | .profile-page-geeksforgeeks-institute-rank {
46 | display: flex;
47 | align-items: center;
48 | justify-content: center;
49 | }
50 | .profile-page-geeksforgeeks-medal-icon {
51 | font-size: 4vh;
52 | margin-right: 0.5vw;
53 | margin-left: -1vw;
54 | }
55 | .profile-page-geeksforgeeks-institute-rank h2 {
56 | margin: 0;
57 | font-family: "Poppins", sans-serif;
58 | font-weight: 400;
59 | font-style: normal;
60 |
61 | font-size: 3.5vh;
62 | }
63 | .profile-page-geeksforgeeks-institute-rank span {
64 | font-weight: 600;
65 | }
66 | .profile-page-geeksforgeeks-inner-sub-container {
67 | display: flex;
68 | justify-content: space-around;
69 | width: 100%;
70 | margin-top: 7vh;
71 | }
72 | .profile-page-geeksforgeeks-problems-solved {
73 | display: flex;
74 | justify-content: center;
75 | align-items: center;
76 | flex-direction: column;
77 | width: 50%;
78 | }
79 | .profile-page-geeksforgeeks-problems-solved h2 {
80 | margin: 0;
81 | font-family: "Poppins", sans-serif;
82 | font-weight: 600;
83 | font-style: normal;
84 | display: flex;
85 | flex-wrap: wrap;
86 | font-size: 3.5vh;
87 | }
88 | .profile-page-geeksforgeeks-vertical-line {
89 | border-left: 2px solid #c7c2c2;
90 | height: auto;
91 | align-self: stretch;
92 | }
93 | .profile-page-geeksforgeeks-donutchart {
94 | border: none;
95 | }
96 |
--------------------------------------------------------------------------------
/src/pages/profile/components/leetcode/LeetCode.jsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import { LuMedal } from "react-icons/lu";
3 | import DonutChart from "../donutchart/DonutChart";
4 | import LC from "./LeetCode.png";
5 | export default function LeetCode() {
6 | return (
7 |
8 |
9 | Leetcode 
{" "}
10 |
11 |
12 |
13 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
27 | johndoe586
28 |
29 |
30 |
31 |
32 | 28 rank
33 |
34 |
35 |
36 |
37 |
38 |
Problems solved
39 | 135
40 |
41 |
42 |
Languages Used
43 | C++, Java, Python
44 |
45 |
46 |
47 |
48 |
Badges
49 | 5
50 |
51 |
52 |
Total Submissions
53 | 450
54 |
55 |
56 |
57 |
58 |
59 | );
60 | }
61 |
--------------------------------------------------------------------------------
/src/pages/profile/components/leetcode/LeetCode.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Surya-0804/dsa-tracker-website/75916b037994bf278a4e50790cf2508647f088eb/src/pages/profile/components/leetcode/LeetCode.png
--------------------------------------------------------------------------------
/src/pages/profile/components/problemSolvedChart/style.css:
--------------------------------------------------------------------------------
1 | /* Import the Poppins font from Google Fonts */
2 | @import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap");
3 |
4 | .ProblemSolvedFrame {
5 | padding: 20px;
6 | border: 1px solid #ccc;
7 | border-radius: 8px;
8 | width: 90%;
9 | max-height: 300px;
10 | margin: 0 auto;
11 | font-family: "Poppins", sans-serif;
12 | }
13 |
14 | .ProblemsSolvedHeader {
15 | display: flex;
16 | justify-content: space-between;
17 | align-items: center;
18 | margin-bottom: 20px;
19 | }
20 |
21 | .ProblemSolvedNavigation {
22 | display: flex;
23 | align-items: center;
24 | }
25 |
26 | .ProblemSolvedNavigation button {
27 | background: none;
28 | border: none;
29 | cursor: pointer;
30 | padding: 0 10px;
31 | }
32 |
33 | .ProblemSolvedNavigation span {
34 | margin: 0 10px;
35 | }
36 | .ProblemsSolvedLineChart {
37 | width: 90%;
38 | height: 40%;
39 | }
40 |
--------------------------------------------------------------------------------
/src/pages/profile/components/problemSolvedChart/style2.css:
--------------------------------------------------------------------------------
1 | .ProblemSolvedFrame {
2 | padding: 2%;
3 | border-radius: 5%;
4 | box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
5 | background-color: #fff;
6 | width: 60%; /* Adjusted to use percentage */
7 | margin: auto;
8 | font-family: "Poppins", sans-serif;
9 | box-sizing: border-box;
10 | margin: 0;
11 | display: flex;
12 | flex-direction: column;
13 | align-items: center;
14 | justify-content: center;
15 | position: relative;
16 | }
17 |
18 | .ProblemsSolvedHeader {
19 | display: flex;
20 | /* position: relative; */
21 | align-items: center;
22 | margin-bottom: 2%;
23 | /* Adjusted to use percentage */
24 | width: 100%;
25 | justify-content: space-around;
26 | }
27 |
28 | .ProblemSolvedNavigation {
29 | display: flex;
30 | align-items: center;
31 | }
32 |
33 | .ProblemSolvedNavigation button {
34 | background: none;
35 | border: none;
36 | cursor: pointer;
37 | }
38 |
39 | .RangeSelector {
40 | display: flex;
41 | gap: 5%; /* Adjusted to use percentage */
42 | }
43 |
44 | .RangeSelector span {
45 | display: flex;
46 | align-items: center;
47 | justify-content: center;
48 | cursor: pointer;
49 | padding: 6px; /* Adjusted to use percentage */
50 | border-radius: 5px;
51 | background-color: #f0f0f0;
52 | transition: background-color 0.3s;
53 | font-size: 0.6em; /* Adjusted for readability */
54 | width: 4vw; /* Ensures uniform width */
55 | height: 3vh; /* Ensures uniform height */
56 | text-align: center;
57 | }
58 |
59 | .RangeSelector span.active,
60 | .RangeSelector span:hover {
61 | background-color: #d0d0d0;
62 | }
63 |
--------------------------------------------------------------------------------
/src/pages/profile/components/userDetails/style.css:
--------------------------------------------------------------------------------
1 | .profile-card {
2 | width: 85%;
3 | border: 1px solid #ddd;
4 | border-radius: 2rem;
5 | padding: 16px;
6 | text-align: center;
7 | background-color: #fff;
8 | box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
9 | margin: 0 auto;
10 | display: flex;
11 | justify-content: space-evenly;
12 | align-items: center;
13 | font-family: "Poppins";
14 | margin-top: 5%;
15 | }
16 |
17 | .profile-image {
18 | width: 200px;
19 | height: 200px;
20 | margin: 0 auto 16px;
21 | border-radius: 50%;
22 | overflow: hidden;
23 | background-color: #f0f0f0;
24 | display: flex;
25 | align-items: center;
26 | justify-content: center;
27 | }
28 |
29 | .profile-image img {
30 | width: 100%;
31 | height: 100%;
32 | object-fit: cover;
33 | }
34 |
35 | .image-placeholder {
36 | color: #999;
37 | font-size: 14px;
38 | }
39 |
40 | .profile-info {
41 | text-align: left;
42 | font-size: 1.2rem;
43 | }
44 |
45 | .profile-info-item {
46 | display: flex;
47 | align-items: center;
48 | margin-bottom: 5%;
49 | }
50 |
51 | .profile-info-icon {
52 | margin-right: 1.3rem;
53 | font-size: 1.5rem;
54 | }
55 | .profile-info-item a {
56 | text-decoration: none;
57 | color: #000;
58 | }
59 |
60 | .upload__image-wrapper {
61 | margin-top: 16px;
62 | }
63 |
64 | .image-item__btn-wrapper {
65 | display: flex;
66 | justify-content: center;
67 | margin-top: 8px;
68 | }
69 |
70 | .profile-page-user-details-button {
71 | margin: 4px;
72 | }
73 | .profile-page-user-details-button {
74 | padding: 1.3em 3em;
75 | font-size: 12px;
76 | text-transform: uppercase;
77 | letter-spacing: 2.5px;
78 | font-weight: 500;
79 | color: #000;
80 | background-color: #fff;
81 | border: none;
82 | border-radius: 45px;
83 | box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.1);
84 | transition: all 0.3s ease 0s;
85 | cursor: pointer;
86 | outline: none;
87 | }
88 |
89 | .profile-page-user-details-button:hover {
90 | background-color: #23c483;
91 | box-shadow: 0px 15px 20px rgba(46, 229, 157, 0.4);
92 | color: #fff;
93 | transform: translateY(-7px);
94 | }
95 |
96 | .profile-page-user-details-button:active {
97 | transform: translateY(-1px);
98 | }
99 |
--------------------------------------------------------------------------------
/src/pages/profile/style.css:
--------------------------------------------------------------------------------
1 | .first-divider-profile {
2 | width: 90%;
3 | margin: 5%;
4 | color: #c7c2c2;
5 | }
6 | .second-section-profile-page {
7 | display: flex;
8 | margin: 0 5%;
9 | }
10 | .third-section-profile-page {
11 | margin: 5%;
12 | display: flex;
13 | align-items: center;
14 | justify-content: center;
15 | /* width: 100%; */
16 | }
17 | .fourth-section-profile-page {
18 | width: 90%;
19 | margin: 5%;
20 | margin-bottom: 0;
21 | }
22 | .fifth-section-profile-page {
23 | width: 90%;
24 | margin: 5%;
25 | margin-top: 0;
26 | }
27 |
--------------------------------------------------------------------------------
/src/pages/settings/Settings.jsx:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Surya-0804/dsa-tracker-website/75916b037994bf278a4e50790cf2508647f088eb/src/pages/settings/Settings.jsx
--------------------------------------------------------------------------------
/src/pages/solution/Solution.jsx:
--------------------------------------------------------------------------------
1 | import './style.css'
2 | import React, { useState } from 'react';
3 | import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
4 | import { Analytics } from "@vercel/analytics/react";
5 | import Nav from '../../components/nav/Nav.jsx';
6 | import SolutionPage from '../solutionpage/SolutionPage.jsx';
7 | import NewFooter from '../../components/footer/NewFooter.jsx';
8 | function Home() {
9 | return (
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 | );
19 | }
20 |
21 | export default Home;
22 |
--------------------------------------------------------------------------------
/src/pages/solution/style.css:
--------------------------------------------------------------------------------
1 | .Solution {
2 | margin-top: 15vh;
3 | }
--------------------------------------------------------------------------------
/src/pages/solutionpage/SolutionPage.css:
--------------------------------------------------------------------------------
1 | @import url("https://fonts.googleapis.com/css2?family=Anta&family=Archivo:ital,wght@0,100..900;1,100..900&family=Kanit&family=Merriweather:ital,wght@0,300;0,400;0,700;0,900;1,300;1,400;1,700;1,900&family=Poppins:wght@400;500;700&display=swap");
2 | @keyframes borderAnimation {
3 | 0% {
4 | border-color: #06ffb0;
5 | }
6 | 25% {
7 | border-color: #37b68e;
8 | }
9 | 50% {
10 | border-color: #128560;
11 | }
12 | 75% {
13 | border-color: #65edc2;
14 | }
15 | 100% {
16 | border-color: #06ffb0;
17 | }
18 | }
19 | .solution-page-container {
20 | border: 2px solid #1fbd84;
21 | animation: borderAnimation 4s infinite;
22 | padding: 2rem;
23 | max-width: 800px;
24 | margin: 2rem auto;
25 | border-radius: 8px;
26 | box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
27 | }
28 |
29 | .solution-page-problem-name {
30 | font-family: "Poppins", sans-serif;
31 | font-weight: 700;
32 | font-style: normal;
33 | color: #252424;
34 | font-size: 2.5rem;
35 | margin-bottom: 1rem;
36 | }
37 |
38 | .solution-page-problem-sub-heading {
39 | font-family: "Poppins", sans-serif;
40 | font-weight: 500;
41 | font-style: normal;
42 | color: #1fbd84;
43 | font-size: 1.8rem;
44 | margin: 1rem 0 0.5rem;
45 | }
46 |
47 | .solution-page-problem-description {
48 | font-family: "Poppins", sans-serif;
49 | font-weight: 400;
50 | font-style: normal;
51 | font-size: 1.1rem;
52 | color: #575555;
53 | margin-bottom: 1rem;
54 | }
55 |
56 | .tabs {
57 | display: flex;
58 | border-bottom: 2px solid #ddd;
59 | margin-bottom: 20px;
60 | }
61 |
62 | .tabs .tab {
63 | background: none;
64 | border: none;
65 | padding: 10px 20px;
66 | cursor: pointer;
67 | font-family: "Poppins", sans-serif;
68 | font-weight: 500;
69 | font-size: 1.2rem;
70 | color: #575555;
71 | margin-right: 5px;
72 | border-bottom: 2px solid transparent;
73 | transition: color 0.3s, border-bottom-color 0.3s;
74 | }
75 |
76 | .tabs .tab:hover {
77 | color: #1fbd84;
78 | }
79 |
80 | .tabs .tab.active {
81 | color: #1fbd84;
82 | border-bottom-color: #1fbd84;
83 | text-transform: uppercase;
84 |
85 | }
86 |
87 | .copyBtn {
88 | background-color: #d7d8df;
89 | color: #f8f8f2;
90 | border: none;
91 | padding: 5px 10px;
92 | cursor: pointer;
93 | border-radius: 5px;
94 | }
--------------------------------------------------------------------------------
/src/reportWebVitals.js:
--------------------------------------------------------------------------------
1 | const reportWebVitals = onPerfEntry => {
2 | if (onPerfEntry && onPerfEntry instanceof Function) {
3 | import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
4 | getCLS(onPerfEntry);
5 | getFID(onPerfEntry);
6 | getFCP(onPerfEntry);
7 | getLCP(onPerfEntry);
8 | getTTFB(onPerfEntry);
9 | });
10 | }
11 | };
12 |
13 | export default reportWebVitals;
14 |
--------------------------------------------------------------------------------
/src/setupTests.js:
--------------------------------------------------------------------------------
1 | // jest-dom adds custom jest matchers for asserting on DOM nodes.
2 | // allows you to do things like:
3 | // expect(element).toHaveTextContent(/react/i)
4 | // learn more: https://github.com/testing-library/jest-dom
5 | import '@testing-library/jest-dom';
6 |
--------------------------------------------------------------------------------
/src/store/userInfo.js:
--------------------------------------------------------------------------------
1 | import { jwtDecode } from 'jwt-decode'; // Correct import syntax for jwt-decode
2 |
3 | const getUserIdFromToken = () => {
4 | const token = localStorage.getItem('token');
5 | if (!token) {
6 | return null;
7 | }
8 | try {
9 | const decoded = jwtDecode(token);
10 | return decoded._id;
11 | } catch (error) {
12 | console.error('Invalid token:', error);
13 | return null;
14 | }
15 | };
16 |
17 | const getUserName = () => {
18 | const user = localStorage.getItem('user');
19 | if (!user) {
20 | return null;
21 | }
22 | try {
23 | const parsedUser = JSON.parse(user); // Parse the user object from local storage
24 | return parsedUser.name;
25 | } catch (error) {
26 | console.error('Invalid user data:', error);
27 | return null;
28 | }
29 | };
30 |
31 | export { getUserIdFromToken, getUserName }; // Exporting functions correctly
32 |
--------------------------------------------------------------------------------
11 |