Chatbot (Portfolio: Glass)

Context-Aware Chatbot & Portfolio Integration

LIVE DEMO (V1) • [GITHUB: Private Source]

Overview

• Role: Architecture & Engineering, UI/UX
• Stack: React, TypeScript, Tailwind CSS, Framer Motion, Radix UI, Shadcn UI
• Key Result: Seamless, accessible chatbot integration maintaining a perfect 100/100 performance score
• Summary: A robust, modular, and extensible chatbot system for the Portfolio: Glass, built with React Context, service abstraction, and a focus on maintainability, accessibility, and advanced UI/UX.

The Problem

• Challenge: The core challenge was implementing a context-aware chatbot that integrates seamlessly into a minimalist glassmorphic UI without breaking the aesthetic or the perfect performance scores. Ensuring global chat state is reliable and building robust error boundaries for unpredictable API responses were major hurdles.
• Audience: Technical recruiters, engineering leads, and teams at companies where I was applying for internship opportunities (such as Trend Micro).
• Constraints: Achieving a consistent UI while keeping initial client bundle sizes small, maintaining the 100/100 Lighthouse score, and making all chatbot interactions keyboard and screen-reader friendly.

Approach & Decisions

• Architecture: Modular React with clear separation of concerns (UI, state, helpers, services, types, utils). Centralized state management using React Context to orchestrate conversational state without heavy external libraries.
• Key Decisions:
  • Service Abstraction: Developed an abstraction layer for chat API and business logic, enabling easy extension and testing of different LLM providers.
  • Modular UI Primitives: Separated UI components into layout, input, message list, headers, and advanced UI to avoid monolithic structures.
• Trade-offs: Chose React Context over heavier state management libraries (like Redux) to minimize bundle size and maintain performance, though it required careful custom hook design to prevent unnecessary re-renders.
• Data Flow: User input flows through modular UI components into a centralized React Context, which communicates with the abstracted service layer for API interactions. Errors are caught by dedicated boundaries with seamless retry logic.

Key Results & Impact

• Outcome: A highly accessible, performant chatbot that enriches the portfolio experience without degrading load times.
• Comparison: Elevated the static Portfolio: Glass by adding a dynamic, context-aware conversational interface.
• Impact: Demonstrated advanced state management, API integration, and accessible component design to recruiters, proving strong frontend engineering capabilities.

Technical Deep Dive

• Notable Details: Quick Actions for fast commands, typing indicator for real-time feedback, Floating Action Button (FAB) for easy access, and a modular architecture (components/chatbot/).
• Verification: Built with error boundaries and retry logic for a robust UX. Tested locally using run-time profiling with Lighthouse, Vercel Analytics, and manual layout checking across browsers.
• Optimizations: Minimal client-side state, dynamic deferred loading, and image optimization to ensure rendering efficiency for large chat logs and dynamic UI features.
• Code Quality: Enforced strict TypeScript checks (custom interfaces for context and messages) and clear separation of concerns.
• Links: components/chatbot/ structure containing components/, helpers/, services/, types/, and utils/.

Reflections

• Differently: I would have planned the API service abstraction earlier to accommodate an even wider variety of LLM providers out of the box.
• Successes: Successfully built a centralized chat state using React Context and custom hooks without relying on external heavy libraries, preserving the 100/100 page speed.
• Lessons: Managing complex interactive state in a static site requires strict architectural discipline. Implementing accessible interactive elements (like the chat input and FAB) demands careful attention to focus management and aria labels.

My Contributions

• Architecture & Engineering: Designed and implemented the modular chatbot system, separating UI, state, helpers, and services for maintainability.
• State Management: Built centralized chat state using React Context and custom hooks.
• Service Layer: Developed abstraction for chat API and business logic, enabling easy extension and testing.
• UI/UX: Created animated, accessible components using Shadcn UI, Radix UI, and Framer Motion.
• Error Handling: Implemented error boundaries and retry logic for a seamless user experience.
• Extensibility: Structured the codebase for easy addition of new features, providers, and quick actions.

Project Architecture

This module follows a modular React architecture with clear separation of concerns to integrate cleanly into the Next.js App Router environment.

• Layered Structure: UI, state, helpers, services, types, and utils are strictly separated within the components/chatbot/ directory.
• Feature Modules:
  • components/chatbot/components/: Layout, input, message list, headers, advanced UI.
  • components/chatbot/helpers/: Quick actions, hashtag commands, link extraction.
  • components/chatbot/services/: Chat service abstraction.
  • components/chatbot/types/: TypeScript interfaces.
• State Management: React Context and custom hooks manage the chatbot state dynamically.
• Integrations: Framer Motion for animations, Radix UI and Shadcn UI for structural accessibility and design alignment with the glassmorphic aesthetics.

Demo Preview

• Live Demo Link: The live project can be viewed at franzdomingov1.vercel.app.
• Floating Action Button (FAB): Persistent chat access across all pages.
• Animated, Accessible UI: Smooth transitions for message appearance and layout shifts.
• Quick Actions: One-click commands for common inquiries.
• Error Handling & Real-time Feedback: Typing indicators and seamless retry logic.

Hosting Note:
The live demo for the chatbot is available at the V1 portfolio site. Open the chatbot via the floating action button (FAB) to interact with all features live.