Skip to content

feat: replace mock data with live MongoDB CRUD + fix hydration + AI s…#8

Open
abhayshaw1601 wants to merge 1 commit into
Mayank10123:mainfrom
abhayshaw1601:main
Open

feat: replace mock data with live MongoDB CRUD + fix hydration + AI s…#8
abhayshaw1601 wants to merge 1 commit into
Mayank10123:mainfrom
abhayshaw1601:main

Conversation

@abhayshaw1601

@abhayshaw1601 abhayshaw1601 commented May 16, 2026

Copy link
Copy Markdown

PR Description: Transition Mock Data to Dynamic MongoDB Integration, Hydration Resolutions, and Python AI Service Stabilization

Fixing ISSUE #5

Overview

This Pull Request transitions the application's core dashboard and profile metrics from hardcoded static mock datasets to a fully dynamic, stateful database integration backed by MongoDB (Mongoose) and the Express backend server. It also resolves critical runtime React hydration errors in the Next.js client, crashes in the FastAPI Python AI service, and improves git hygiene across the monorepo.


🛠️ Key Changes Included

1. Database Integration & Dynamic Schemas

  • Express REST APIs (server/routes/userRoutes.js): Added robust GET/PUT /profile and GET/PUT /progress REST API endpoints with automatic self-healing fallback constructors that automatically initialize baseline records for newly authenticated Firebase SSO users.
  • Extended Schemas: Extended the Mongoose User and Progress schemas to persist target roles, daily active streaks, total experience points (XP), weekly change offsets, and recent activity logs.
  • Isolated Database Seeding (server/seed.js): Isolated all developer test data into a dedicated, clean database seeder. Developers can wipe and repopulate their local MongoDB databases by running npm run seed.

2. Zero-State Onboarding Architecture

  • True Candidate Journey: Designed a clean slate experience where newly registered accounts today start completely at 0% placement probability, 0 XP, 0 streak, and with a fresh onboarding checklist containing pending tasks (ready for them to check off).
  • Fully Stateful Indicators (client/app/page.js): Binded all dashboard gauges, weekly change subtexts, active day circles (M, T, W, T, F, S, S), and the 4 AI Brain progress bars to real-time database state (no hardcoded indicators remaining!).
  • Color-Coded Weekly Indicators: Styled the Placement Probability change subtext to render in bright green if positive, muted grey/slate if neutral (+0% for new profiles created today), and red if negative.

3. Critical Hydration & FastAPI Bug Resolutions

  • Next.js Hydration Mismatch Resolution: Consolidated all CSS color tokens, variables, and keyframe animations from layout.js into globals.css and deleted the inline <style> element inside the head, resolving the React runtime hydration crash (Text content does not match server-rendered HTML).
  • FastAPI Pydantic Crash Fix (ai_service/main.py): Fixed a critical crash in the Python AI Service where the /mentor/context endpoint attempted to parse a raw dict body instead of a valid Pydantic model. Added a strict MentorContextPayload schema.
  • Git Hygiene (.gitignore): Added local Python virtual environments (.venv/, venv/, env/, .env/) and the private ai_service/.env file containing live Groq API keys to the root .gitignore to prevent secret leaks and keep commit packages clean.

How to Test

Step 1: Initialize & Seed the Developer Demo Environment

Verify that the standalone database seeder functions correctly and creates a fully loaded, realistic environment for testing:

  1. Open your terminal in the server directory and run:
    npm run seed
  2. Verify that the terminal logs confirm successful database connection, database wipe, and successful document seeding.
  3. Open your browser to http://localhost:3000 (defaults to the mayank@example.com seeded account).
  4. Verify that the dashboard successfully loads Mayank's seeded data:
    • Placement Probability: 68% with a green +4% this week subtext.
    • Streak: 14 Day Streak with all 7 days (M to S) lit up green.
    • AI Brain Status: All 4 progress bars lit up blue (reflecting a 14-day high-performance consistency).
    • Level: Level 3 Executive (1240 / 2000 XP).

Step 2: Test Onboarding & Zero-State for a New User

Verify that a newly registered user starts at a clean, zero-progress state without pre-filled mock clutter:

  1. Open your browser console (F12) and change the active email to a brand-new user by typing:
    localStorage.setItem('userEmail', 'newcandidate@example.com');
  2. Refresh the browser page.
  3. Verify that the self-healing backend dynamically creates a clean profile:
    • Placement Probability is exactly 0%.
    • Weekly Progress Subtext is +0% this week in a muted, neutral slate-grey (indicating a fresh profile created today!).
    • Streak is 0 Day Streak.
    • AI Brain Status and Weekly Day Indicators are completely greyed out / inactive.
    • Level starts at Level 1 Executive (0 / 2000 XP) with an empty progress bar.
    • Onboarding Checklist contains three pending tasks (Setup Career Focus Area, Generate AI Guided Roadmap, Upload Initial Resume Draft).

Step 3: Test Real-Time Data Persistence

Verify that changes made from the UI instantly update MongoDB and update your dashboard live:

  1. Go to the Profile section on the sidebar.
  2. Click Edit, change your Target Role to something custom (e.g. Staff Systems Engineer or Principal Architect), and click Save.
  3. Return to the Dashboard.
  4. Verify that the subtitle has dynamically updated:

    "Propelling your trajectory toward [Your New Custom Role] roles."

  5. Go to the Gamification or Profile Analyzer page and confirm that all metrics match the real-time state updated in your MongoDB database.

Step 4: Verify Python AI Service Stability

Verify that the AI service compiles and handles requests gracefully without crashing:

  1. Ensure the Python FastAPI service is active in ai_service.
  2. Verify that /mentor/context queries now parse correctly through the Pydantic schema and call the LLaMA 3.1 LLM without crashing.
  3. Try asking the Mentor Chat a question or prompt; confirm that the suggestions and fun callbacks load dynamically.

Impact

  • Product Readiness: Replaces fragile static frontend mockups with a database-backed, production-ready REST API architecture.
  • Developer Experience (DX): Zero manual database setup required; one command (npm run seed) seeds a highly realistic environment.
  • UI Stability: Resolves the main Next.js hydration console warning, making the platform fast and robust.

@vercel

vercel Bot commented May 16, 2026

Copy link
Copy Markdown

@abhayshaw1601 is attempting to deploy a commit to the mayank10123's projects Team on Vercel.

A member of the Team first needs to authorize it.

@abhayshaw1601

abhayshaw1601 commented May 16, 2026

Copy link
Copy Markdown
Author

Hi @Mayank10123 , Could you please add the gssoc'26 and level:advance/intermediate (as u feel) labels to this PR and issue so it can be tracked on the GSSoC leaderboard? Thank you!

@abhayshaw1601

Copy link
Copy Markdown
Author

Hi, @Mayank10123 is there any issue with the changes ? If any issue u can see then tell me I will resolve it ASAP

@Mayank10123

Copy link
Copy Markdown
Owner

i can't understand what exactly you did coz the things you mentioned above either were already there or were not needed in app

@Karanjot786

Copy link
Copy Markdown

Hey @abhayshaw1601! Saw your work on GSSoC 2026.

We are building TermUI, a TypeScript terminal UI framework with React-style hooks and JSX, rendered entirely in the terminal.

We have 74 unassigned GSSoC issues open across widgets, hooks, adapters, and CLI tooling. Your JavaScript background transfers directly.

Karanjot, TermUI maintainer

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants