From c73d7618ae11c28cc680c06dc6bf7f42fda4b163 Mon Sep 17 00:00:00 2001 From: ankitasure23 Date: Sun, 14 Sep 2025 18:54:13 +0530 Subject: [PATCH 1/7] Made changes to the add-challenge-section --- frontend/src/App.jsx | 10 ++- .../src/Components/goals/ActivityOverview.jsx | 21 ++++++ frontend/src/Components/goals/Challenge.jsx | 49 ++++++++++++ frontend/src/Components/goals/GoalPage.jsx | 75 +++++++++++++++++++ .../src/Components/goals/ProgressTracker.jsx | 19 +++++ frontend/src/main.jsx | 2 + 6 files changed, 175 insertions(+), 1 deletion(-) create mode 100644 frontend/src/Components/goals/ActivityOverview.jsx create mode 100644 frontend/src/Components/goals/Challenge.jsx create mode 100644 frontend/src/Components/goals/GoalPage.jsx create mode 100644 frontend/src/Components/goals/ProgressTracker.jsx diff --git a/frontend/src/App.jsx b/frontend/src/App.jsx index b36e405..9ea2379 100644 --- a/frontend/src/App.jsx +++ b/frontend/src/App.jsx @@ -16,11 +16,12 @@ import Register from "./Components/auth/Register"; import Profile from "./Components/profile/Profile"; import ProtectedRoute from "./Components/auth/ProtectedRoute"; import Dashboard from "./Components/Dashboard"; - +import Goal from './Components/goals/GoalPage'; // Home component that contains the main landing page content import { ArrowUp } from "lucide-react"; // <-- icon for back to top + function Home() { const [showTop, setShowTop] = useState(false); @@ -69,6 +70,13 @@ function Home() {
+ + +
+ +
+ +
diff --git a/frontend/src/Components/goals/ActivityOverview.jsx b/frontend/src/Components/goals/ActivityOverview.jsx new file mode 100644 index 0000000..0533c94 --- /dev/null +++ b/frontend/src/Components/goals/ActivityOverview.jsx @@ -0,0 +1,21 @@ +// src/components/ActivityOverview.jsx +import React from 'react'; + +const ActivityOverview = ({ activityData }) => { + return ( +
+

Activity Overview

+
+ {activityData.map((day, index) => ( +
+ ))} +
+
+ ); +}; + +export default ActivityOverview; diff --git a/frontend/src/Components/goals/Challenge.jsx b/frontend/src/Components/goals/Challenge.jsx new file mode 100644 index 0000000..a7b8018 --- /dev/null +++ b/frontend/src/Components/goals/Challenge.jsx @@ -0,0 +1,49 @@ +// src/components/Challenge.jsx +import React from 'react'; + +const Challenge = ({ challenge }) => { + const { title, description, difficulty, points, status } = challenge; + + const getBadgeColor = () => { + switch (difficulty) { + case 'easy': + return 'bg-green-200 text-green-800'; + case 'medium': + return 'bg-yellow-200 text-yellow-800'; + case 'hard': + return 'bg-purple-200 text-purple-800'; + default: + return 'bg-gray-200 text-gray-800'; + } + }; + + const isCompleted = status === 'completed'; + + return ( +
+

{title}

+

{description}

+
+ + {difficulty} + + + {points} pts + +
+
+ {isCompleted ? ( + + ) : ( + + )} +
+
+ ); +}; + +export default Challenge; diff --git a/frontend/src/Components/goals/GoalPage.jsx b/frontend/src/Components/goals/GoalPage.jsx new file mode 100644 index 0000000..5f0a3d3 --- /dev/null +++ b/frontend/src/Components/goals/GoalPage.jsx @@ -0,0 +1,75 @@ +// src/pages/GoalsPage.jsx +import React, { useState } from 'react'; +import ProgressTracker from './ProgressTracker'; +import ActivityOverview from './ActivityOverview.jsx'; +import Challenge from './Challenge.jsx'; + +const GoalPage = () => { + // Example state for challenges and progress + const [currentStreak, setCurrentStreak] = useState(7); + const [bestStreak, setBestStreak] = useState(12); + const [totalCompleted, setTotalCompleted] = useState(47); + const [weeklyProgress, setWeeklyProgress] = useState(75); + + // Dummy data for activity overview and challenges + const activityData = [1, 1, 0, 1, 1, 0, 1]; // 1 = active, 0 = inactive + const todaysChallenges = [ + { + id: 1, + title: 'Code Review Champion', + description: 'Review and provide feedback on 3 pull requests.', + difficulty: 'medium', + points: 150, + status: 'pending' + }, + { + id: 2, + title: 'Documentation Warrior', + description: 'Write or update documentation for your project.', + difficulty: 'easy', + points: 100, + status: 'completed' + } + ]; + const weeklyChallenge = { + id: 3, + title: 'Testing Excellence', + description: 'Write comprehensive tests for a new feature.', + difficulty: 'hard', + points: 300, + status: 'not-started' + }; + + return ( +
+

DevSync Challenges

+ + {/* Progress Cards */} +
+ + + + +
+ + {/* Activity Overview */} + + + {/* Today's Challenges */} +
+

Today's Challenges

+ {todaysChallenges.map((challenge) => ( + + ))} +
+ + {/* This Week's Challenge */} +
+

This Week's Challenge

+ +
+
+ ); +}; + +export default GoalPage; diff --git a/frontend/src/Components/goals/ProgressTracker.jsx b/frontend/src/Components/goals/ProgressTracker.jsx new file mode 100644 index 0000000..11e5d25 --- /dev/null +++ b/frontend/src/Components/goals/ProgressTracker.jsx @@ -0,0 +1,19 @@ +// src/components/ProgressTracker.jsx +import React from 'react'; + +const ProgressTracker = ({ title, value, isProgressBar = false }) => { + return ( +
+

{title}

+ {isProgressBar ? ( +
+
+
+ ) : ( +

{value}

+ )} +
+ ); +}; + +export default ProgressTracker; diff --git a/frontend/src/main.jsx b/frontend/src/main.jsx index 2ca1b3b..0ea6d67 100644 --- a/frontend/src/main.jsx +++ b/frontend/src/main.jsx @@ -10,6 +10,7 @@ import Login from './Components/auth/Login'; import Dashboard from './Components/Dashboard'; import TestDashboardPage from './Components/DashBoard/Test'; import { ThemeProvider } from './Components/ui/theme-provider'; +import GoalsPage from './Components/goals/GoalPage.jsx'; @@ -28,6 +29,7 @@ createRoot(document.getElementById('root')).render( } /> } /> } /> + } /> } /> From 336e3cb7943f02fb6b74aff2a54cd2baaeafabf3 Mon Sep 17 00:00:00 2001 From: ankitasure23 Date: Sun, 14 Sep 2025 21:02:38 +0530 Subject: [PATCH 2/7] Made changes --- frontend/src/Components/goals/GoalPage.jsx | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/frontend/src/Components/goals/GoalPage.jsx b/frontend/src/Components/goals/GoalPage.jsx index 5f0a3d3..3d0c4e3 100644 --- a/frontend/src/Components/goals/GoalPage.jsx +++ b/frontend/src/Components/goals/GoalPage.jsx @@ -3,6 +3,7 @@ import React, { useState } from 'react'; import ProgressTracker from './ProgressTracker'; import ActivityOverview from './ActivityOverview.jsx'; import Challenge from './Challenge.jsx'; +import { TracingBeam } from "../ui/tracing-beam"; const GoalPage = () => { // Example state for challenges and progress @@ -41,7 +42,8 @@ const GoalPage = () => { }; return ( -
+ +

DevSync Challenges

{/* Progress Cards */} @@ -69,6 +71,8 @@ const GoalPage = () => {
+ + ); }; From 5d7665fd6017d8419fca7be2ca0e7ad64b5b7153 Mon Sep 17 00:00:00 2001 From: ankitasure23 Date: Sun, 14 Sep 2025 21:35:49 +0530 Subject: [PATCH 3/7] Made the prgress tracker --- frontend/src/Components/goals/GoalPage.jsx | 2 +- .../src/Components/goals/ProgressTracker.jsx | 19 +++++++++++-------- 2 files changed, 12 insertions(+), 9 deletions(-) diff --git a/frontend/src/Components/goals/GoalPage.jsx b/frontend/src/Components/goals/GoalPage.jsx index 3d0c4e3..ae08420 100644 --- a/frontend/src/Components/goals/GoalPage.jsx +++ b/frontend/src/Components/goals/GoalPage.jsx @@ -51,7 +51,7 @@ const GoalPage = () => { - +
{/* Activity Overview */} diff --git a/frontend/src/Components/goals/ProgressTracker.jsx b/frontend/src/Components/goals/ProgressTracker.jsx index 11e5d25..48b160e 100644 --- a/frontend/src/Components/goals/ProgressTracker.jsx +++ b/frontend/src/Components/goals/ProgressTracker.jsx @@ -1,19 +1,22 @@ // src/components/ProgressTracker.jsx + import React from 'react'; -const ProgressTracker = ({ title, value, isProgressBar = false }) => { +const ProgressTracker = ({ title, value, isProgress = false }) => { return ( -
-

{title}

- {isProgressBar ? ( -
-
-
+
+

{title}

+ {isProgress ? ( +
+
+
) : ( -

{value}

+

{value}

)}
); }; + + export default ProgressTracker; From d6b465f91aa1fce5ee39ea2c3fc5542863873a56 Mon Sep 17 00:00:00 2001 From: ankitasure23 Date: Mon, 15 Sep 2025 08:50:40 +0530 Subject: [PATCH 4/7] Made the challenges.jsx --- frontend/src/Components/goals/ActivityOverview.jsx | 13 +++++-------- 1 file changed, 5 insertions(+), 8 deletions(-) diff --git a/frontend/src/Components/goals/ActivityOverview.jsx b/frontend/src/Components/goals/ActivityOverview.jsx index 0533c94..dc5b894 100644 --- a/frontend/src/Components/goals/ActivityOverview.jsx +++ b/frontend/src/Components/goals/ActivityOverview.jsx @@ -3,15 +3,12 @@ import React from 'react'; const ActivityOverview = ({ activityData }) => { return ( -
-

Activity Overview

-
+
+

Activity Overview

+
{activityData.map((day, index) => ( -
+
+
))}
From 9482860b53e3059516d60fec9fbbd63f41e14ca1 Mon Sep 17 00:00:00 2001 From: ankitasure23 Date: Mon, 15 Sep 2025 09:54:41 +0530 Subject: [PATCH 5/7] Added the challenges.jsx --- frontend/src/Components/goals/Challenge.jsx | 41 ++++++++++----------- 1 file changed, 20 insertions(+), 21 deletions(-) diff --git a/frontend/src/Components/goals/Challenge.jsx b/frontend/src/Components/goals/Challenge.jsx index a7b8018..970ef4b 100644 --- a/frontend/src/Components/goals/Challenge.jsx +++ b/frontend/src/Components/goals/Challenge.jsx @@ -1,9 +1,14 @@ // src/components/Challenge.jsx import React from 'react'; +import { useState } from 'react'; + +function complete() { + setIsCompleted(true); +} const Challenge = ({ challenge }) => { const { title, description, difficulty, points, status } = challenge; - + const [isCompleted, setIsCompleted] = useState(status === 'completed'); const getBadgeColor = () => { switch (difficulty) { case 'easy': @@ -17,33 +22,27 @@ const Challenge = ({ challenge }) => { } }; - const isCompleted = status === 'completed'; + function complete() { + setIsCompleted(true); + } return ( -
-

{title}

-

{description}

-
- - {difficulty} - - - {points} pts - +
+

{title}

+

{description}

+
+ {difficulty} + {points} pts
{isCompleted ? ( - + ) : ( - + )}
-
- ); -}; +
+ ) +} export default Challenge; From a6f8c76248d461993f620cd40c3f65f409754286 Mon Sep 17 00:00:00 2001 From: ankitasure23 Date: Mon, 15 Sep 2025 10:14:39 +0530 Subject: [PATCH 6/7] Added the GoalsPage.jsx --- frontend/src/Components/goals/GoalPage.jsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/frontend/src/Components/goals/GoalPage.jsx b/frontend/src/Components/goals/GoalPage.jsx index ae08420..ce95c3a 100644 --- a/frontend/src/Components/goals/GoalPage.jsx +++ b/frontend/src/Components/goals/GoalPage.jsx @@ -44,7 +44,7 @@ const GoalPage = () => { return (
-

DevSync Challenges

+

DevSync Challenges

{/* Progress Cards */}
@@ -59,7 +59,7 @@ const GoalPage = () => { {/* Today's Challenges */}
-

Today's Challenges

+

Today's Challenges

{todaysChallenges.map((challenge) => ( ))} @@ -67,7 +67,7 @@ const GoalPage = () => { {/* This Week's Challenge */}
-

This Week's Challenge

+

This Week's Challenge

From 06fed717cc3ea1884c9484cde29285b2b7e122f0 Mon Sep 17 00:00:00 2001 From: ankitasure23 Date: Mon, 15 Sep 2025 11:17:00 +0530 Subject: [PATCH 7/7] Made the toggling changes: --- .../src/Components/goals/ActivityOverview.jsx | 7 ++++--- frontend/src/Components/goals/Challenge.jsx | 11 ++++++----- frontend/src/Components/goals/GoalPage.jsx | 10 +++++++--- .../src/Components/goals/ProgressTracker.jsx | 9 +++++---- frontend/src/Components/goals/goals.css | 16 ++++++++++++++++ 5 files changed, 38 insertions(+), 15 deletions(-) create mode 100644 frontend/src/Components/goals/goals.css diff --git a/frontend/src/Components/goals/ActivityOverview.jsx b/frontend/src/Components/goals/ActivityOverview.jsx index dc5b894..e6ca071 100644 --- a/frontend/src/Components/goals/ActivityOverview.jsx +++ b/frontend/src/Components/goals/ActivityOverview.jsx @@ -1,13 +1,14 @@ // src/components/ActivityOverview.jsx +import { color } from 'framer-motion'; import React from 'react'; const ActivityOverview = ({ activityData }) => { return ( -
-

Activity Overview

+
+

Activity Overview

{activityData.map((day, index) => ( -
+
))}
diff --git a/frontend/src/Components/goals/Challenge.jsx b/frontend/src/Components/goals/Challenge.jsx index 970ef4b..39a1ba0 100644 --- a/frontend/src/Components/goals/Challenge.jsx +++ b/frontend/src/Components/goals/Challenge.jsx @@ -1,4 +1,5 @@ // src/components/Challenge.jsx +import { color } from 'framer-motion'; import React from 'react'; import { useState } from 'react'; @@ -27,18 +28,18 @@ const Challenge = ({ challenge }) => { } return ( -
-

{title}

-

{description}

+
+

{title}

+

{description}

{difficulty} {points} pts
{isCompleted ? ( - + ) : ( - + )}
diff --git a/frontend/src/Components/goals/GoalPage.jsx b/frontend/src/Components/goals/GoalPage.jsx index ce95c3a..b44c8a9 100644 --- a/frontend/src/Components/goals/GoalPage.jsx +++ b/frontend/src/Components/goals/GoalPage.jsx @@ -4,8 +4,12 @@ import ProgressTracker from './ProgressTracker'; import ActivityOverview from './ActivityOverview.jsx'; import Challenge from './Challenge.jsx'; import { TracingBeam } from "../ui/tracing-beam"; +import { useContext } from "react"; +import ThemeContext from "../ui/theme-provider.jsx"; +import { Bold, Weight } from 'lucide-react'; const GoalPage = () => { + const theme = useContext(ThemeContext); // Example state for challenges and progress const [currentStreak, setCurrentStreak] = useState(7); const [bestStreak, setBestStreak] = useState(12); @@ -44,7 +48,7 @@ const GoalPage = () => { return (
-

DevSync Challenges

+

DevSync Challenges

{/* Progress Cards */}
@@ -59,7 +63,7 @@ const GoalPage = () => { {/* Today's Challenges */}
-

Today's Challenges

+

Today's Challenges

{todaysChallenges.map((challenge) => ( ))} @@ -67,7 +71,7 @@ const GoalPage = () => { {/* This Week's Challenge */}
-

This Week's Challenge

+

This Week's Challenge

diff --git a/frontend/src/Components/goals/ProgressTracker.jsx b/frontend/src/Components/goals/ProgressTracker.jsx index 48b160e..cd21778 100644 --- a/frontend/src/Components/goals/ProgressTracker.jsx +++ b/frontend/src/Components/goals/ProgressTracker.jsx @@ -1,17 +1,18 @@ // src/components/ProgressTracker.jsx import React from 'react'; +import './goals.css'; const ProgressTracker = ({ title, value, isProgress = false }) => { return ( -
-

{title}

- {isProgress ? ( +
+

{title}

+ {isProgress ? (
) : ( -

{value}

+

{value}

)}
); diff --git a/frontend/src/Components/goals/goals.css b/frontend/src/Components/goals/goals.css new file mode 100644 index 0000000..80fb098 --- /dev/null +++ b/frontend/src/Components/goals/goals.css @@ -0,0 +1,16 @@ +:root { + --background: #fff; + --foreground: #18181b; + --divColor : #1a2b47; + --progressText :#fff; + --buttonBack:#fff; + --buttonText:#000; +} +.dark { + --background: #18181b; + --foreground: #fafafa; + --divColor : #1a2b47; + --progressText:#fff; + --buttonBack:#fff; + --buttonText:#000; +} \ No newline at end of file