Add Live Pomodoro Timer with Break Cycle Integration #26

frontend/package.json

@@ -22,7 +22,7 @@
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
     "react-intersection-observer": "^9.16.0",
-    "react-router-dom": "^7.7.0",
+    "react-router-dom": "^7.7.1",
     "shadcn": "^2.9.2",
     "tailwind-merge": "^3.3.1",
     "tailwindcss": "^4.1.11"

frontend/src/App.jsx

@@ -9,6 +9,7 @@ import { FeaturesSection } from "./Components/Features";
 import Footer from "./Components/footer";
 import ScrollRevealWrapper from "./Components/ui/ScrollRevealWrapper";
 import Loader from "./Components/ui/Loader"; // ✅ Import the Loader
+import Pomodoro from "./Components/Pomodoro";
 
 
 function App() {
@@ -59,6 +60,7 @@ function App() {
           <About />
         </div>
         <ScrollRevealWrapper delay={0.2}>
+
         <div id="contact">
 
           <Contact/>

frontend/src/Components/Features.jsx

@@ -1,4 +1,5 @@
 // src/Components/FeaturesSectionDemo.jsx
+
 import { cn } from "@/lib/utils";
 import {
   Activity,
@@ -10,82 +11,94 @@ import {
   TimerReset,
   BarChart3,
 } from "lucide-react";
+import { useNavigate } from "react-router-dom";
 
 export function FeaturesSection() {
+  const navigate = useNavigate();
   const features = [
     {
       title: "Unified Developer Dashboard",
-      description: "Track GitHub, LeetCode, Codeforces, and more from a single dashboard.",
+      description:
+        "Track GitHub, LeetCode, Codeforces, and more from a single dashboard.",
       icon: <Activity />,
     },
     {
       title: "Smart Productivity Logs",
-      description: "Log tasks, wins, blockers, and progress with daily summaries.",
+      description:
+        "Log tasks, wins, blockers, and progress with daily summaries.",
       icon: <BookOpen />,
     },
     {
       title: "Live Pomodoro Timer",
-      description: "Focus with an integrated Pomodoro and break cycle tracker.",
+      description:
+        "Focus with an integrated Pomodoro and break cycle tracker.",
       icon: <TimerReset />,
     },
     {
       title: "Auto GitHub Sync",
-      description: "Sync contributions, commits, and streaks automatically.",
+      description:
+        "Sync contributions, commits, and streaks automatically.",
       icon: <GitBranch />,
     },
     {
       title: "DSA Progress Tracking",
-      description: "Keep tabs on your problem-solving journey across platforms.",
+      description:
+        "Keep tabs on your problem-solving journey across platforms.",
       icon: <Brain />,
     },
     {
       title: "Interactive Visualizations",
-      description: "Understand your productivity via dynamic graphs and charts.",
+      description:
+        "Understand your productivity via dynamic graphs and charts.",
       icon: <BarChart3 />,
     },
     {
       title: "Community Collaboration",
-      description: "Connect, share logs, and grow together with other developers.",
+      description:
+        "Connect, share logs, and grow together with other developers.",
       icon: <MessageCircle />,
     },
     {
       title: "Time Management Tools",
-      description: "Track how you spend your dev hours with real insights.",
+      description:
+        "Track how you spend your dev hours with real insights.",
       icon: <Clock />,
     },
   ];
 
   return (
-       <div id="features" className=" bg-[#101e35] border border-[#1c2e4a] rounded-3xl p-8 md:p-12 shadow-lg">
-    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 relative z-10 py-10 max-w-7xl mx-auto">
-      {features.map((feature, index) => (
-        <Feature key={feature.title} {...feature} index={index} />
-      ))}
-    </div>
+    <div
+      id="features"
+      className=" bg-[#101e35] border border-[#1c2e4a] rounded-3xl p-8 md:p-12 shadow-lg"
+    >
+      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 relative z-10 py-10 max-w-7xl mx-auto">
+        {features.map((feature, index) => (
+          <Feature
+            key={feature.title}
+            onClick={() => {
+              if (index === 2) {
+                navigate("/pomodoro-timer");
+              }
+            }}
+            {...feature}
+            index={index}
+          />
+        ))}
+      </div>
     </div>
   );
 }
 
-const Feature = ({
-  title,
-  description,
-  icon,
-  index,
-}) => {
+const Feature = ({ title, description, icon, index, onClick }) => {
   return (
     <div
+      onClick={onClick}
       className={cn(
-        "flex flex-col lg:border-r py-10 relative group/feature dark:border-neutral-800",
+        "flex flex-col lg:border-r py-10 relative group/feature dark:border-neutral-800 hover:cursor-pointer",
         (index === 0 || index === 4) && "lg:border-l dark:border-neutral-500",
         index < 4 && "lg:border-b dark:border-neutral-800"
       )}
     >
-   {index < 4 ? (
-  <div className="opacity-0 hover:cursor-pointer" />
-) : (
-  <div className="opacity-0 hover:cursor-pointer" />
-)}
-
       <div className="mb-4 relative z-10 px-10 text-blue-100 dark:text-neutral-400">
         {icon}
       </div>

frontend/src/Components/Pomodoro.jsx

@@ -0,0 +1,105 @@
+import React, { useState, useEffect, useRef } from 'react';
+import { useNavigate } from 'react-router-dom';
+
+const Pomodoro = () => {
+const navigate=useNavigate()
+
+  const [isWorkSession, setIsWorkSession] = useState(true);
+  const [timeLeft, setTimeLeft] = useState(25 * 60); // 25 minutes
+  const [isRunning, setIsRunning] = useState(false);
+  const intervalRef = useRef(null);
+
+  const formatTime = (seconds) => {
+    const mins = String(Math.floor(seconds / 60)).padStart(2, '0');
+    const secs = String(seconds % 60).padStart(2, '0');
+    return `${mins}:${secs}`;
+  };  
+
+  useEffect(() => {
+    if (isRunning) {
+      intervalRef.current = setInterval(() => {
+        setTimeLeft((prev) => {
+          if (prev === 1) {
+            clearInterval(intervalRef.current);
+            const nextIsWork = !isWorkSession;
+            setIsWorkSession(nextIsWork);
+            setTimeLeft(nextIsWork ? 25 * 60 : 5 * 60);
+            setIsRunning(false);
+          }2    
+          return prev - 1;
+        });
+      }, 1000);
+    }
+
+    return () => clearInterval(intervalRef.current);
+  }, [isRunning, isWorkSession]);
+
+  const startTimer = () => {
+    if (!isRunning) setIsRunning(true);
+  };
+
+  const pauseTimer = () => {
+    clearInterval(intervalRef.current);
+    setIsRunning(false);
+  };
+
+  const resetTimer = () => {
+    clearInterval(intervalRef.current);
+    setIsRunning(false);
+    setTimeLeft(25 * 60);
+    setIsWorkSession(true);
+  };
+
+  return (
+  <section className="min-h-screen bg-[#DCE6EC] flex flex-col items-center justify-center px-4 md:px-10">
+    <button
+      onClick={() => navigate(-1)}
+      className="absolute top-4 right-4 bg-red-500 text-white px-4 py-2 rounded text-sm sm:text-base md:text-lg"
+      id="3"
+    >
+      Close
+    </button>
+
+    <h2 className="text-3xl sm:text-4xl md:text-5xl font-bold mb-6 pt-4 text-center">
+      POMODORO TIMER!
+    </h2>
+
+    <h4
+      className={`absolute top-20 px-4 py-2 sm:px-6 sm:py-2 rounded text-white text-lg sm:text-xl md:text-2xl ${
+        isWorkSession ? 'bg-green-500' : 'bg-blue-500'
+      }`}
+    >
+      {isWorkSession ? 'Work Session' : 'Take a Break'}
+    </h4>
+
+    <div className="text-center mt-20 w-full">
+      <h1 className="text-[70px] sm:text-[100px] md:text-[130px] lg:text-[170px] font-bold">
+        {formatTime(timeLeft)}
+      </h1>
+
+      <div className="flex flex-col sm:flex-row justify-center items-center gap-4 mt-6">
+        <button
+          onClick={startTimer}
+          className="bg-yellow-400 text-black px-6 py-3 sm:px-8 sm:py-3 text-lg sm:text-xl md:text-2xl rounded shadow-md font-bold hover:scale-105 duration-100"
+        >
+          Start
+        </button>
+        <button
+          onClick={pauseTimer}
+          className="bg-orange-400 text-black px-6 py-3 sm:px-8 sm:py-3 text-lg sm:text-xl md:text-2xl rounded shadow-md font-bold hover:scale-105 duration-100"
+        >
+          Pause
+        </button>
+        <button
+          onClick={resetTimer}
+          className="bg-red-400 text-black px-6 py-3 sm:px-8 sm:py-3 text-lg sm:text-xl md:text-2xl rounded shadow-md font-bold hover:scale-105 duration-100"
+        >
+          Reset
+        </button>
+      </div>
+    </div>
+  </section>
+);
+};
+
+export default Pomodoro;

frontend/src/main.jsx

@@ -5,12 +5,14 @@ import './index.css';
 import { BrowserRouter, Routes, Route } from 'react-router-dom';
 import App from './App.jsx';
 import NotFound from './Components/ui/NotFound.jsx'; // ✅ 404 page
+import Pomodoro from './Components/Pomodoro';
 
 createRoot(document.getElementById('root')).render(
   <StrictMode>
     <BrowserRouter>
       <Routes>
         <Route path="/" element={<App />} />
+        <Route path='/pomodoro-timer' element={<Pomodoro/>}/>
         <Route path="*" element={<NotFound />} /> {/* ✅ Catch-all route */}
       </Routes>
     </BrowserRouter>