DEV Community: Capin Judicael Akpado

ScopeGuard : Stop scope creep before it costs you

Capin Judicael Akpado — Mon, 26 Oct 2026 06:48:44 +0000

This is a submission for the Hacktoberfest Open-Source AI Challenge Week 3: Slow and Steady

What I Built

ScopeGuard - Scope & Creep Defense

Scope creep is one of the most frustrating problems in client projects. A simple website project can gradually turn into an entirely different product through extra requests buried in emails, chats, and meeting notes.

ScopeGuard helps developers, freelancers, agencies, and project managers turn messy client conversations into clear, actionable project scope information.

It analyzes conversations to identify:

Project scope: What was originally agreed upon.

Decisions and action items: What needs to happen next.

Out-of-scope requests: New requirements that may exceed the original agreement.

Scope risks: Potential misunderstandings before they become costly disputes.

It also aims to help teams prepare evidence-based, diplomatic responses when a client requests additional work.

The goal is simple: spend less time manually reviewing conversations, reduce misunderstandings, and protect time that would otherwise disappear into unpaid work.

Demo

Try ScopeGuard here:

https://sope-guard.netlify.app/

Open the Conversation Analyzer and test it with a client email containing both original project requirements and additional feature requests.

Code

Explore the source code on GitHub:

https://github.com/Judakp/scopeguards

ScopeGuard is built as a web application, with a React and TypeScript frontend and an AI analysis service powered by a Supabase Edge Function.

How I Built It

I built ScopeGuard around Gemma, an open-weight AI model, accessed through OpenRouter.

The application uses a React and TypeScript interface to let users analyze client conversations in the context of a project. The analysis request is sent to a Supabase Edge Function, which handles the connection to the AI provider without exposing the OpenRouter secret key in the frontend.

The intended workflow is:

Select a project and provide a client conversation.

Send the conversation for AI-powered analysis.

Extract structured information about scope, decisions, and potential scope changes.

Review the findings and use them to make better-informed project decisions.

I also built the application to demonstrate the experience with realistic project scenarios, including a website redesign where a client requests features that were not included in the initial agreement.

One of the key challenges was connecting the deployed frontend to the AI service correctly. Since the application is hosted on Netlify, I routed the analysis requests directly to the Supabase Edge Function rather than relying on an Express endpoint that Netlify does not automatically run as a persistent server.

Why Does Open Innovation Matter?

ScopeGuard is built around the idea that useful AI tools should not depend entirely on a single closed AI provider.

Open-weight models such as Gemma give developers more flexibility in how they build, deploy, evaluate, and integrate AI-powered applications. They make it possible to experiment with different inference providers and deployment strategies while keeping the product's architecture under the developer's control.

For ScopeGuard, that flexibility matters because project conversations can contain sensitive business information. Having greater control over the model and inference architecture creates opportunities to explore deployment options that better fit different privacy, cost, and infrastructure requirements.

Open innovation also lowers the barrier for independent developers to build practical AI products. I was able to focus on a specific business problem and integrate an open-weight model into a working application without building a language model from scratch.

The bigger vision is to make AI useful not just for generating content, but for helping people protect their time, make better decisions, and run their businesses more effectively.

The Lazy Payoff

ScopeGuard is designed to reduce the manual work involved in reviewing long client conversations, reconstructing the original agreement, and identifying requests that may expand a project's scope.

Instead of rereading an entire email thread and manually separating agreed requirements from new demands, a project professional can use the analyzer to obtain a structured starting point for review.

The time savings have not yet been formally measured. The value I am targeting is fewer overlooked requirements, faster scope reviews, and less time spent resolving misunderstandings after they become problems.

Prize Categories

Best Use of Gemma

Are web fonts ruining your lighthouse score?

Capin Judicael Akpado — Mon, 12 Oct 2026 12:37:08 +0000

Web fonts can make a site look sleek, but they often come with a hidden performance cost. If your page layout jumps while loading or your main heading takes seconds to appear, your custom typography strategy might be the culprit.

Slow-loading fonts directly impact two key Core Web Vitals :

LCP (Largest Contentful Paint): When render-blocking fonts delay text rendering.
CLS (Cumulative Layout Shift): When unstyled fallback fonts suddenly swap into custom fonts, causing layout shifts.

FOUT vs FOIT: A design & UX trade-off

Handling web fonts often comes down to choosing between two rendering behaviors :

FOIT (Flash of invisible text) : The browser hides the text until the custom font loads. It maintains brand consistency and prevents layout jumps, but risks leaving users staring at blank spaces on slow networks.

FOUT (Flash of Unstyled Text) : The browser shows a system fallback font immediately and swaps it once the custom font is ready. It prioritizes instant readability, but can cause layout shifts.

The strategic choice with font-display

You can control this behavior in CSS using the font-display property depending on your priorities :

css CSS @font-face { font-family: 'CustomFont'; src: url('/fonts/custom-font.woff2') format('woff2'); /* Use 'swap' for instant readability (FOUT), or 'block' to preserve visual identity first (FOIT) */ font-display: swap; }
`

**1. font-display: swap (FOUT): Best for performance and readability. Text appears instantly using a fallback font.

font-display: block (FOIT): Best for strict design integrity. Briefly hides text (up to 3s) to prevent a sudden font swap.
font-display: optional: A balanced approach that lets the browser skip the custom font if the connection is too slow, avoiding layout shifts entirely.**

I wrote a complete step-by-step guide covering all these optimization techniques on my blog:

👉 Read the full guide to web font optimization here

BugSnippet-vault : GitHub Copilot CLI Challenge

Capin Judicael Akpado — Wed, 11 Feb 2026 03:25:17 +0000

This is a submission for the GitHub Copilot CLI Challenge

What I Built

Overview of BugSnippet-Vault

BugSnippet-Vault is a high-performance, minimalist dashboard designed to centralize and track technical debt. Built with a black and white aesthetic, it serves as a secure digital ledger where developers can report bugs, link them directly to GitHub source code, and monitor their progress through real-time analytics.

Key features include :

Dynamic Dashboard: Visual statistics that calculate resolution rates and bug frequency.
Interactive Bug Cards: Each entry features status toggling (Open/Closed), direct GitHub URL referencing, and a deletion system.
Wisdom System: Every bug card displays "Cryptic Wisdom" phrases in the footer. These are randomly generated mottos like "Errors are lessons in disguise", reminding the developer that every fix is a step toward mastery.
Persistent Storage: Using local storage to ensure that your vault remains intact across sessions.

What it means to me, this application is more than just a bug tracker; it is a philosophy of growth. In the fast-paced environment of a hackathon, we often see bugs as failures or obstacles. I created the "Vault" to flip that narrative.

The inclusion of wisdom phrases and the "Cryptic" footer reflects my belief that debugging is a form of digital alchemy—transforming the "noise" of an error into the "gold" of knowledge. This project represents my journey into building clean, functional, and resilient interfaces where every error becomes an opportunity to build a stronger vault of wisdom.

Demo

Demo

Deployment link : https://idyllic-cobbler-27d563.netlify.app/

Github link : https://github.com/Judakp/Bugsnippet-vault.git

My Experience with GitHub Copilot CLI

How I used GitHub Copilot CLI and its impact on my development experience

Throughout the creation of the Bug & Snippet Vault, GitHub Copilot CLI was my primary architectural partner. I integrated it directly into my workflow, alternating between VS Code for core logic and PowerShell for rapid iteration and system commands. This hybrid environment allowed me to leverage the CLI’s power to debug, refactor, and refine the application in real-time.

One of the most significant impacts of the CLI was its assistance in design refactoring. Initially, the project used auto-generated Tailwind CSS, which felt too bloated for the minimalist "Vault" aesthetic I envisioned. Using the CLI, I systematically converted the generated Tailwind utility classes into pure, custom CSS equivalents. Copilot helped me map complex utility chains to clean, maintainable CSS rules, allowing me to achieve a bespoke monochrome look while keeping the codebase lightweight and readable.

What is the impact of Github Copilot CLI ?

The impact on my development experience was profound :

Efficiency in PowerShell: I used gh copilot suggest to handle state management logic and complex SVG attribute fixes (like the NaN errors in my dashboard) directly from the terminal.
Bridge between Code and Command Line: Working across VS Code and PowerShell, I could ask for shell-specific solutions or code snippets without leaving my flow, which significantly accelerated the implementation of features like the GitHub link integration and status toggling.
Learning Curve: It acted as a mentor, guiding me through the implementation of React hooks while ensuring my manual CSS was as optimized as the original framework-driven code. Ultimately, GitHub Copilot CLI turned the daunting task of manual CSS conversion and state debugging into a structured, educational, and highly productive experience.

Beyond Customer Bots: Building an Internal AI Coach for HR 🚀

Capin Judicael Akpado — Thu, 08 Jan 2026 19:55:36 +0000

Most people focus on AI for customer service, but the real productivity killer is internal: bottlenecks in knowledge sharing.

I built a web app model to solve this. Instead of constantly interrupting managers, employees can now get instant, context-aware guidance from an AI agent.

The Project: "Good Pasta" Coach 🧑‍⚖️
It's an AI-driven internal support system designed for a fictional premium pasta company.

Key Tech Features:

🌍 Multilingual: Currently supports English & French.
🏢 Department-Specific: Tailored logic for logistics, production, or management.

🛠️ Fully Customizable: Can be fed with any company’s specific SOPs and data.

Why it matters:

Conversational AI is useless if your internal team is struggling to find information. This tool bridges the gap between company policy and daily execution.

🔗 Try the Demo here: https://lighthearted-madeleine-7ef1dc.netlify.app/

I'd love to hear your thoughts! How are you implementing AI for internal workflows?

🎯 Looking for a custom AI solution for your business? Let's connect!

🎄 3 tips to wrap up your projects before the holidays

Capin Judicael Akpado — Sun, 30 Nov 2025 18:32:24 +0000

La version française de cette publication est ci-dessous 🇨🇵

The end of the year often feels like a sprint to “finish everything before the holidays.”

It’s also the time when the smallest oversight can turn into an unexpected bug right when everyone is offline.

Here are 3 simple tips to secure your projects ahead of the break and start 2025 with peace of mind.

🔐 1. Security

Scan for vulnerabilities (Dependabot, Snyk, etc.).

Review active API keys and remove unnecessary permissions.

Double-check access rights from former team members.

💰 2. Cost Optimization

Disable unused cloud resources.

Set up spending budgets and consumption alerts.

Monitor pay-as-you-go services closely.

Anticipate holiday traffic spikes and prepare accordingly.

📚 3. Documentation & Handoff

Write a short “project status” summary.

List all essential links and resources.

Document key dependencies.

Define simple emergency procedures in case something unexpected happens.

🎄 3 astuces pour bien clôturer ses projets avant les fêtes

La fin d’année, c’est souvent un sprint pour “tout finir avant les fêtes”.

Mais c’est aussi la période où la moindre négligence peut générer un bug inattendu pendant que tout le monde est loin du clavier.

Voici 3 astuces simples pour sécuriser vos projets avant la trêve et commencer 2025 sereinement.

🔐 1. Sécurité

Scanner les vulnérabilités (Dependabot, Snyk…).

Vérifier les clés API actives et les permissions inutiles.

Contrôler les accès des anciens membres.

💰 2. Optimisation des coûts

Désactiver les ressources cloud inutiles.

Paramétrer des budgets et alertes de consommation.

Surveiller les services facturés à l’usage.

Anticiper les pics de trafic.

📚 3. Documentation & Handoff

Rédiger un mini “état du projet”.

Lister les liens essentiels.

Documenter les dépendances clés.

Décrire et prévoir des procédures d’urgence en cas d’imprévu.

Web Accessibility: A business imperative, not just a technical detail

Capin Judicael Akpado — Sun, 17 Aug 2025 17:40:04 +0000

Web Accessibility: A business imperative, not just a technical detail

Accessibility isn’t a nice-to-have. It’s a strategic driver of performance, reputation, and impact.

Yet too many websites still exclude millions of users, people with disabilities, older adults, and those with limited devices or slow connections.

Every exclusion comes at a cost: lost SEO, weakened brand trust, missed opportunities.

An accessible site works for everyone. It’s intuitive, inclusive, and future-ready.

More than just compliance, it’s a bold statement: your company values equity, innovation, and digital excellence.

Let’s stop treating accessibility as a checkbox and start seeing it as a competitive edge.

ChatGPT 5: Revolution or Threat for Web Developers ?

Capin Judicael Akpado — Sun, 10 Aug 2025 13:18:51 +0000

The release of ChatGPT 5 marks a major leap in web development automation. Code generation, debugging, wireframing, AI seems to do it all. But behind the hype lie serious challenges for developers.

The first: staying relevant. Technical skills alone aren’t enough anymore. Developers must now master the synergy between human creativity and AI efficiency, sharpen their product thinking, and design experiences that stand out.

Then comes the pressure on jobs. Repetitive tasks are being automated, pushing developers to shift toward more creative, strategic roles.

ChatGPT 5 isn’t a rival, it’s a catalyst. It’s reshaping our craft, forcing us to evolve, learn faster, and think bigger. The future of the web is being built with AI but never without us.

Thinking SEO from the Mockup Stage: An Underestimated Power Move

Capin Judicael Akpado — Fri, 01 Aug 2025 13:04:00 +0000

Designing a website isn’t just about esthetics, it’s a strategic act. Incorporation SEO at the mockup phase unlocks powerful advantages that many overlook.

When layout, hierarchy, and content zones are mapped with search visibility in mind, the result is a site that’s both beautiful and discoverable.

Starting early means crafting headings that signal intent, placing CTAs where crawlers, users linger, and building structures that load fast and rank higher.

SEO-friendly mockups cut retrofitting costs and align designers, developers, and marketers from day one.

Be proactive. A mockup that “thinks SEO” sets the tone for long-term growth, visibility, and user satisfaction.

Application web : dématérialiser, c’est construire un cerveau digital

Capin Judicael Akpado — Mon, 28 Jul 2025 13:45:14 +0000

Dématérialiser un processus interne (exemple : validation de congés, suivi client, facturation) revient à modéliser la logique métier dans un outil fluide, centralisé et intelligent.

Plutôt que d’imposer aux humains les caprices d’outils génériques, on conçoit une application qui pense comme votre entreprise :

Avec vos priorités
Votre vocabulaire
Vos rituels d’équipe

🚀 Pourquoi c’est stratégique ?

Gain de temps : moins de friction, plus de concentration sur l’essentiel
Clarté des rôles : chaque collaborateur sait où agir et comment suivre
Traçabilité & transparence : idéal pour les audits, les décisions rapides
Image interne forte : vos équipes sentent que l’outil est pensé pour elles.

ChezElle Intranet : Frontend Challenge Office Edition

Capin Judicael Akpado — Sun, 27 Jul 2025 05:49:38 +0000

This is a submission for Frontend Challenge: Office Edition sponsored by Axero, Holistic Webdev: Office Space

What I Built

I built a dynamic and engaging intranet homepage using only HTML, CSS, and JavaScript. The interface includes a personalized welcome message that greets users based on the time of day and their name, stored locally for a consistent experience across visits. It also features a floating virtual assistant icon that opens a helpful panel with quick-access internal resources. This design provides a user-friendly, modern look while remaining lightweight and accessible without a backend. It contains again news sections, archives highlights and other thing.

Demo

Link of deployment : https://frabjous-twilight-eeed40.netlify.app/

Github link with MIT License : https://github.com/Judakp/FrontendChallenge-Axero.git

Journey

I started by designing a clean layout, prioritizing user engagement and usability. The first component I implemented was the dynamic welcome message, using JavaScript to greet users according to the current hour and storing their name via localStorage. This makes the experience feel personal and consistent.

Next, I added a virtual assistant bubble that stays fixed at the bottom corner. When clicked, it reveals a compact panel with helpful internal links like accessing documents, contacting HR, or checking the schedule. I used smooth hover effects and light shadows to make the interface visually appealing and intuitive. I finally created news sections , archives highlights and other thing.

Centralized Data Is No Longer a Luxury, It’s a Performance Driver

Capin Judicael Akpado — Thu, 24 Jul 2025 15:06:04 +0000

Thanks to modern web development, data centralization is no longer abstract. It's sophisticated and actionable.

A well-crafted dashboard, powered by robust APIs, can bring together CRM, e-commerce, analytics, and more, into one seamless, scalable interface.

Say goodbye to the endless back-and-forth between Excel and Drive. The web offers real-time synchronization, accessible from any device.

Centralization is also protection.

Security-first web infrastructure reduces data leaks and strengthens compliance (GDPR, etc.).

From a UX perspective, it spares teams the frustration of fragmented and inconsistent systems.

What’s your take?

PayGenius HR : Payslip Generator, built with Google AI Studio

Capin Judicael Akpado — Sun, 20 Jul 2025 03:40:36 +0000

This post is my submission for DEV Education Track: Build Apps with Google AI Studio.

What I Built

I create an HR web application that generates, processes, and manages all employee payslips within a company. This web application can generate specific payslip for Canada or USA models payslips.

Demo

Deployment links : https://fabulous-dieffenbachia-627f92.netlify.app/

My Experience

I ask Google AI Studio to create HR Payslip Generator. I specified this : " I would like the differences between Canadian and U.S. payroll rules to be included as optional features, so that users can choose and apply the appropriate rules based on their country. I want download payslip in PDF. Don’t use tailwind CSS for style. Use only, directly CSS language for style. Don’t use react for building.
Objective :
Enable the company to automatically create monthly payslips based on entered or imported data, generate them in PDF format, send them to employees, and maintain an archive/history.
Here are the modules I want :
• Employee management (personal data, contract, gross salary)
• Absence, leave, and overtime tracking
• Automatic payroll calculation (net salary including bonuses and deductions)
• Payslip generation in PDF format
• HR dashboard (payroll tracking, anomaly alerts)
• Employee portal to access and download their own payslips
• Secure access control based on user roles (employee, HR, admin)
". Google AI Studio generates all files and folders and built the web application. I downloaded the ZIP file and opened it locally to install the necessary dependencies for deployment on Netlify. Then, I pushed everything to GitHub via the VS Code terminal and deployed the web application on Netlify.