ClearStep

Clear the noise, find your focus, and take the next step—one tiny action at a time.

Comment

What inspired me

Traditional productivity tools demand high executive function. When working with neurodivergent conditions like ADHD, opening a blank task manager or staring at a sprawling list of unorganized tasks triggers instant task paralysis and the "Wall of Awful."

I wanted to model this cognitive friction mathematically. In standard task managers, presenting \(N\) tasks simultaneously causes the perceived cognitive load (\(L\)) to compound based on the weight (\(w\)) and friction (\(f\)) of each task:

$$ L_{traditional} = \sum_{i=1}^{N} (w_i \cdot f_i) + C_{context_switch} $$

This creates an overwhelming mental barrier. I realized that work should fit human cognition rather than forcing human cognition to fit rigid software structures. ClearStep was inspired by the need to reduce \(N\) to \(1\). By mathematically minimizing the visible variables to a single immediate node (\(L_{ClearStep} = w_1 \cdot f_1\)), the app acts as an AI-driven prosthetic that translates chaotic voice ramblings into an accessible, single-node focus workflow.

What it does

ClearStep is a neurodivergent-first focus prosthetic. Users can ramble unstructured thoughts and random tangents using browser microphone recording or text input. The system uses Groq's Whisper API for high-accuracy speech transcription and Llama models to analyze the text, isolate the single core mission, and extract distracting tangents into a safe "Tangent Parking Lot."

Instead of showing an overwhelming list, the interface locks onto a single micro-step at a time in "Blindfold Mode." It provides a 5-second physical starter trigger, a visual time-horizon countdown, and browser Text-to-Speech (TTS). If a step feels too intimidating, the "I'm Stuck" button dynamically breaks that single step down into three microscopic physical actions. It also generates professional, zero-shame status update handoffs for Slack or email using a multi-language translation engine.

How I built my project

I built ClearStep as a complete full-stack web application:

  • Backend: I utilized Python and Django for robust backend routing, API orchestration, and session management. PostgreSQL stores the raw brain dumps and structured micro-steps via Django ORM models.
  • AI & Translation: I integrated the groq Python SDK to communicate with whisper-large-v3 for transcription and high-speed Llama models for structured JSON extraction. I also incorporated deep-translator to support cross-lingual workflows and team handoffs.
  • Frontend: I developed a sleek, responsive user interface using Tailwind CSS and vanilla JavaScript. I implemented browser Web Audio APIs for real-time canvas waveform visualizations and brown noise generation, alongside MediaRecorder APIs for asynchronous audio capture.
  • Deployment: The application is deployed live on Render, utilizing Gunicorn as the WSGI HTTP server and managed through GitHub version control.

Challenges I faced

  • Structured JSON Extraction: Getting LLMs to consistently output strict JSON schemas without extra markdown wrappers required explicit system prompts, fallback regex cleaners, and robust exception handling in my Django views.
  • Audio Blobs & Cross-Browser Compatibility: Handling .webm audio blobs captured via the browser MediaRecorder API and passing them cleanly via FormData to Django required managing asynchronous AJAX lifecycle events and ensuring proper CSRF exemption decorators.
  • Model Deprecations: Navigating rapid changes in cloud AI inference endpoints required writing a dynamic fallback function that queries the Groq API for active models, ensuring the app doesn't break if a specific Llama version is decommissioned.
  • Deployment Configuration: Transitioning from a local SQLite setup to a production PostgreSQL database on Render required careful management of environment variables, gunicorn dependencies, and WSGI server configurations.

What I learned

I learned advanced patterns in integrating third-party AI inference APIs with Django backend services and handling binary audio data streams in JavaScript. I gained deep experience in prompt engineering to output reliable, localized structured data for dynamic UI rendering. Most importantly, I learned how intentional UX design choices—like actively hiding future steps to mathematically reduce cognitive overload—can profoundly impact digital accessibility.

Built With

Share this project:

Updates

Submission history