LOGICLINK

A real-time integrity-tracking dashboard that turns DSA practice into a narrative experience

Comment

Inspiration

Most Data Structures and Algorithms (DSA) trackers are boring spreadsheets or simple lists. As an engineering student, I noticed a trend: the availability of AI-driven shortcuts (like LLMs) often tempts students to skip the "struggle" that is necessary for true mastery.

I wanted to build a project that didn't just track what I solved, but how I solved it. I was inspired by the Telltale Games "The Walking Dead" series—where every choice has a consequence. I decided to turn the solitary act of coding into a high-stakes narrative experience where your "Integrity" is your most valuable resource.

What it does

The project is a full-stack ecosystem consisting of a Browser Extension and a Real-time Dashboard:

The Extension (The Brain): Built with JavaScript (ES Modules) and the Gemini 1.5 Flash API. It monitors coding sessions on LeetCode and Codeforces, using a Socratic tutoring model to provide progressive hints without giving away the solution.

The Dashboard (The Animus): A Next.js 14 application styled with Tailwind CSS and Framer Motion. It uses a "Bento Grid" layout with a custom cel-shaded, sketchy ink aesthetic to mimic the Telltale art style.

Real-time Link: I used Firebase Firestore as the central nervous system. The extension writes behavioral data (tab switches, hint usage, solve speed) to a document, and the website uses onSnapshot listeners to update the UI instantly without a refresh.

How we built it

The project is a full-stack ecosystem consisting of a Browser Extension and a Real-time Dashboard:

The Extension (The Brain): Built with JavaScript (ES Modules) and the Gemini 1.5 Flash API. It monitors coding sessions on LeetCode and Codeforces, using a Socratic tutoring model to provide progressive hints without giving away the solution.

The Dashboard (The Animus): A Next.js 14 application styled with Tailwind CSS and Framer Motion. It uses a "Bento Grid" layout with a custom cel-shaded, sketchy ink aesthetic to mimic the Telltale art style.

Real-time Link: I used Firebase Firestore as the central nervous system. The extension writes behavioral data (tab switches, hint usage, solve speed) to a document, and the website uses onSnapshot listeners to update the UI instantly without a refresh.

Challenges we ran into

Service Worker Lifecycle: Managing the Firebase connection in a Chrome Extension Service Worker was difficult because the worker goes "idle." I had to implement a robust state-management system using chrome.storage.local to ensure no data was lost between syncs.

Real-time Reactivity: Creating a dashboard that shifts its entire color palette and UI based on a single Firestore value required deep integration with Framer Motion and React's useEffect hooks.

Prompt Engineering: Fine-tuning the Gemini API to act as a Socratic Tutor rather than a solution-generator was a process of trial and error to ensure the hints were helpful but not "spoilers."

Accomplishments that we're proud of

Seamless Real-Time Synchronization The "Survivor" Adaptive UI Socratic AI Implementation

What we learned

This project taught me the importance of Behavioral Engineering. I learned how to bridge two completely different platforms (a Browser Extension and a Web App) into a single, cohesive user experience. It pushed my skills in Asynchronous JavaScript, Real-time Databases, and UI/UX design, proving that technical tools can be used to tell a compelling story about personal growth and academic integrity.

What's next for LOGICLINK

MAKE EVERYONE BETTER AT DSA

Built With

Share this project:

Updates