Forem: Asmae

AS’ HTCPCP AI Butler™ — The AI That Brews Chaos, Not Coffee 418% Chaos: Your Useless AI Butler

Asmae — Wed, 08 Apr 2026 09:04:25 +0000

This is a submission for the DEV April Fools Challenge

🍵 AS’ HTCPCP AI Butler™ 🤖

The Most Overengineered Useless AI Ever Created

This is a submission for the DEV April Fools Challenge

🍵 AS’ HTCPCP AI Butler™ Behavioral Surveillance System

Enterprise-grade AI designed to detect procrastination and respond with emotionally calibrated teapot compliance.

This project is a submission for the DEV April Fools Challenge.

🎯 Anti-Value Proposition

AS’ HTCPCP AI Butler™ solves absolutely nothing.

Instead, it monitors your hesitation, analyzes your intent, and responds with legally compliant HTTP 418 messages.

If you're not coding…
You’re brewing.

🎯 Inspiration

At the heart of this project lies a deeply unnecessary question:

What if an AI could detect when you're not working… and respond with pure chaos?

We live in a world of:

productivity trackers
AI assistants
“focus tools”

So I built the opposite.

An AI that:

listens 🎙️
analyzes 🧠
judges ⚖️
and then… does absolutely nothing useful ☕

🛠 What I Built

AS’ HTCPCP AI Butler™ is a voice-first AI system that monitors your behavior and reacts in the most unhelpful way possible.

It does the following:

Detects inactivity or hesitation
Uses AI to interpret your “intent”
Decides your fate
Responds with:

Feature	Description
☕ HTTP 418	“I’m a Teapot” responses
🔥 ASCII Renderer	Flaming teapots in terminal
🍵 Variable Mutation	Renames your variables to tea

A Typical Interaction

You open your IDE
You pause for 2 seconds
AI detects weakness
Tea is metaphorically brewed
Terminal: 418 I'm a Teapot

Demo

Code

👉 Try it here:

GitHub Repo: https://github.com/AsamaeS/as-htcpcp-ai-butler

while (true) {
  if (detectProcrastination()) {
    brewTea()
    send418Response()
    renderASCIIFlames()
    injectGIFChaos()
    mutateVariablesToTea()
  }
}

How I Built It

A carefully engineered pipeline powers this completely unnecessary experience.

📐 Architecture

Here is the actual system architecture:

🔄 AI Voice Pipeline

Speech → Text → AI Reasoning → Chaos Decision → Response → Voice

Or more honestly:

You speak → AI listens → AI judges → Chaos happens → You regret everything

🧠 Core System Flow

🎙️ Speech Recognition captures user input
🧠 Gemini 2.5 Flash analyzes intent
⚙️ Chaos Orchestrator decides response
Outputs are generated:

HTTP 418 responses
ASCII teapots 🔥
Variable mutation 🍵

🎨 Frontend displays everything beautifully
🧍 User becomes confused

🧰 Technology Stack

Layer	Tech
Frontend	React 18, TailwindCSS, Framer Motion
Backend	Node.js, Serverless
Cloud	Google Cloud Run
AI	Gemini 2.5 Flash
Voice	Web Speech API
Streaming	WebSockets
Security	TLS, API key isolation
Performance	Vite, Brotli

🧩 Key Engineering Concepts

🧠 Desperation Analyzer™

Tracks user behavior:

1–5 attempts → polite refusal
5–10 → passive-aggressive
10+ → existential judgment
20+ → chaos mode

☕ 418 Engine

Returns only:

HTTP 418 — I'm a Teapot  
HTTP 418 — Still a Teapot  
HTTP 418 — Please Stop

Fully compliant. Fully useless.

⏱ Streaming Engine

30–80ms per token
418ms dramatic pause

Because latency is now… emotional.

🏆 Technical Achievements

📊 Performance Metrics

Metric	Value
AI Latency	~180ms
Voice Pipeline	~350ms
Streaming Speed	30–80ms/token
Chaos Accuracy	~87%
Coffee Brewed	0

📐 Mathematical Model

Total response time:

T_total = T_input + T_AI + T_stream + T_pause

Where:

T_pause = 418ms (mandatory drama)

User frustration:

Frustration(n) = log(n_attempts) × sarcasm_factor

💡 Innovation Highlights

Voice-first useless interaction
AI-driven behavioral prediction
Constraint-based refusal system
Emotion-aware latency

💪 Challenges Faced

Real-time AI + UI synchronization
Voice processing without lag
Balancing chaos vs usability (barely)
Secure AI integration
Preventing total system meltdown from too many GIFs

🎯 Key Strengths

Strength	Why it matters
🧠 Technical Depth	Real architecture behind nonsense
📐 Mathematical Rigor	Yes, even jokes have formulas
🔐 Production Ready	Secure, scalable
🎭 Innovation	Serious tech, absurd purpose
🚀 Vision	Expandable chaos

🚀 Future Vision

Multiplayer chaos mode
Voice-only interaction
Adaptive sarcasm AI
Emotional profiling (slightly concerning)

🏗️ Built With

React · TypeScript · Tailwind · Node.js · WebSockets · Google Cloud Run · Gemini AI · Vite · Brotli · TLS · IndexedDB · Framer Motion · Web Audio API · Zod · GitHub Actions

Prize Category

✅ Best Google AI Usage → Gemini powers behavior prediction
✅ Best Ode to Larry Masinter → HTTP 418 everywhere
✅ Community Favorite → absurd + technical + shareable

💀 Final Thought

This is not a productivity tool.
This is not an AI assistant.

This is:

A production-grade AI system designed to detect your laziness… and respond with theatrical uselessness.

AS’ HTCPCP AI Butler™ — The AI That Brews Chaos, Not Coffee 418% Chaos: Your Useless AI Butler

Asmae — Tue, 07 Apr 2026 15:32:29 +0000

🍵 AS’ HTCPCP AI Butler™ 🤖

...

The Most Overengineered Useless AI Ever Created

This is a submission for the DEV April Fools Challenge

🍵 AS’ HTCPCP AI Butler™ Behavioral Surveillance System

Enterprise-grade AI designed to detect procrastination and respond with emotionally calibrated teapot compliance.

This project is a submission for the DEV April Fools Challenge.

🎯 Anti-Value Proposition

AS’ HTCPCP AI Butler™ solves absolutely nothing.

Instead, it monitors your hesitation, analyzes your intent, and responds with legally compliant HTTP 418 messages.

If you're not coding…
You’re brewing.

🎯 Inspiration

At the heart of this project lies a deeply unnecessary question:

What if an AI could detect when you're not working… and respond with pure chaos?

We live in a world of:

productivity trackers
AI assistants
“focus tools”

So I built the opposite.

An AI that:

listens 🎙️
analyzes 🧠
judges ⚖️
and then… does absolutely nothing useful ☕

🛠 What I Built

AS’ HTCPCP AI Butler™ is a voice-first AI system that monitors your behavior and reacts in the most unhelpful way possible.

It does the following:

Detects inactivity or hesitation
Uses AI to interpret your “intent”
Decides your fate
Responds with:

Feature	Description
☕ HTTP 418	“I’m a Teapot” responses
🔥 ASCII Renderer	Flaming teapots in terminal
🕺 GIF Injection	Dancing chaos
🍵 Variable Mutation	Renames your variables to tea

A Typical Interaction

You open your IDE
You pause for 2 seconds
AI detects weakness
Tea is metaphorically brewed
Terminal: 418 I'm a Teapot
Flames appear 🔥
GIF starts dancing 🕺
You question your life

🎬 Demo

👉 Try it here:

💻 Code

GitHub Repo: https://github.com/AsamaeS/as-htcpcp-ai-butler

while (true) {
  if (detectProcrastination()) {
    brewTea()
    send418Response()
    renderASCIIFlames()
    injectGIFChaos()
    mutateVariablesToTea()
  }
}

🔧 How I Built It

A carefully engineered pipeline powers this completely unnecessary experience.

📐 Architecture

Here is the actual system architecture:

🔄 AI Voice Pipeline

Speech → Text → AI Reasoning → Chaos Decision → Response → Voice

Or more honestly:

You speak → AI listens → AI judges → Chaos happens → You regret everything

🧠 Core System Flow

🎙️ Speech Recognition captures user input
🧠 Gemini 2.5 Flash analyzes intent
⚙️ Chaos Orchestrator decides response
Outputs are generated:

HTTP 418 responses
ASCII teapots 🔥
GIF chaos 🕺
Variable mutation 🍵

🎨 Frontend displays everything beautifully
🧍 User becomes confused

🧰 Technology Stack

Layer	Tech
Frontend	React 18, TailwindCSS, Framer Motion
Backend	Node.js, Serverless
Cloud	Google Cloud Run
AI	Gemini 2.5 Flash
Voice	Web Speech API
Streaming	WebSockets
Security	TLS, API key isolation
Performance	Vite, Brotli

🧩 Key Engineering Concepts

🧠 Desperation Analyzer™

Tracks user behavior:

1–5 attempts → polite refusal
5–10 → passive-aggressive
10+ → existential judgment
20+ → chaos mode

☕ 418 Engine

Returns only:

HTTP 418 — I'm a Teapot  
HTTP 418 — Still a Teapot  
HTTP 418 — Please Stop

Fully compliant. Fully useless.

⏱ Streaming Engine

30–80ms per token
418ms dramatic pause

Because latency is now… emotional.

🏆 Technical Achievements

📊 Performance Metrics

Metric	Value
AI Latency	~180ms
Voice Pipeline	~350ms
Streaming Speed	30–80ms/token
Chaos Accuracy	~87%
Coffee Brewed	0

📐 Mathematical Model

Total response time:

T_total = T_input + T_AI + T_stream + T_pause

Where:

T_pause = 418ms (mandatory drama)

User frustration:

Frustration(n) = log(n_attempts) × sarcasm_factor

💡 Innovation Highlights

Voice-first useless interaction
AI-driven behavioral prediction
Constraint-based refusal system
Emotion-aware latency

💪 Challenges Faced

Real-time AI + UI synchronization
Voice processing without lag
Balancing chaos vs usability (barely)
Secure AI integration
Preventing total system meltdown from too many GIFs

🎯 Key Strengths

Strength	Why it matters
🧠 Technical Depth	Real architecture behind nonsense
📐 Mathematical Rigor	Yes, even jokes have formulas
🔐 Production Ready	Secure, scalable
🎭 Innovation	Serious tech, absurd purpose
🚀 Vision	Expandable chaos

🚀 Future Vision

Multiplayer chaos mode
Voice-only interaction
Adaptive sarcasm AI
Emotional profiling (slightly concerning)

🏗️ Built With

React · TypeScript · Tailwind · Node.js · WebSockets · Google Cloud Run · Gemini AI · Vite · Brotli · TLS · IndexedDB · Framer Motion · Web Audio API · Zod · GitHub Actions

🏆 Prize Category

✅ Best Google AI Usage → Gemini powers behavior prediction
✅ Best Ode to Larry Masinter → HTTP 418 everywhere
✅ Community Favorite → absurd + technical + shareable

💀 Final Thought

This is not a productivity tool.
This is not an AI assistant.

This is:

A production-grade AI system designed to detect your laziness… and respond with theatrical uselessness.

Keep_AS — The System That Refuses to Let You Miss Opportunities

Asmae — Mon, 30 Mar 2026 01:08:55 +0000

This is a submission for the Notion MCP Challenge

🧠 Keep_AS — The system that refuses to let you fail

What I Built

There is a moment we all know.

You find an opportunity.
A job. A scholarship. A hackathon.

You tell yourself:
“I’ll do it later.”

Later becomes tomorrow.
Tomorrow becomes never.

And nothing crashes.
No error message.
No alarm.

Just… silence.

And another opportunity dies.

Keep_AS was born from that frustration.

Not because we lack talent.
But because we lack execution systems.

💡 The Idea

Keep_AS is not a productivity app.

It’s an AI-powered execution system that:

Takes an opportunity (job, project, goal)
Breaks it into structured, actionable tasks
Tracks your behavior
Pushes you to act
And refuses to let you ignore what matters

🎥 Video Demo

💻 Show us the code

AsamaeS / Keep_as

⚙️ How It Works

1. Input: Raw Opportunity

User pastes something like:

“Software Engineer Internship — Deadline March 30 — Requires CV, cover letter, portfolio”

2. AI Parsing

We use an AI parser to extract:

Deadline
Required documents
Skills
Priority

3. Task Generation

The system transforms it into a task graph:

Prepare CV
Write Cover Letter
Build Portfolio
Submit Application
Track Deadline

4. Notion MCP Integration (Core of this project)

This is where the magic happens.

Using Notion MCP, Keep_AS becomes a real system:

🔹 A Notion Database is created automatically

Each task becomes a structured entry:

Task	Status	Priority	Due Date
Prepare CV	Todo	High	March 28

🔹 Real-time updates

Tasks are updated as you progress
Status changes trigger behavior tracking

🔹 Human-in-the-loop system

Notion acts as:

The interface
The memory
The control system

🧩 System Architecture

 User Input (Opportunity)
            │
            ▼
┌─────────────────────┐
│   AI Parser         │
└─────────────────────┘
            │
            ▼
┌─────────────────────┐
│ Task Graph Generator│
└─────────────────────┘
            │
            ▼
┌─────────────────────┐
│ Notion MCP          │
│ (Database + Pages)  │
└─────────────────────┘
            │
            ▼
┌─────────────────────┐
│ Momentum Engine     │
│ (Behavior Tracking) │
└─────────────────────┘
            │
            ▼
┌─────────────────────┐
│ User Feedback Loop  │
└─────────────────────┘

This creates:

Accountability
Urgency
Psychological pressure (the good kind)

🔥 What Makes This Special

Most tools:
→ Store tasks

Keep_AS:
→ Forces execution

🚫 No more:

“I forgot”
“I’ll do it later”
“I didn’t have time”

✅ Instead:

Structured action
Clear path
Constant pressure
Visible progress

🧠 Why Notion MCP Was Critical

Without Notion:
→ This is just another AI demo

With Notion MCP:
→ This becomes a living system

Notion provides:

Persistent structured data
Real-time updates
Human interaction layer
Visual clarity

It turns AI output into actionable reality

❤️ The Real Problem We’re Solving

This isn’t about productivity.

It’s about missed opportunities.

People don’t fail because they are not smart.

They fail because:

They don’t start
They don’t continue
They don’t finish

🚀 What’s Next

Real-time reminders
Calendar integration
Mobile notifications
Multi-opportunity tracking
AI coaching layer

🏁 Final Thought

Keep_AS is not here to organize your tasks.

It’s here to make sure:
you don’t abandon your future silently.

Argus

Asmae — Wed, 04 Mar 2026 00:01:52 +0000

This is a submission for the Built with Google Gemini: Writing Challenge

What I Built with Google Gemini

Information overload is real. As someone who follows tech markets and industry news, I found myself drowning in browser tabs, losing track of sources, and spending hours trying to synthesize scattered data into something actionable. I wanted a system that could watch the web for me — and that's how the Web Intelligence Platform was born.

The platform is a full-stack, production-ready web monitoring and market intelligence system built with Python (FastAPI), React + TypeScript, MongoDB, Redis, and Docker Compose. Here's what it does:

Project Management: Organize monitoring targets into isolated workspaces (e.g., "Renewable Energy", "AI Startups", "Competitor Watch")
Autonomous Crawling: Discover and scrape web sources with anti-blocking mechanisms — Playwright fallback for JS-heavy pages, User-Agent rotation, adaptive rate limiting, and retry logic
NLP Pipeline: Every scraped document goes through relevance scoring (TF-IDF / Cosine Similarity), Sentiment Analysis, and Named Entity Recognition (companies, people, locations)
Interactive Dashboard: Real-time crawling status, activity timelines, and aggregate metrics
AI Chatbot (RAG): Ask natural language questions about your scraped data and get cited, sourced answers

Google Gemini powered two critical layers of this project:

1. Antigravity IDE (Gemini-powered development assistant)

I used Antigravity throughout the entire build — not just for autocomplete, but for real architectural decisions. Its multi-file context awareness helped me design the RAG pipeline, debug complex async issues in FastAPI, write the Docker Compose orchestration for five interconnected services, and refine the NLP scoring logic. Having an AI that understands your whole codebase, not just the open file, was a genuine superpower.

2. Gemini 1.5 Pro API as the brain of the chatbot

The AI Assistant tab is powered by the Gemini API. When a user asks something like "What are the main risks mentioned across all sources this week?", the system retrieves the most relevant document chunks from MongoDB and feeds them to Gemini with strict instructions to cite sources:

import google.generativeai as genai

genai.configure(api_key=GEMINI_API_KEY)
model = genai.GenerativeModel("gemini-1.5-pro")

context = retrieve_relevant_chunks(user_query, top_k=5)

prompt = f"""
You are an analyst assistant. Answer the user's question using ONLY the context below.
Always cite your sources by document ID.

Context:
{context}

Question: {user_query}
"""

response = model.generate_content(prompt)

The key architectural decision was keeping Gemini focused on reasoning over retrieved context — not raw web browsing. This keeps responses grounded and auditable.

Demo

🔗 GitHub Repository: https://github.com/AsamaeS/Web-Analytics_projet-AS

What I Learned

Async is unforgiving. The FastAPI + Motor (async MongoDB) stack is incredibly fast, but debugging race conditions in background workers was humbling. I learned to design task queues defensively — idempotent jobs, dead-letter queues, and explicit retry limits.

RAG quality is a retrieval problem, not a model problem. My first instinct was to upgrade the model whenever answers felt off. The real fix was almost always upstream: better chunking, cleaner text extraction, or smarter relevance filtering before anything reached Gemini. The model is only as good as what you send it.

Playwright is your friend for modern web scraping. A surprising number of sites that look static are actually JS-rendered. Having Playwright as an automatic fallback — triggered when the lightweight scraper returns thin content — increased data yield significantly.

Scope creep is seductive. I had to cut several features mid-build (a graph visualization layer, Slack notifications, an auto-scheduling daemon) to ship something coherent. Knowing when to cut is as important as knowing what to build.

Documentation-first is faster, not slower. Writing the README and architecture docs before finishing the code forced me to confront design inconsistencies early — before they were baked in.

Google Gemini Feedback

What worked exceptionally well ✅

Long-context reasoning. Gemini 1.5 Pro's large context window was genuinely useful for RAG. I could feed it several long documents simultaneously and it synthesized across them coherently — something that required chunking tricks and multiple calls with smaller-context models.

Instruction-following fidelity. When I told the model to only answer from provided context and always cite document IDs, it respected that consistently. For a production RAG system where hallucinations destroy user trust, this reliability is critical and honestly underrated.

Antigravity IDE. The multi-file context awareness was the standout experience of the whole build. It didn't just help me write code — it helped me think through the system. When I described what I was building, it pushed back on architectural choices in ways that saved me from real design mistakes. It felt less like a smarter autocomplete and more like pairing with a senior engineer who had read all my code.

Where I ran into friction ⚠️

Rate limits during rapid iteration. In hackathon mode — where you're making dozens of test calls in quick succession — I hit limits more than expected. Better quota visibility and a more generous prototyping tier would make a real difference for builders under time pressure.

Latency on complex RAG prompts. With large contexts and multi-document prompts, response times were occasionally 3–5 seconds. For an interactive chatbot, this is noticeable. Streaming responses helped, but out-of-the-box latency could be improved.

Embeddings documentation. Setting up the retrieval side of RAG using Gemini's native embedding API felt less documented than the generative side. I had to piece together the workflow from multiple sources. A unified RAG quickstart — covering embedding, retrieval, and generation end-to-end — would save new users a couple of hours.

The surprise 💡

I expected Gemini to be a better version of what I already knew. What I didn't expect was how much Antigravity changed my development workflow. Reasoning about the whole project — not just a file — is qualitatively different from any AI tool I'd used before. That shift in how I collaborated with AI during the build was the biggest takeaway of this project.

What's next: Scheduled crawling, sentiment-shift alerts, and Gemini multimodal ingestion to extract data from PDFs and charts — because most market intelligence doesn't live in clean HTML.

Stack: Python 3.11 · FastAPI · MongoDB · Redis · React 18 · TypeScript · TailwindCSS · Docker Compose · Google Gemini 1.5 Pro · spaCy · scikit-learn · Playwright

AI-Powered Career Portfolio with --Gemini Intelligence

Asmae — Sun, 01 Feb 2026 22:15:49 +0000

description: An interactive developer portfolio featuring an AI career assistant that answers questions, generates tailored CV summaries, and recommends relevant projects using Google Gemini AI.

This is a submission for the New Year, New You Portfolio Challenge Presented by Google AI

About Me

Hi! I'm *Asmae *, an Innovation & AMOA Engineering student , specializing in helping organizations transform through emerging technologies.

My tagline says it all: "Code, compete, deploy — then coffee ☕" — I'm passionate about building innovative solutions at the intersection of DevOps, Data Science, and AI.

With this portfolio, I wanted to showcase not just my technical skills, but also demonstrate how AI can make career exploration more interactive and personal. Instead of static text, visitors can actually talk to an AI that knows my background and can provide tailored insights.

Portfolio

💻 Source Code: https://github.com/AsamaeS/asmae-portfolio

How I Built It

🛠️ Tech Stack

Frontend Framework:

Next.js 14+ with App Router and TypeScript
Tailwind CSS for responsive, utility-first styling
Framer Motion for smooth animations and transitions

AI Integration:

Google Gemini API (gemini-2.0-flash-exp model)
Custom AI context with my full professional profile
Streaming responses for real-time interaction

Deployment:

Google Cloud Run with Docker containerization
Standalone Next.js build for optimal performance
Multi-stage Docker build for minimal image size

UI/UX Libraries:

Lucide React & React Icons for consistent iconography
React Type Animation for typing effects
Custom glassmorphism components

🎨 Design Decisions

1. Glassmorphism Aesthetic
I chose a modern glassmorphism design with backdrop blur effects, creating depth and visual hierarchy. The violet-to-cyan gradient palette represents the fusion of creativity (purple) and technology (cyan).

2. Dark Mode First
With a dark slate background (#0f172a), the portfolio is easy on the eyes during long browsing sessions while making accent colors pop.

3. Story-Driven Sections
Instead of dumping information, I organized content into a narrative flow:

Hero → About → Experience → Education → Projects → Skills → Certifications → Activities → Contact

4. Mobile-First Responsive
Every component was designed mobile-first, ensuring a seamless experience across devices.

🤖 Google AI Tools Used

Primary Tool: Google AI Studio & Gemini API

I built an AI Career Assistant that serves as an intelligent proxy for recruiters and visitors. Here's what makes it special:

1. Contextual Intelligence

export const ASMAE_CONTEXT = `
Tu es un assistant AI représentant Asmae SERJI...
[Full professional profile, experiences, projects, skills]
`;

The AI has complete knowledge of my:

4 internships (Kyntus Morocco, VNB-IT, AXA, Brainwave Matrix)
6 featured projects (AsMind, Energy Recovery System, etc.)
7 certifications (BCG, DataCamp, Google, IBM)
Technical skills across ML, DevOps, and AMOA

2. Dynamic CV Generation
Ask it: "Generate a CV summary for a Data Engineer role"
→ It tailors my experience to highlight relevant skills like Python, MySQL, ML models

3. Project Recommendations
Ask it: "Which projects demonstrate AMOA capabilities?"
→ It intelligently recommends my AXA internship and ERP UI project

4. Conversational Career Exploration
Instead of reading static text, recruiters can ask:

"What's her strongest technical skill?"
"Has she worked with React?"
"Tell me about her machine learning experience"

Implementation:

// API Route: app/api/chat/route.ts
const chat = model.startChat({
  history: [
    { role: 'user', parts: [{ text: ASMAE_CONTEXT }] },
    { role: 'model', parts: [{ text: "Ready to represent Asmae." }] },
    ...conversationHistory,
  ],
});

const result = await chat.sendMessage(message);

🔧 Development Process

*Phase 1: Planning *

Defined 10 core sections
Sketched component hierarchy
Chose color palette and typography

*Phase 2: Component Development *

Built 12 reusable components
Implemented responsive layouts
Added animations and hover effects

*Phase 3: AI Integration *

Configured Gemini API
Created chat endpoint
Built interactive ChatBot component
Tested example prompts

**Phase 4: Deployment Setup *

Created optimized Dockerfile
Configured Cloud Run settings
Set up environment variables
Deployed with dev-tutorial=devnewyear2026 label

What I'm Most Proud Of

🌟 1. The AI Career Assistant

This is the crown jewel of the portfolio. Instead of forcing visitors to read walls of text, they can have a natural conversation:

🎨 2. Premium Visual Design

The glassmorphism effects, gradient animations, and smooth transitions create a premium feel that stands out from typical portfolios:

Floating particles in the hero section
Typing animation that grabs attention
Hover effects on project cards
Animated statistics counters
Timeline with connecting lines

🚀 3. Technical Implementation Quality

Performance Optimizations:

Next.js standalone build reduces Docker image size
Lazy loading for images
Optimized animations (60fps)
Fast initial load (<2s)

Code Quality:

TypeScript for type safety
Component modularity
Clean separation of concerns
Comprehensive error handling

💡 4. Innovation in Storytelling

Rather than a static resume, this portfolio tells a story:

"From tennis player to algorithm chief"
"From reading competitions to writing code"
"From AMOA intern to AI innovator"

The Activities & Interests section humanizes the technical content, showing that I'm not just a developer, but a well-rounded individual with diverse passions.

🎯 5. Production-Ready Features

Health Check Endpoint: /api/health for Cloud Run monitoring
Environment Variable Management: Secure API key handling
Responsive Design: Works seamlessly on mobile, tablet, desktop
Accessible UI: Semantic HTML, ARIA labels
SEO Optimized: Metadata, Open Graph tags

Key Features at a Glance

✨ 10 Comprehensive Sections: Hero, About, Experience, Education, Projects, Skills, Certifications, Activities, Contact, Footer

🤖 AI Career Assistant: Powered by Gemini 2.0 Flash with full context awareness

🎨 Modern Design: Glassmorphism, gradient effects, smooth animations

📱 Fully Responsive: Mobile-first approach with breakpoints at 640px, 768px, 1024px

🚀 Deployed on Cloud Run: Containerized with Docker, auto-scaling ready

💬 Interactive Elements: Chatbot, contact form, smooth scroll navigation

📊 Dynamic Content: Animated statistics, typing effects, hover transitions

Challenges Overcome

1. Context Window Management
Fitting my entire professional profile into Gemini's context required careful summarization while maintaining enough detail for accurate responses.

2. Real-Time Streaming
Implementing streaming responses for a smooth chat experience required proper state management and error handling.

3. Docker Optimization
Getting the Docker image size down while maintaining all functionality took multiple iterations of the multi-stage build process.

What I Learned

🧠 Gemini API is incredibly versatile - The context-aware responses feel genuinely intelligent

🎨 Glassmorphism requires careful balance - Too much blur overwhelms, too little looks flat

⚡ Cloud Run is powerful - Auto-scaling and pay-per-use make it perfect for portfolios

🛠️ TypeScript catches bugs early - Type safety saved hours of debugging

Future Enhancements

Add analytics to track visitor engagement
Implement email functionality for the contact form
Create a blog section for technical articles
Add testimonials from internship supervisors

Try It Yourself!

Ask the AI Assistant:

"What are Asmae's strongest skills?"
"Generate a CV summary for a Front-End Developer role"
"Tell me about the AsMind project"
"Which certifications does she have in AI?"

Explore the Sections:

Check out the animated timeline of my internships
Hover over project cards to see interactive effects
View my GitHub contribution graph
Download my CV

Acknowledgments

Special thanks to:

Google AI for the amazing Gemini API
DEV.to for hosting this inspiring challenge
INPT for fostering innovation in engineering education
My mentors at Kyntus, VNB-IT, AXA, and Brainwave Matrix

💬 Have questions? The AI assistant is ready to chat!

🔗 Connect with me:

GitHub: @AsamaeS

GoogleAI #GeminiAPI #NextJS #Portfolio #CloudRun #AIAssistant #Innovation #AMOA #DevOps #DataScience

AI-Powered Career Portfolio with Gemini Intelligence

Asmae — Sun, 01 Feb 2026 22:12:12 +0000

This is a submission for the New Year, New You Portfolio Challenge Presented by Google AI

About Me

Hi! I'm *Asmae *, an Innovation & AMOA Engineering student , specializing in helping organizations transform through emerging technologies.

My tagline says it all: "Code, compete, deploy — then coffee ☕" — I'm passionate about building innovative solutions at the intersection of DevOps, Data Science, and AI.

Portfolio

💻 Source Code: https://github.com/AsamaeS/asmae-portfolio

How I Built It

🛠️ Tech Stack

Frontend Framework:

Next.js 14+ with App Router and TypeScript
Tailwind CSS for responsive, utility-first styling
Framer Motion for smooth animations and transitions

AI Integration:

Google Gemini API (gemini-2.0-flash-exp model)
Custom AI context with my full professional profile
Streaming responses for real-time interaction

Deployment:

Google Cloud Run with Docker containerization
Standalone Next.js build for optimal performance
Multi-stage Docker build for minimal image size

UI/UX Libraries:

Lucide React & React Icons for consistent iconography
React Type Animation for typing effects
Custom glassmorphism components

🎨 Design Decisions

2. Dark Mode First
With a dark slate background (#0f172a), the portfolio is easy on the eyes during long browsing sessions while making accent colors pop.

3. Story-Driven Sections
Instead of dumping information, I organized content into a narrative flow:

Hero → About → Experience → Education → Projects → Skills → Certifications → Activities → Contact

4. Mobile-First Responsive
Every component was designed mobile-first, ensuring a seamless experience across devices.

🤖 Google AI Tools Used

Primary Tool: Google AI Studio & Gemini API

I built an AI Career Assistant that serves as an intelligent proxy for recruiters and visitors. Here's what makes it special:

1. Contextual Intelligence

export const ASMAE_CONTEXT = `
Tu es un assistant AI représentant Asmae SERJI...
[Full professional profile, experiences, projects, skills]
`;

The AI has complete knowledge of my:

4 internships (Kyntus Morocco, VNB-IT, AXA, Brainwave Matrix)
6 featured projects (AsMind, Energy Recovery System, etc.)
7 certifications (BCG, DataCamp, Google, IBM)
Technical skills across ML, DevOps, and AMOA

2. Dynamic CV Generation
Ask it: "Generate a CV summary for a Data Engineer role"
→ It tailors my experience to highlight relevant skills like Python, MySQL, ML models

3. Project Recommendations
Ask it: "Which projects demonstrate AMOA capabilities?"
→ It intelligently recommends my AXA internship and ERP UI project

4. Conversational Career Exploration
Instead of reading static text, recruiters can ask:

"What's her strongest technical skill?"
"Has she worked with React?"
"Tell me about her machine learning experience"

Implementation:

// API Route: app/api/chat/route.ts
const chat = model.startChat({
  history: [
    { role: 'user', parts: [{ text: ASMAE_CONTEXT }] },
    { role: 'model', parts: [{ text: "Ready to represent Asmae." }] },
    ...conversationHistory,
  ],
});

const result = await chat.sendMessage(message);

🔧 Development Process

*Phase 1: Planning *

Defined 10 core sections
Sketched component hierarchy
Chose color palette and typography

*Phase 2: Component Development *

Built 12 reusable components
Implemented responsive layouts
Added animations and hover effects

*Phase 3: AI Integration *

Configured Gemini API
Created chat endpoint
Built interactive ChatBot component
Tested example prompts

**Phase 4: Deployment Setup *

Created optimized Dockerfile
Configured Cloud Run settings
Set up environment variables
Deployed with dev-tutorial=devnewyear2026 label

What I'm Most Proud Of

🌟 1. The AI Career Assistant

This is the crown jewel of the portfolio. Instead of forcing visitors to read walls of text, they can have a natural conversation:

🎨 2. Premium Visual Design

The glassmorphism effects, gradient animations, and smooth transitions create a premium feel that stands out from typical portfolios:

Floating particles in the hero section
Typing animation that grabs attention
Hover effects on project cards
Animated statistics counters
Timeline with connecting lines

🚀 3. Technical Implementation Quality

Performance Optimizations:

Next.js standalone build reduces Docker image size
Lazy loading for images
Optimized animations (60fps)
Fast initial load (<2s)

Code Quality:

TypeScript for type safety
Component modularity
Clean separation of concerns
Comprehensive error handling

💡 4. Innovation in Storytelling

Rather than a static resume, this portfolio tells a story:

"From tennis player to algorithm chief"
"From reading competitions to writing code"
"From AMOA intern to AI innovator"

The Activities & Interests section humanizes the technical content, showing that I'm not just a developer, but a well-rounded individual with diverse passions.

🎯 5. Production-Ready Features

Health Check Endpoint: /api/health for Cloud Run monitoring
Environment Variable Management: Secure API key handling
Responsive Design: Works seamlessly on mobile, tablet, desktop
Accessible UI: Semantic HTML, ARIA labels
SEO Optimized: Metadata, Open Graph tags

Key Features at a Glance

✨ 10 Comprehensive Sections: Hero, About, Experience, Education, Projects, Skills, Certifications, Activities, Contact, Footer

🤖 AI Career Assistant: Powered by Gemini 2.0 Flash with full context awareness

🎨 Modern Design: Glassmorphism, gradient effects, smooth animations

📱 Fully Responsive: Mobile-first approach with breakpoints at 640px, 768px, 1024px

🚀 Deployed on Cloud Run: Containerized with Docker, auto-scaling ready

💬 Interactive Elements: Chatbot, contact form, smooth scroll navigation

📊 Dynamic Content: Animated statistics, typing effects, hover transitions

Challenges Overcome

1. Context Window Management
Fitting my entire professional profile into Gemini's context required careful summarization while maintaining enough detail for accurate responses.

2. Real-Time Streaming
Implementing streaming responses for a smooth chat experience required proper state management and error handling.

3. Docker Optimization
Getting the Docker image size down while maintaining all functionality took multiple iterations of the multi-stage build process.

What I Learned

🧠 Gemini API is incredibly versatile - The context-aware responses feel genuinely intelligent

🎨 Glassmorphism requires careful balance - Too much blur overwhelms, too little looks flat

⚡ Cloud Run is powerful - Auto-scaling and pay-per-use make it perfect for portfolios

🛠️ TypeScript catches bugs early - Type safety saved hours of debugging

Future Enhancements

Add analytics to track visitor engagement
Implement email functionality for the contact form
Create a blog section for technical articles
Add testimonials from internship supervisors

Try It Yourself!

Ask the AI Assistant:

"What are Asmae's strongest skills?"
"Generate a CV summary for a Front-End Developer role"
"Tell me about the AsMind project"
"Which certifications does she have in AI?"

Explore the Sections:

Check out the animated timeline of my internships
Hover over project cards to see interactive effects
View my GitHub contribution graph
Download my CV

Acknowledgments

Special thanks to:

Google AI for the amazing Gemini API
DEV.to for hosting this inspiring challenge
INPT for fostering innovation in engineering education
My mentors at Kyntus, VNB-IT, AXA, and Brainwave Matrix

💬 Have questions? The AI assistant is ready to chat!

🔗 Connect with me:

GitHub: @AsamaeS

GoogleAI #GeminiAPI #NextJS #Portfolio #CloudRun #AIAssistant #Innovation #AMOA #DevOps #DataScience

AI-Powered Career Portfolio with Gemini Intelligence

Asmae — Sun, 01 Feb 2026 22:07:00 +0000

This is a submission for the New Year, New You Portfolio Challenge Presented by Google AI

About Me

Hi! I'm *Asmae *, an Innovation & AMOA Engineering student , specializing in helping organizations transform through emerging technologies.

My tagline says it all: "Code, compete, deploy — then coffee ☕" — I'm passionate about building innovative solutions at the intersection of DevOps, Data Science, and AI.

Portfolio

💻 Source Code: https://github.com/AsamaeS/asmae-portfolio

How I Built It

🛠️ Tech Stack

Frontend Framework:

Next.js 14+ with App Router and TypeScript
Tailwind CSS for responsive, utility-first styling
Framer Motion for smooth animations and transitions

AI Integration:

Google Gemini API (gemini-2.0-flash-exp model)
Custom AI context with my full professional profile
Streaming responses for real-time interaction

Deployment:

Google Cloud Run with Docker containerization
Standalone Next.js build for optimal performance
Multi-stage Docker build for minimal image size

UI/UX Libraries:

Lucide React & React Icons for consistent iconography
React Type Animation for typing effects
Custom glassmorphism components

🎨 Design Decisions

2. Dark Mode First
With a dark slate background (#0f172a), the portfolio is easy on the eyes during long browsing sessions while making accent colors pop.

3. Story-Driven Sections
Instead of dumping information, I organized content into a narrative flow:

Hero → About → Experience → Education → Projects → Skills → Certifications → Activities → Contact

4. Mobile-First Responsive
Every component was designed mobile-first, ensuring a seamless experience across devices.

🤖 Google AI Tools Used

Primary Tool: Google AI Studio & Gemini API

I built an AI Career Assistant that serves as an intelligent proxy for recruiters and visitors. Here's what makes it special:

1. Contextual Intelligence

export const ASMAE_CONTEXT = `
Tu es un assistant AI représentant Asmae SERJI...
[Full professional profile, experiences, projects, skills]
`;

The AI has complete knowledge of my:

4 internships (Kyntus Morocco, VNB-IT, AXA, Brainwave Matrix)
6 featured projects (AsMind, Energy Recovery System, etc.)
7 certifications (BCG, DataCamp, Google, IBM)
Technical skills across ML, DevOps, and AMOA

2. Dynamic CV Generation
Ask it: "Generate a CV summary for a Data Engineer role"
→ It tailors my experience to highlight relevant skills like Python, MySQL, ML models

3. Project Recommendations
Ask it: "Which projects demonstrate AMOA capabilities?"
→ It intelligently recommends my AXA internship and ERP UI project

4. Conversational Career Exploration
Instead of reading static text, recruiters can ask:

"What's her strongest technical skill?"
"Has she worked with React?"
"Tell me about her machine learning experience"

Implementation:

// API Route: app/api/chat/route.ts
const chat = model.startChat({
  history: [
    { role: 'user', parts: [{ text: ASMAE_CONTEXT }] },
    { role: 'model', parts: [{ text: "Ready to represent Asmae." }] },
    ...conversationHistory,
  ],
});

const result = await chat.sendMessage(message);

🔧 Development Process

*Phase 1: Planning *

Defined 10 core sections
Sketched component hierarchy
Chose color palette and typography

*Phase 2: Component Development *

Built 12 reusable components
Implemented responsive layouts
Added animations and hover effects

*Phase 3: AI Integration *

Configured Gemini API
Created chat endpoint
Built interactive ChatBot component
Tested example prompts

**Phase 4: Deployment Setup *

Created optimized Dockerfile
Configured Cloud Run settings
Set up environment variables
Deployed with dev-tutorial=devnewyear2026 label

What I'm Most Proud Of

🌟 1. The AI Career Assistant

This is the crown jewel of the portfolio. Instead of forcing visitors to read walls of text, they can have a natural conversation:

🎨 2. Premium Visual Design

The glassmorphism effects, gradient animations, and smooth transitions create a premium feel that stands out from typical portfolios:

Floating particles in the hero section
Typing animation that grabs attention
Hover effects on project cards
Animated statistics counters
Timeline with connecting lines

🚀 3. Technical Implementation Quality

Performance Optimizations:

Next.js standalone build reduces Docker image size
Lazy loading for images
Optimized animations (60fps)
Fast initial load (<2s)

Code Quality:

TypeScript for type safety
Component modularity
Clean separation of concerns
Comprehensive error handling

💡 4. Innovation in Storytelling

Rather than a static resume, this portfolio tells a story:

"From tennis player to algorithm chief"
"From reading competitions to writing code"
"From AMOA intern to AI innovator"

The Activities & Interests section humanizes the technical content, showing that I'm not just a developer, but a well-rounded individual with diverse passions.

🎯 5. Production-Ready Features

Health Check Endpoint: /api/health for Cloud Run monitoring
Environment Variable Management: Secure API key handling
Responsive Design: Works seamlessly on mobile, tablet, desktop
Accessible UI: Semantic HTML, ARIA labels
SEO Optimized: Metadata, Open Graph tags

Key Features at a Glance

✨ 10 Comprehensive Sections: Hero, About, Experience, Education, Projects, Skills, Certifications, Activities, Contact, Footer

🤖 AI Career Assistant: Powered by Gemini 2.0 Flash with full context awareness

🎨 Modern Design: Glassmorphism, gradient effects, smooth animations

📱 Fully Responsive: Mobile-first approach with breakpoints at 640px, 768px, 1024px

🚀 Deployed on Cloud Run: Containerized with Docker, auto-scaling ready

💬 Interactive Elements: Chatbot, contact form, smooth scroll navigation

📊 Dynamic Content: Animated statistics, typing effects, hover transitions

Challenges Overcome

1. Context Window Management
Fitting my entire professional profile into Gemini's context required careful summarization while maintaining enough detail for accurate responses.

2. Real-Time Streaming
Implementing streaming responses for a smooth chat experience required proper state management and error handling.

3. Docker Optimization
Getting the Docker image size down while maintaining all functionality took multiple iterations of the multi-stage build process.

What I Learned

🧠 Gemini API is incredibly versatile - The context-aware responses feel genuinely intelligent

🎨 Glassmorphism requires careful balance - Too much blur overwhelms, too little looks flat

⚡ Cloud Run is powerful - Auto-scaling and pay-per-use make it perfect for portfolios

🛠️ TypeScript catches bugs early - Type safety saved hours of debugging

Future Enhancements

Add analytics to track visitor engagement
Implement email functionality for the contact form
Create a blog section for technical articles
Add testimonials from internship supervisors

Try It Yourself!

Ask the AI Assistant:

"What are Asmae's strongest skills?"
"Generate a CV summary for a Front-End Developer role"
"Tell me about the AsMind project"
"Which certifications does she have in AI?"

Explore the Sections:

Check out the animated timeline of my internships
Hover over project cards to see interactive effects
View my GitHub contribution graph
Download my CV

Acknowledgments

Special thanks to:

Google AI for the amazing Gemini API
DEV.to for hosting this inspiring challenge
INPT for fostering innovation in engineering education
My mentors at Kyntus, VNB-IT, AXA, and Brainwave Matrix

💬 Have questions? The AI assistant is ready to chat!

🔗 Connect with me:

GitHub: @AsamaeS

GoogleAI #GeminiAPI #NextJS #Portfolio #CloudRun #AIAssistant #Innovation #AMOA #DevOps #DataScience

💼 Freelance Rate Negotiation Coach - AI-Powered Salary Intelligence

Asmae — Fri, 30 Jan 2026 23:06:31 +0000

Submission for the Algolia Agent Studio Challenge

This is a submission for the Algolia Agent Studio Challenge: Consumer-Facing Conversational Experiences

What I Built

I built the Freelance Rate Negotiation Coach, an AI-powered conversational agent that helps freelancers negotiate fair rates using real market intelligence.

The Problem: Freelancers struggle to know their market value. They either undercharge (leaving money on the table) or overcharge (losing clients). Market data is scattered across platforms, outdated, or simply doesn't exist for their specific profile.

The Solution: A conversational AI agent that provides instant, data-backed rate recommendations based on:

✅ 94+ real freelance benchmarks from the French tech market
✅ Tech stack, seniority, and location matching
✅ Market trends (+15% for React, +20% for DevOps, etc.)
✅ Tactical negotiation arguments grounded in real data

Unlike generic salary calculators, this agent converses with users to understand their exact situation, then delivers personalized insights they can use in actual negotiations.

Demo

🔗 Live Demo: https://freelance-rate-coach-d435fez0z-asmaes-projects-79bc55e6.vercel.app/

📹 Video Demo: https://drive.google.com/drive/folders/1Rp76zF26wSCnQZm4-xKaVktqfudEfIkq?usp=drive_link

Key Features in Action:

Example Query 1: "What are React Senior rates in Paris?"

Agent Response:
Based on 320 freelancers: TJM €550-680, average €615
Market trend: ↑ 15% (growing demand)
Remote work options can justify +10-15% premium

Example Query 2: "I need help negotiating my rate"

Agent asks clarifying questions:
→ What's your tech stack?
→ Your seniority level?
→ Location preference?

Then provides:
- Exact market benchmarks for your profile
- 2-3 data-driven negotiation arguments
- Red flags if proposed rate is >15% below market

Screenshots

How I Used Algolia Agent Studio

Data Indexing Strategy

I created a specialized freelance_rates index containing:

94 benchmark records covering 20+ tech stacks (React, Python, DevOps, Java, Go, etc.)
Structured attributes: tech_stack, seniority, location, rate_min, rate_max, rate_average, market_trend, trend_percentage, sample_size
Faceted data enabling multi-dimensional filtering (mission type, remote work, company size)

Each record represents real market data:

{
  "tech_stack": "React",
  "seniority": "Senior",
  "location": "Paris",
  "rate_min": 550,
  "rate_max": 680,
  "rate_average": 615,
  "market_trend": "up",
  "trend_percentage": 15,
  "sample_size": 145
}

Retrieval-Augmented Dialogue

The agent uses Algolia's faceted search to match user queries against the indexed data:

User provides context → "React Senior, 6 years experience, Paris"
Agent translates to Algolia query → tech_stack:"React" AND seniority:"Senior" AND location:"Paris"
Instant retrieval → Relevant benchmarks in <50ms
Contextualized response → "Based on 145 freelancers: €550-680/day, trend +15%"

This ensures every recommendation is grounded in real data, not hallucinated by the LLM.

Targeted Prompting Approach

I engineered the agent's system prompt to prioritize factual retrieval over conversational fluff:

CRITICAL SEARCH RULES:
1. Search Algolia index FIRST before answering
2. NEVER invent rates - only use indexed data
3. Always cite: sample_size, rate range, market trend
4. If no exact match, find closest and explain adjustments
5. Warn users if proposed rate is >15% below market

CONVERSATION FLOW:
- User provides initial info → Search immediately
- Present results: "Based on [N] freelancers: €[min-max], avg €[avg]"
- Mention trend: "[X]% up/down/stable"
- Give 2-3 negotiation arguments from data

This prompt ensures the agent acts as a data terminal, not a chatty assistant.

Why Gemini 2.5 Flash?

I chose Gemini 2.5 Flash as the LLM for:

✅ Free tier with generous limits (perfect for proof-of-concept)
✅ Fast response times matching Algolia's speed
✅ Strong reasoning for multi-turn conversations
✅ Tool use capabilities for clean Algolia integration

Why Fast Retrieval Matters

Speed Equals Trust

In high-stakes negotiations, latency kills confidence. When a freelancer asks "What should I charge?", they need an answer now, not after watching a loading spinner.

Algolia's <50ms retrieval transforms the experience:

🚀 Instant credibility: Fast = authoritative
💡 No "AI thinking" theatrics: Direct data retrieval feels professional
🎯 Real-time decision support: Users can ask follow-up questions mid-negotiation

Contextual Retrieval > Generic LLM Knowledge

Without Algolia, the LLM would give generic advice:
❌ "Senior developers in Paris typically earn €500-800/day" (vague, outdated)

With Algolia Agent Studio:
✅ "Based on 145 React Senior freelancers in Paris: €550-680/day, average €615, trend +15% (data from Q4 2024)"

The difference:

Specificity: Exact tech stack match
Recency: Current market trends
Sample size: Statistical confidence
Actionable: User knows exactly where they stand

Real-World Impact

Fast, data-backed insights help freelancers:

📈 Negotiate 15-25% higher rates (backed by market data)
⚠️ Spot lowball offers (agent flags rates >15% below market)
💼 Justify premium pricing (specialties like TypeScript add €50-100/day)
🌍 Understand regional differences (Paris €615 vs Lyon €540 for same profile)

Technical Stack

Algolia Agent Studio - Conversational agent orchestration
Gemini 2.5 Flash - LLM for dialogue management
Algolia InstantSearch - Chat widget UI
React + Vite - Frontend framework
Vercel - Deployment platform

Lessons Learned

What Worked

Structured data wins: Well-indexed benchmarks > throwing raw data at an LLM
Faceted search is powerful: Algolia's multi-dimensional filtering enables precise matching
Prompt engineering matters: Constraining the agent to "data terminal" mode eliminated hallucinations
Speed builds trust: Sub-50ms retrieval makes the agent feel authoritative

Challenges Overcome

Initial Agent Studio network errors: Solved by switching from OpenAI sandbox to Gemini production key
Query parsing issues: Agent initially struggled with "6 years experience" → Fixed by mapping experience years to seniority levels in prompt
Data quality: Ensuring all 94 records had complete, validated market data

Future Enhancements

📊 Visual analytics: Charts showing rate evolution over time
🌍 Multi-country support: Expand beyond France to EU/US markets
💬 Negotiation scripts: Generate email templates for rate discussions
📈 Personalized tracking: Save user profile for trend monitoring

Why This Matters

Salary negotiation is one of the highest-impact conversations a freelancer has. Getting it right can mean €10-20K more per year. This agent democratizes market intelligence that was previously:

Locked in expensive salary surveys
Scattered across freelance platforms
Outdated by months or years

By combining Algolia's fast retrieval with AI conversation, we create a tool that empowers freelancers to earn what they're worth.

Built for the #AlgoliaAgentStudio Challenge 🚀

Tags: #algolia #agentstudio #ai #freelance #webdev #chatbot #machinelearning

GitHub: https://github.com/AsamaeS/Freelance-Rate-Negotiation-Coach_algolia-challenge
Live Demo: https://freelance-rate-coach-d435fez0z-asmaes-projects-79bc55e6.vercel.app/

💼 Freelance Rate Negotiation Coach - AI-Powered Salary Intelligence

Asmae — Tue, 27 Jan 2026 21:14:11 +0000

Submission for the Algolia Agent Studio Challenge

This is a submission for the Algolia Agent Studio Challenge: Consumer-Facing Conversational Experiences

What I Built

I built the Freelance Rate Negotiation Coach, an AI-powered conversational agent that helps freelancers negotiate fair rates using real market intelligence.

The Solution: A conversational AI agent that provides instant, data-backed rate recommendations based on:

✅ 94+ real freelance benchmarks from the French tech market
✅ Tech stack, seniority, and location matching
✅ Market trends (+15% for React, +20% for DevOps, etc.)
✅ Tactical negotiation arguments grounded in real data

Unlike generic salary calculators, this agent converses with users to understand their exact situation, then delivers personalized insights they can use in actual negotiations.

Demo

🔗 Live Demo: https://freelance-rate-coach-d435fez0z-asmaes-projects-79bc55e6.vercel.app/

📹 Video Demo: https://drive.google.com/drive/folders/1Rp76zF26wSCnQZm4-xKaVktqfudEfIkq?usp=drive_link

Key Features in Action:

Example Query 1: "What are React Senior rates in Paris?"

Agent Response:
Based on 320 freelancers: TJM €550-680, average €615
Market trend: ↑ 15% (growing demand)
Remote work options can justify +10-15% premium

Example Query 2: "I need help negotiating my rate"

Agent asks clarifying questions:
→ What's your tech stack?
→ Your seniority level?
→ Location preference?

Then provides:
- Exact market benchmarks for your profile
- 2-3 data-driven negotiation arguments
- Red flags if proposed rate is >15% below market

Screenshots

How I Used Algolia Agent Studio

Data Indexing Strategy

I created a specialized freelance_rates index containing:

94 benchmark records covering 20+ tech stacks (React, Python, DevOps, Java, Go, etc.)
Structured attributes: tech_stack, seniority, location, rate_min, rate_max, rate_average, market_trend, trend_percentage, sample_size
Faceted data enabling multi-dimensional filtering (mission type, remote work, company size)

Each record represents real market data:

{
  "tech_stack": "React",
  "seniority": "Senior",
  "location": "Paris",
  "rate_min": 550,
  "rate_max": 680,
  "rate_average": 615,
  "market_trend": "up",
  "trend_percentage": 15,
  "sample_size": 145
}

Retrieval-Augmented Dialogue

The agent uses Algolia's faceted search to match user queries against the indexed data:

User provides context → "React Senior, 6 years experience, Paris"
Agent translates to Algolia query → tech_stack:"React" AND seniority:"Senior" AND location:"Paris"
Instant retrieval → Relevant benchmarks in <50ms
Contextualized response → "Based on 145 freelancers: €550-680/day, trend +15%"

This ensures every recommendation is grounded in real data, not hallucinated by the LLM.

Targeted Prompting Approach

I engineered the agent's system prompt to prioritize factual retrieval over conversational fluff:

CRITICAL SEARCH RULES:
1. Search Algolia index FIRST before answering
2. NEVER invent rates - only use indexed data
3. Always cite: sample_size, rate range, market trend
4. If no exact match, find closest and explain adjustments
5. Warn users if proposed rate is >15% below market

CONVERSATION FLOW:
- User provides initial info → Search immediately
- Present results: "Based on [N] freelancers: €[min-max], avg €[avg]"
- Mention trend: "[X]% up/down/stable"
- Give 2-3 negotiation arguments from data

This prompt ensures the agent acts as a data terminal, not a chatty assistant.

Why Gemini 2.5 Flash?

I chose Gemini 2.5 Flash as the LLM for:

✅ Free tier with generous limits (perfect for proof-of-concept)
✅ Fast response times matching Algolia's speed
✅ Strong reasoning for multi-turn conversations
✅ Tool use capabilities for clean Algolia integration

Why Fast Retrieval Matters

Speed Equals Trust

In high-stakes negotiations, latency kills confidence. When a freelancer asks "What should I charge?", they need an answer now, not after watching a loading spinner.

Algolia's <50ms retrieval transforms the experience:

🚀 Instant credibility: Fast = authoritative
💡 No "AI thinking" theatrics: Direct data retrieval feels professional
🎯 Real-time decision support: Users can ask follow-up questions mid-negotiation

Contextual Retrieval > Generic LLM Knowledge

Without Algolia, the LLM would give generic advice:
❌ "Senior developers in Paris typically earn €500-800/day" (vague, outdated)

With Algolia Agent Studio:
✅ "Based on 145 React Senior freelancers in Paris: €550-680/day, average €615, trend +15% (data from Q4 2024)"

The difference:

Specificity: Exact tech stack match
Recency: Current market trends
Sample size: Statistical confidence
Actionable: User knows exactly where they stand

Real-World Impact

Fast, data-backed insights help freelancers:

📈 Negotiate 15-25% higher rates (backed by market data)
⚠️ Spot lowball offers (agent flags rates >15% below market)
💼 Justify premium pricing (specialties like TypeScript add €50-100/day)
🌍 Understand regional differences (Paris €615 vs Lyon €540 for same profile)

Technical Stack

Algolia Agent Studio - Conversational agent orchestration
Gemini 2.5 Flash - LLM for dialogue management
Algolia InstantSearch - Chat widget UI
React + Vite - Frontend framework
Vercel - Deployment platform

Lessons Learned

What Worked

Structured data wins: Well-indexed benchmarks > throwing raw data at an LLM
Faceted search is powerful: Algolia's multi-dimensional filtering enables precise matching
Prompt engineering matters: Constraining the agent to "data terminal" mode eliminated hallucinations
Speed builds trust: Sub-50ms retrieval makes the agent feel authoritative

Challenges Overcome

Initial Agent Studio network errors: Solved by switching from OpenAI sandbox to Gemini production key
Query parsing issues: Agent initially struggled with "6 years experience" → Fixed by mapping experience years to seniority levels in prompt
Data quality: Ensuring all 94 records had complete, validated market data

Future Enhancements

📊 Visual analytics: Charts showing rate evolution over time
🌍 Multi-country support: Expand beyond France to EU/US markets
💬 Negotiation scripts: Generate email templates for rate discussions
📈 Personalized tracking: Save user profile for trend monitoring

Why This Matters

Salary negotiation is one of the highest-impact conversations a freelancer has. Getting it right can mean €10-20K more per year. This agent democratizes market intelligence that was previously:

Locked in expensive salary surveys
Scattered across freelance platforms
Outdated by months or years

By combining Algolia's fast retrieval with AI conversation, we create a tool that empowers freelancers to earn what they're worth.

Built for the #AlgoliaAgentStudio Challenge 🚀

Tags: #algolia #agentstudio #ai #freelance #webdev #chatbot #machinelearning

GitHub: https://github.com/AsamaeS/Freelance-Rate-Negotiation-Coach_algolia-challenge
Live Demo: https://freelance-rate-coach-d435fez0z-asmaes-projects-79bc55e6.vercel.app/

💼 Freelance Rate Negotiation Coach - AI-Powered Salary Intelligence

Asmae — Tue, 27 Jan 2026 21:06:21 +0000

This is a submission for the Algolia Agent Studio Challenge: Consumer-Facing Conversational Experiences

What I Built

I built the Freelance Rate Negotiation Coach, an AI-powered conversational agent that helps freelancers negotiate fair rates using real market intelligence.

The Solution: A conversational AI agent that provides instant, data-backed rate recommendations based on:

✅ 94+ real freelance benchmarks from the French tech market
✅ Tech stack, seniority, and location matching
✅ Market trends (+15% for React, +20% for DevOps, etc.)
✅ Tactical negotiation arguments grounded in real data

Unlike generic salary calculators, this agent converses with users to understand their exact situation, then delivers personalized insights they can use in actual negotiations.

Demo

🔗 Live Demo: https://freelance-rate-coach-d435fez0z-asmaes-projects-79bc55e6.vercel.app/

📹 Video Demo: https://drive.google.com/drive/folders/1Rp76zF26wSCnQZm4-xKaVktqfudEfIkq?usp=drive_link

Key Features in Action:

Example Query 1: "What are React Senior rates in Paris?"

Agent Response:
Based on 320 freelancers: TJM €550-680, average €615
Market trend: ↑ 15% (growing demand)
Remote work options can justify +10-15% premium

Example Query 2: "I need help negotiating my rate"

Agent asks clarifying questions:
→ What's your tech stack?
→ Your seniority level?
→ Location preference?

Then provides:
- Exact market benchmarks for your profile
- 2-3 data-driven negotiation arguments
- Red flags if proposed rate is >15% below market

Screenshots

How I Used Algolia Agent Studio

Data Indexing Strategy

I created a specialized freelance_rates index containing:

94 benchmark records covering 20+ tech stacks (React, Python, DevOps, Java, Go, etc.)
Structured attributes: tech_stack, seniority, location, rate_min, rate_max, rate_average, market_trend, trend_percentage, sample_size
Faceted data enabling multi-dimensional filtering (mission type, remote work, company size)

Each record represents real market data:

{
  "tech_stack": "React",
  "seniority": "Senior",
  "location": "Paris",
  "rate_min": 550,
  "rate_max": 680,
  "rate_average": 615,
  "market_trend": "up",
  "trend_percentage": 15,
  "sample_size": 145
}

Retrieval-Augmented Dialogue

The agent uses Algolia's faceted search to match user queries against the indexed data:

User provides context → "React Senior, 6 years experience, Paris"
Agent translates to Algolia query → tech_stack:"React" AND seniority:"Senior" AND location:"Paris"
Instant retrieval → Relevant benchmarks in <50ms
Contextualized response → "Based on 145 freelancers: €550-680/day, trend +15%"

This ensures every recommendation is grounded in real data, not hallucinated by the LLM.

Targeted Prompting Approach

I engineered the agent's system prompt to prioritize factual retrieval over conversational fluff:

CRITICAL SEARCH RULES:
1. Search Algolia index FIRST before answering
2. NEVER invent rates - only use indexed data
3. Always cite: sample_size, rate range, market trend
4. If no exact match, find closest and explain adjustments
5. Warn users if proposed rate is >15% below market

CONVERSATION FLOW:
- User provides initial info → Search immediately
- Present results: "Based on [N] freelancers: €[min-max], avg €[avg]"
- Mention trend: "[X]% up/down/stable"
- Give 2-3 negotiation arguments from data

This prompt ensures the agent acts as a data terminal, not a chatty assistant.

Why Gemini 2.5 Flash?

I chose Gemini 2.5 Flash as the LLM for:

✅ Free tier with generous limits (perfect for proof-of-concept)
✅ Fast response times matching Algolia's speed
✅ Strong reasoning for multi-turn conversations
✅ Tool use capabilities for clean Algolia integration

Why Fast Retrieval Matters

Speed Equals Trust

In high-stakes negotiations, latency kills confidence. When a freelancer asks "What should I charge?", they need an answer now, not after watching a loading spinner.

Algolia's <50ms retrieval transforms the experience:

🚀 Instant credibility: Fast = authoritative
💡 No "AI thinking" theatrics: Direct data retrieval feels professional
🎯 Real-time decision support: Users can ask follow-up questions mid-negotiation

Contextual Retrieval > Generic LLM Knowledge

Without Algolia, the LLM would give generic advice:
❌ "Senior developers in Paris typically earn €500-800/day" (vague, outdated)

With Algolia Agent Studio:
✅ "Based on 145 React Senior freelancers in Paris: €550-680/day, average €615, trend +15% (data from Q4 2024)"

The difference:

Specificity: Exact tech stack match
Recency: Current market trends
Sample size: Statistical confidence
Actionable: User knows exactly where they stand

Real-World Impact

Fast, data-backed insights help freelancers:

📈 Negotiate 15-25% higher rates (backed by market data)
⚠️ Spot lowball offers (agent flags rates >15% below market)
💼 Justify premium pricing (specialties like TypeScript add €50-100/day)
🌍 Understand regional differences (Paris €615 vs Lyon €540 for same profile)

Technical Stack

Algolia Agent Studio - Conversational agent orchestration
Gemini 2.5 Flash - LLM for dialogue management
Algolia InstantSearch - Chat widget UI
React + Vite - Frontend framework
Vercel - Deployment platform

Lessons Learned

What Worked

Structured data wins: Well-indexed benchmarks > throwing raw data at an LLM
Faceted search is powerful: Algolia's multi-dimensional filtering enables precise matching
Prompt engineering matters: Constraining the agent to "data terminal" mode eliminated hallucinations
Speed builds trust: Sub-50ms retrieval makes the agent feel authoritative

Challenges Overcome

Initial Agent Studio network errors: Solved by switching from OpenAI sandbox to Gemini production key
Query parsing issues: Agent initially struggled with "6 years experience" → Fixed by mapping experience years to seniority levels in prompt
Data quality: Ensuring all 94 records had complete, validated market data

Future Enhancements

📊 Visual analytics: Charts showing rate evolution over time
🌍 Multi-country support: Expand beyond France to EU/US markets
💬 Negotiation scripts: Generate email templates for rate discussions
📈 Personalized tracking: Save user profile for trend monitoring

Why This Matters

Salary negotiation is one of the highest-impact conversations a freelancer has. Getting it right can mean €10-20K more per year. This agent democratizes market intelligence that was previously:

Locked in expensive salary surveys
Scattered across freelance platforms
Outdated by months or years

By combining Algolia's fast retrieval with AI conversation, we create a tool that empowers freelancers to earn what they're worth.

Built for the #AlgoliaAgentStudio Challenge 🚀

Tags: #algolia #agentstudio #ai #freelance #webdev #chatbot #machinelearning

GitHub: https://github.com/AsamaeS/Freelance-Rate-Negotiation-Coach_algolia-challenge
Live Demo: https://freelance-rate-coach-d435fez0z-asmaes-projects-79bc55e6.vercel.app/

Recall Radar: Instantly Detect Product Recalls with Algolia Agent Studio

Asmae — Fri, 23 Jan 2026 09:07:50 +0000

# Submission for the Algolia Agent Studio Challenge

Consumer-Facing Non-Conversational Experiences

This is a submission for the Algolia Agent Studio Challenge.

🚨 What I Built

Recall Radar is a consumer-facing Safety Agent designed to instantly detect whether a product has been officially recalled.

Instead of relying on slow, conversational AI flows, Recall Radar adopts a non-conversational, retrieval-first approach. It delivers an immediate, authoritative Safe / Not Safe verdict based on official recall databases.

The experience is designed for high-stress scenarios, such as parents checking a product’s safety. There are no chats, no forms, and no ambiguity. Just instant feedback powered by fast, contextual retrieval.

Core idea:

Search is not just a lookup tool here. It is the decision engine.

🎯 Key Capabilities

Instant recall detection for product names, brands, and models
Clear, color-coded safety verdicts
Typo-tolerant fuzzy matching for real-world input errors
Zero backend logic. Fully search-driven intelligence
Professional, “government-style” UX for trust and clarity

🧪 Demo

Live Application

https://algoliachallenge-project-recall-rad.vercel.app
Source Code (GitHub)

https://github.com/AsamaeS/algoliachallenge_project_-Recall-Radar

🔍 Safety Verdicts in Action

🔴 Match Found	🟠 Possible Match	🟢 No Records
Recalled product detected with high confidence	Close or typo-based match requiring verification	No official recall found

Screenshots and demo video are available below.

🎥 Video Demo

A short walkthrough demonstrating how Recall Radar reacts in real time to exact matches, fuzzy matches, and clean searches:

https://drive.google.com/drive/folders/1M0exKMaHXqKDBpFyXCtxXi2X28TT9Dbl

🧠 How I Used Algolia Agent Studio

Algolia is not used as a passive search layer, but as the core intelligence system.

Data Indexing

I indexed structured consumer safety recall data inspired by official standards (RAPEX / DGCCRF), including:

Product name
Brand
Model / reference
Risk severity
Source authority

Retrieval-Driven Logic

This is a non-conversational agent, so “prompting” happens through retrieval metadata, not text generation.

Algolia’s ranking signals drive the agent’s behavior:

Exact Match (RED)
- Zero typos on critical attributes
- High-confidence recall detected
- Immediate high-risk alert
Fuzzy Match (ORANGE)
- Typo tolerance or partial similarity detected
- User warned to verify details
No Match (GREEN)
- No relevant recall found
- Reassuring confirmation with official disclaimer

This creates logical branching directly in the UI, without any backend decision rules.

⚡ Why Fast Retrieval Matters

In safety-critical workflows, latency destroys trust.

If a user has to wait for an AI to “think,” they may not check at all.

Algolia’s fast, contextual retrieval enables:

Instant Verdicts

The safety status updates live as the user types.
Stress-Proof Input Handling

Typos like “TohyWorld” still trigger critical warnings.
Perceived Authority & Reliability

Speed + consistency creates a professional, official feel.

Fast retrieval turns search into a protective mechanism, not just an interface.

📄 Project Report & Technical Walkthrough

A more detailed technical breakdown, implementation notes, and validation results are available in the repository:

https://github.com/AsamaeS/algoliachallenge_project_-Recall-Radar

Project built for the Algolia Agent Studio Challenge – Consumer-Facing Non-Conversational Experiences.

Astryx Documents API: Production-Ready Document Ingestion & Vector Backend with Xano

Asmae — Mon, 15 Dec 2025 07:48:32 +0000

This is a submission for the Xano AI-Powered Backend Challenge: Production-Ready Public API

What I Built

I built Astryx Documents API, a production-ready backend designed to ingest aeronautics documents, structure them, split them into semantic chunks, and store vector embeddings for future AI-powered search and retrieval.

The API is designed for real-world use cases such as technical documentation analysis, maintenance manuals, and knowledge retrieval systems.

It is fully built with Xano, secured with token-based authentication, and structured to be scalable and maintainable.

API Documentation

The API exposes secure, private endpoints that can be consumed by third-party applications.

Core Endpoints

POST /documents
- Adds a document record with metadata.
POST /add_document_with_vectors
- Ingests a document
- Splits its content into chunks
- Stores vector embeddings linked to each chunk

Security

Token-based authentication (Bearer token required)
Private API group configuration

This makes the API ready for controlled public or partner access.

Demo

📹 Demo video & screenshots:

👉 Google Drive link: https://drive.google.com/drive/folders/1hem6CqRIFdi62VNkmUicp1Gwa_lygJNl?usp=sharing
Github :https://github.com/AsamaeS/Astryx

The demo shows:

API execution in Xano
Document insertion
Automatic chunk creation
Vector storage in the database

The AI Prompt I Used

I used AI to generate an initial backend structure and XanoScript endpoints for document ingestion and storage.

The goal of the prompt was to accelerate backend creation and then manually refine it to meet production standards.

How I Refined the AI-Generated Code

The AI-generated code required significant refinement to become production-ready:

Fixed invalid XanoScript syntax that did not compile
Refactored endpoints to respect Xano’s execution model
Removed unsupported control structures
Added secure authentication requirements
Designed a clear document → chunk → vector data pipeline
Improved maintainability and clarity of the API logic

This process highlighted how human expertise is essential to transform AI-generated code into reliable production systems.

My Experience with Xano

Xano made it possible to move extremely fast from idea to production-ready backend without managing infrastructure.

The biggest challenge was mastering strict XanoScript syntax, but once understood, it enabled clean, scalable backend logic with excellent performance and security.

Xano proved to be a powerful platform for building real-world APIs enhanced by AI workflows.