feat: Add Study Streak Tracker and Achievement Badges (Fixes #520)

client/src/components/Navbar.css

@@ -249,6 +249,7 @@ html[data-theme="dark"] .navbar-dropdown-menu a.active {
   padding: 0.3rem 0.6rem; /* Reduced padding to save horizontal space */
   border-radius: 6px;
   transition: background-color 0.2s ease, color 0.2s ease;
+}
 html[data-theme="dark"] .navbar-theme-toggle:hover {
   background: rgba(139, 180, 255, 0.12);
   color: #8ab4ff;

client/src/pages/Home.js

@@ -10,7 +10,6 @@ import "./Home.css";
 import './ScrollToTop.css';
 
 const Home = () => {
- feature/login-auth
   const { isAuthenticated } = useAuth();
 
 

client/src/pages/Profile.css

@@ -163,3 +163,145 @@
     width: 100%;
   }
 }
+
+/* Streak and Achievements styling */
+.profile-streak-card {
+  background: transparent;
+  padding: 2rem;
+  border-radius: 16px;
+  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.07);
+  border: 1px solid var(--border);
+  margin-bottom: 2rem;
+  display: flex;
+  flex-direction: column;
+  gap: 1.5rem;
+}
+
+.streak-stats {
+  display: flex;
+  gap: 2rem;
+  justify-content: center;
+  flex-wrap: wrap;
+}
+
+.streak-stat-item {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+  background: rgba(102, 126, 234, 0.1);
+  padding: 1.5rem 2rem;
+  border-radius: 12px;
+  min-width: 200px;
+}
+
+.streak-icon {
+  font-size: 2.5rem;
+}
+
+.streak-icon.current {
+  color: #ff9800; /* Orange/Fire */
+}
+
+.streak-icon.longest {
+  color: #f44336; /* Red/Fire */
+}
+
+.streak-info h3 {
+  margin: 0;
+  font-size: 1.8rem;
+  color: var(--text);
+}
+
+.streak-info p {
+  margin: 0;
+  font-size: 0.9rem;
+  color: var(--muted);
+  text-transform: uppercase;
+  letter-spacing: 1px;
+}
+
+.streak-actions {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.log-study-btn {
+  background: linear-gradient(45deg, #ff9800, #ff5722);
+  color: white;
+  border: none;
+  padding: 0.8rem 2rem;
+  border-radius: 50px;
+  font-size: 1.1rem;
+  font-weight: bold;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  box-shadow: 0 4px 15px rgba(255, 152, 0, 0.4);
+}
+
+.log-study-btn:hover:not(:disabled) {
+  transform: translateY(-2px);
+  box-shadow: 0 6px 20px rgba(255, 152, 0, 0.6);
+}
+
+.log-study-btn:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+
+.streak-message {
+  font-size: 0.9rem;
+  color: #4caf50;
+  font-weight: 600;
+}
+
+.badges-container {
+  margin-top: 1rem;
+  border-top: 1px solid var(--border);
+  padding-top: 1.5rem;
+}
+
+.badges-container h4 {
+  margin-top: 0;
+  margin-bottom: 1rem;
+  font-size: 1.2rem;
+  color: var(--text);
+  text-align: center;
+}
+
+.badges-grid {
+  display: flex;
+  gap: 1rem;
+  justify-content: center;
+  flex-wrap: wrap;
+}
+
+.badge-item {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 0.5rem;
+  background: rgba(255, 215, 0, 0.1);
+  padding: 1rem;
+  border-radius: 12px;
+  width: 120px;
+  border: 1px solid rgba(255, 215, 0, 0.3);
+  transition: transform 0.3s ease;
+}
+
+.badge-item:hover {
+  transform: translateY(-5px);
+}
+
+.badge-icon {
+  font-size: 2rem;
+  color: #ffd700;
+}
+
+.badge-item span {
+  font-size: 0.85rem;
+  font-weight: 600;
+  color: var(--text);
+  text-align: center;
+}

client/src/pages/Profile.js

@@ -5,14 +5,34 @@ import {
   FaFileUpload,
   FaCommentDots,
   FaBookmark,
+  FaFireAlt,
+  FaMedal,
 } from "react-icons/fa";
 import "./Profile.css";
 import './ScrollToTop.css';
-import { useAuth } from "../context/AuthContext";
+import { useAuth, authAxios } from "../context/AuthContext";
 
 const Profile = () => {
-feature/login-auth
-  const { user } = useAuth();
+  const { user, updateUser } = useAuth();
+
+  const [loadingStreak, setLoadingStreak] = useState(false);
+  const [streakMessage, setStreakMessage] = useState("");
+
+  const handleLogStudy = async () => {
+    setLoadingStreak(true);
+    setStreakMessage("");
+    try {
+      const res = await authAxios.post('/study-streak');
+      if (res.data.success) {
+        if (updateUser) updateUser(res.data.data.user);
+        setStreakMessage(res.data.message);
+      }
+    } catch (error) {
+      setStreakMessage("Failed to log study session.");
+    } finally {
+      setLoadingStreak(false);
+    }
+  };
 
 
   document.title = "StudyMatePlus | Profile";
@@ -108,6 +128,49 @@ feature/login-auth
         </motion.button>
       </motion.div>
 
+      <motion.div className="profile-streak-card" variants={fadeInUp}>
+        <div className="streak-stats">
+          <div className="streak-stat-item">
+            <FaFireAlt className="streak-icon current" />
+            <div className="streak-info">
+              <h3>{profileUser.currentStreak || 0}</h3>
+              <p>Current Streak</p>
+            </div>
+          </div>
+          <div className="streak-stat-item">
+            <FaFireAlt className="streak-icon longest" />
+            <div className="streak-info">
+              <h3>{profileUser.longestStreak || 0}</h3>
+              <p>Longest Streak</p>
+            </div>
+          </div>
+        </div>
+        <div className="streak-actions">
+           <button 
+             className="log-study-btn" 
+             onClick={handleLogStudy} 
+             disabled={loadingStreak}
+           >
+             {loadingStreak ? "Logging..." : "Log Study Session"}
+           </button>
+           {streakMessage && <p className="streak-message">{streakMessage}</p>}
+        </div>
+
+        {profileUser.badges && profileUser.badges.length > 0 && (
+          <div className="badges-container">
+            <h4>Achievements</h4>
+            <div className="badges-grid">
+              {profileUser.badges.map((badge, idx) => (
+                <div key={idx} className="badge-item">
+                  <FaMedal className="badge-icon" />
+                  <span>{badge}</span>
+                </div>
+              ))}
+            </div>
+          </div>
+        )}
+      </motion.div>
+
       <motion.div className="profile-tabs-container" variants={fadeInUp}>
         <div className="profile-tabs">
           <button

server/index.js

@@ -11,11 +11,8 @@ const fs = require('fs');
 dotenv.config();
 
 const app = express();
-feature/login-auth
 app.use(cors());
 app.use(express.json());
-const fs = require('fs');
-const path = require('path');
 const crypto = require('crypto');
 const multer = require('multer');
 const { Configuration, OpenAIApi } = require('openai');

server/models/User.js

@@ -62,6 +62,22 @@ const userSchema = new mongoose.Schema(
       default: '',
       trim: true,
     },
+    currentStreak: {
+      type: Number,
+      default: 0,
+    },
+    longestStreak: {
+      type: Number,
+      default: 0,
+    },
+    lastStudyDate: {
+      type: Date,
+      default: null,
+    },
+    badges: {
+      type: [String],
+      default: [],
+    },
   },
   {
     timestamps: true,
@@ -135,6 +151,10 @@ userSchema.methods.toPublicJSON = function () {
     isVerified: this.isVerified,
     createdAt: this.createdAt,
     lastLogin: this.lastLogin,
+    currentStreak: this.currentStreak,
+    longestStreak: this.longestStreak,
+    lastStudyDate: this.lastStudyDate,
+    badges: this.badges,
   };
 };