2/22/26 Devlog

Project Vision

I really wanted to build something to help me learn faster and excel with less effort in school.
So I started building serify: A context-aware learning reflection engine designed to move beyond simple testing. It uses AI to analyze conceptual depth, identify misconceptions, and map knowledge gaps in real-time.

Core Features Implemented

1. AI-Powered Diagnostic Engine

• Content Processing: Extracts hierarchical concept maps from raw text, YouTube URLs, or PDFs using Gemini 2.5 Pro.
• Dynamic Question Generation: Creates retrieval, application, and misconception-probe questions tailored to the extracted concepts.
• Real-time Answer Analysis: Analyzes student responses for factual accuracy and conceptual depth without blocking the user flow.
• Feedback Synthesis: Generates a comprehensive report including a summary of grasp, strength maps, and actionable focus suggestions.

2. Data & Persistence

• Session History: Persistent tracking of all historical and active sessions in localStorage.
• Knowledge Gaps: A centralized summary of identified conceptual gaps rendered on the main dashboard.
• Storage Utility: Centralized lib/storage.ts for managing the lifecycle of learning sessions.

Technical Architecture

• Framework: Next.js (Pages Router)
• AI Backend: Google Gemini API (using 2.5 pro) via @google/generative-ai
• Styling: Vanilla CSS with modern CSS variables for theming and Glassmorphism effects.
• Icons: Lucide React
• Authentication: Firebase/Custom integration (ready for bridge to Supabase).

UI Refactor & Playback Stability

Summary

This cycle focused on a full playback-side UI polish and increase interaction reliability. I tried to to make the screen feel production-ready: cleaner visual hierarchy, predictable controls, and fewer layout artifacts. The old design was a mess.

UI Refactor Progress (I had AI write these changes)

• Refined playback window composition so the title bar and code surface feel like one connected component.
• Removed the “double-box” look by flattening the inner frame treatment under the title bar.
• Improved line-number gutter placement and visual balance.
• Made playback title editable inline (code.js — bash), with better typing behavior and no caret jump while editing.
• Simplified settings sidebar by removing unused/low-value controls:
  • Window Controls
  • Drop Shadow
  • Export Settings block
• Removed the non-working Tpyr.wait(ms) tip in the bottom-right info panel.

Playback Interaction Improvements

• Reworked playback resizing behavior:
  • Resize no longer causes the window to drift/move unexpectedly.
  • Edge hit-testing now respects true bounds and uses tighter handle sensitivity.
  • Horizontal scroll behavior improved so line numbers stay visually fixed while code scrolls.
• Play/Pause control reliability fixed:
  • Migrated pause/resume handling to the Typed.js-compatible control path.
  • Prevented accidental auto-complete jumps by constraining typing advancement behavior.

Rendering & Content Behavior

• Restored continuous line numbering and default-on line number state.
• Added playback horizontal overscroll behavior with hidden scrollbar for overflowed lines.
• Wired font-family selector into runtime theme/render state so selection updates are reflected in playback.

I finished the project and this is my first devlog :(

Code Typer

Code Typer is a browser-based typing simulator that turns real source code into a smooth playback you can export as looping GIFs. Paste or type code, preview the animation, and save GIFs locally or to the built-in compilation library.

Features

• Play back code typing with precise millisecond control over the cursor speed.
• Insert non-blocking pauses with Tpyr.wait() directives that are ignored by the output text.
• Automatic trimming keeps playback performant during long sessions without flashing the cursor to the top.
• Adjustable stage width, minimum height, and reset height when you need roomy frames.
• Multiple color themes tuned for the custom highlight map.
• Optional line numbers render in the live stage and exported GIFs with a single toggle.
• Override syntax detection with a searchable language picker when auto-detect gets it wrong.
• Export ready-to-share GIFs or compile them into a temporary library without downloading immediately.

Development Notes

The project is framework-free and ships static assets only:

• main.js holds the playback controller, highlight mapping, wait directive parser, and GIF export pipeline.
• styles.css styles the layout, stage controls, and compilation panel.
• index.html wires everything together and pulls in dependencies from public CDNs (Typed.js, Highlight.js, gif.js).

Clone or open the folder with any static server to test locally. No build step is required.

Musicax V2
Focus: The “Coach” (algorithm) Update, UI Overhaul, and Stability Fixes, and more.

🚀 Key Features

1. The “Coach” (AI & Deterministic Hybrid)
   We moved from a simple practice tracker to an intelligent “Coach” that guides the user’s daily practice.

Smart Daily Plan: Instead of just starting a timer, the app now generates a structured
DailyPlan
based on practice history, streaks, and piece staleness.
Deterministic Core: Implemented a robust scoring algorithm (
coachService.ts
) to prioritize pieces users need to practice but might be avoiding.
AI “Advisor”: Added hooks for Gemini AI to generate specific tasks and “reasons” for why a piece is in the plan (syncing with gemini 1.5).
2. Premium Home Screen UI
Completely redesigned the main interface to feel more “Pro” and less “MVP”.

Daily Plan Card: A new hero component that greets the user, shows their streak, and presents today’s focus.
Integrated Tools: Metronome, Tuner, and Recorder are now seamlessly integrated into the bottom practice bar, accessible anytime without checking into a session.
Quick Start: Added “Running Bubbles” for one-tap access to the 3 most recent pieces.
3. Integrated Tooling
Real-time Tuner: Implemented a chromatic tuner using @siteed/expo-audio-stream and pitchy.
Metronome: Fixed timing issues and integrated controls directly into the practice view.
Unified Footer: Tools, Timer, and “Current Piece” are now anchored to the bottom for better ergonomics during practice.
🛠 Technical Improvements
Database & Sync
Supabase + Local SQLite: Solved a major crash where local and remote user schemas were out of sync.

🐛 Bug Fixes
User Not Found: Fixed crash when fetching daily plan (Local DB sync issue).
Task Gen Error: Fixed 404s when generating practice tasks (Invalid Gemini model).
Timer UI: Fixed layout issues with the floating tool bar and modal visibility.

So basically after working a really really long time on this project everything started kind of falling apart, so I simplified a lot of stuff and then kind of restarted the project.
Now it’s a lot cleaner and I can probably publish to the app store soon.
This devlog is a while after I did a ton of work. (like half of it was for nothing)

My goal for this app is to organize your life, and make everything easier in life. I originally made this so that I could be more productive, and kind of visualize everything on a screen. I came up with this idea while talking to my friend about our ideas, and he mentions the book: Building a Second Brain by Tiago Forte. We then talked about the PARA method, which stands for projects, areas, resources, and archives.
He tried to do this manually, which is what everyone currently does.
I thought, “That’s a lot of friction, what if I could automate most of this work in an app?”
That’s how we came up with this idea.

So far, I have all the core features implemented, and am experimenting with the app flow. This is probably going to take a while, as the perfect user experience is very difficult.

FYI I’ve created many core features and done lots of work before posting this devlog.

I’ve created most the screens, most of the components, and chosen my UI theme.
Most of the core features are finished, all I have now is to move onto more advanced features.
I’m also going to publish app to the app store soon and try to get user feedback on Reddit!
This is my first devlog so I dont know if the images below will adjust themselves :(

🛠 MVP Completion!

📋 Objective
The goal for this MVP was to build a functional environment where information doesn’t just go to die. We aimed to create a seamless transition where any captured thought (CODE) has a pre-defined home (PARA), eliminating the “where do I put this?” anxiety that kills productivity.

🏗 Progress & Implementation
I’ve successfully stood up the core pillars of the Neyro ecosystem. The Capture module is now live, featuring a “Quick Entry” widget that dumps all raw data into a temporary Inbox, decoupled from the main PARA hierarchy. This ensures that the flow of ideas isn’t interrupted by administrative filing.

The PARA backbone is fully partitioned. We’ve implemented a relational linking system where Projects are automatically tied to their parent Areas. For the Distill phase, we integrated a Markdown-based editor that supports nested folding, allowing users to collapse raw notes and leave only the “distilled” headers visible. Finally, the Express layer was realized through a “Workspace” view—a clean, distraction-free interface that pulls in all notes from a specific Project folder, serving as a launchpad for final output.

🚀 Next Steps
With the MVP stable, the next iteration will focus on “Smart Suggestions.” We want the system to look at a Captured note and use entity recognition to suggest which Area it belongs to. We are also looking into “Project Archival Automations” to prompt users to move folders once a project deadline has passed.

I created the structure of the project!!!