DigiPico: I Built a Gamified AI Companion with Mastra & Gemma 4 to Help My Friend Fall in Love with Tech

Slevin Cordeiro — Sun, 04 Oct 2026 18:05:00 +0000

This is a submission for the Hacktoberfest Weekend Challenge: Build for a Friend

What I Built

I built DigiPico, a gamified, mobile-first AI learning companion designed specifically for a close friend of mine who doesn't particularly like tech.

As a developer, I’ve always wanted to share my passion for software with her, but she has always found the tech world deeply intimidating, dry, and unapproachable. Traditional learning platforms felt too much like reading a textbook, and code editors felt cold and unforgiving. I wanted her to be genuinely interested in how things work behind the scenes, so I realized I needed to disguise the learning process as a welcoming, interactive game.

That’s where DigiPico comes in. Pico is a supportive, adorable blue penguin tutor that completely removes the intimidation factor from learning computer science. Instead of lecturing, Pico breaks down complex concepts into bite-sized, interactive learning paths. The app adapts to her specific interests, generates dynamic multiple-choice quizzes to test her knowledge, and even creates safe, browser-based JavaScript sandboxes where she can write and execute real code. Every time she completes a challenge or runs code without errors, she earns XP and unlocks achievements.

The Hand-off:
When I finally handed the app over to her to test on her phone, her reaction was incredible. She immediately gravitated towards the cute penguin, spent almost an hour playing through the JavaScript coding challenges, and told me: "This is the first time programming actually felt like a fun puzzle game instead of an overwhelming math test." That alone made the whole weekend worth it.

Demo

📱 Best Experience: DigiPico was designed from the ground up with a mobile-first UI. For the absolute best experience, open the link on your smartphone to see it behave exactly like a native app!

🚀 Live App: https://digipico.onrender.com/

(Tip: Create a new account, type in a topic like "Artificial Intelligence" or "Robotics", and interact with Pico across the Chat, Learn, and Build tabs!)

Code

Shade555 / DigiPico

🐣 DigiPico is a cute AI-powered tech companion that helps beginners discover, understand, and learn technology through personalized explanations, hands-on challenges, learning paths, and opportunities. Powered by Gemma 4 and an open AI stack, DigiPico turns tech curiosity into confidence and building.

# 🐧 DigiPico

A gamified, mobile-first AI learning companion designed to cure tech intimidation.

🏗️ Architecture

flowchart TD
    User(["📱 User / Capacitor Mobile"]) --> |HTTPS| Render
    
    subgraph Render [Render Monolith]
        UI[Frontend UI]
        API[Backend API Routes]
        UI <--> API
    end
    
    subgraph Brain [Mastra AI Orchestration]
        Mastra[Mastra Framework]
        Tools[Agent Tools]
        Mastra --- Tools
    end
    
    API <-->|Prompt/Response| Mastra
    
    Tools -->|Live Web Search| SerpApi["🌐 SerpApi"]
    Tools -->|Chat Memory| Backboard["🧠 Backboard"]
    
    Mastra <-->|Open-Weights LLM| Gemma["🤖 Gemma 4"]
    
    API <-->|Text-to-Speech| ElevenLabs["🗣️ ElevenLabs"]
    API <-->|Auth & Gamification| Mongo[("🍃 MongoDB Atlas")]
    API <-->|Tech Readiness Prediction| TabPFN["📊 TabPFN"]
    
    Render -->|Error & Agent Tracing| Sentry["👁️ Sentry"]

📖 Overview

DigiPico was built for the Hacktoberfest Weekend Challenge: Build for a Friend.

The goal? To help a non-technical friend fall in love with technology. Traditional tutorials feel like reading a dry textbook, and code editors are cold and unforgiving. DigiPico solves this by disguising tech education as a welcoming, interactive…

View on GitHub

How I Built It

DigiPico is a Next.js monolithic full-stack application built around a powerful, open-source AI agent system. Here is exactly how every piece of the stack came together:

Capacitor: Because my friend is most comfortable on her phone, I designed the app for mobile screens first. The codebase is fully integrated with Capacitor, allowing this exact web codebase to be seamlessly bundled as a native iOS and Android application.
Mastra Framework & Gemma 4: I used the open-source Mastra agent framework as the central orchestration layer. Mastra connects directly to a Google Gemma 4 (26B) open-weights model. Gemma 4 was explicitly prompted to maintain Pico's warm, non-judgmental persona. Mastra allows Gemma 4 to seamlessly call custom background tools to generate strictly formatted JSON learning curriculums, dynamic quizzes, and customized JavaScript coding sandboxes on the fly.
Backboard: For an AI companion to feel like a real friend, it needs context. I used Backboard to effortlessly persist the agent's memory and chat threads. This ensures Pico always remembers my friend's previous questions and progress.
MongoDB Atlas: Serves as the robust primary database handling user authentication and gamification states like tracking her XP, daily streaks, and unlocked achievements. It also powers the app's seamless user experience by caching asynchronously generated AI curriculums and coding challenges in the background, ensuring near-instant load times when she navigates the app.
SerpApi: Integrated as a custom Mastra tool, allowing Pico to actively search the live web for the latest beginner-friendly tech news and active hackathons to share with her in the chat.
TabPFN: I integrated TabPFN to run tabular machine learning predictions on her progress. It analyzes her accumulated XP, login streak, and quiz scores to predict a "Tech Readiness Score" subtly adjusting the difficulty of her curriculum.
ElevenLabs: Text on a screen can still feel a bit clinical. I integrated ElevenLabs' Text-to-Speech API to give Pico an adorable, expressive voice in the chat interface.
Sentry: Nothing frustrates a beginner more than unexplained bugs. Sentry is implemented for full-stack error tracking and agent tracing to catch any UI crashes or AI generation errors.
Render: The entire monolithic Next.js application is deployed seamlessly as a single Web Service on Render, configured entirely via a declarative render.yaml blueprint.
GitHub Copilot: I heavily utilized GitHub Copilot as my AI pair programming partner. Copilot dramatically accelerated my development speed over the weekend by scaffolding the complex Tailwind UI components and predicting boilerplate API route structures for the monolithic backend.

Why Does Open Innovation Matter?

Open innovation was the absolute core of why this project worked. Using an open-weights model like Gemma 4 gave me complete control over how the agent behaved. Closed APIs often have strict, unpredictable safety guardrails that aggressively block attempts to generate raw, executable code snippets, or they forcefully inject corporate, formal tones into the chat. By using an open model like Gemma, I had the freedom to completely override its standard behavior to act exclusively as a playful, empathetic penguin without interference.

Additionally, building on the open-source Mastra agent framework let me seamlessly orchestrate different tools on my own terms. Instead of being locked into a single walled ecosystem, I had the absolute freedom to wire up SerpApi for live tech news and Backboard for memory exactly how I wanted. Open-source gave me the power to change how the agent behaves at a foundational level something a rigid, closed ecosystem would never allow.

Prize Categories

I am proudly entering the following partner categories:

Best Use of Render
Best Use of TabPFN
Best Use of Gemma
Best Use of Backboard
Best Use of ElevenLabs
Best Use of Mastra
Best Use of MongoDB Atlas
Best Use of Sentry Agent Tracing
Best Use of SerpApi
Best Use of GitHub Copilot

First Post For Hacktoberfest

Slevin Cordeiro — Thu, 01 Oct 2026 17:54:28 +0000

its a test post, also for connecting DEV account to Hacktoberfest profile

DEV Community: Slevin Cordeiro