// Minimalist Glass Portfolio: Chatbot

Modular Chatbot

Featured Module / Context-Aware Chatbot / Portfolio Integration

One-liner summary:
A robust, modular, and extensible chatbot system for the Minimalist Glass Portfolio, built with React Context, service abstraction, and a focus on maintainability, accessibility, and advanced UI/UX.

Development Duration: June 2025 - July 2025

Note(s):

• Hosting/code availability disclaimer:
  The full source code for the chatbot module is available upon request. For security and privacy, the code is not published publicly.
• Contact for more info or demos:
  Reach out to Franz Phillip G. Domingo via franzdomingo.tech.
• Navigation note:
  The chatbot is accessible via the floating action button (FAB) on the portfolio site.

Features

• Modular architecture with reusable components
• Centralized state management using React Context
• Service abstraction layer for API/business logic
• Error boundaries and retry logic for robust UX
• Animated, accessible UI (Shadcn UI, Radix UI, Framer Motion)
• Quick Actions for fast commands
• Typing indicator for real-time feedback
• Floating Action Button (FAB) for easy access
• Extensible design for new providers, prompts, or features
• Separation of concerns: UI, state, helpers, types, services
• Performance optimized: minimal client-side state, dynamic loading, image optimization

My Contributions (Role & Responsibilities)

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.

Challenges Faced

• Context management:
  Ensuring global chat state is reliable and extensible across multiple components.

• Error handling:
  Building robust error boundaries and retry logic for unpredictable API responses.

• Performance:
  Optimizing rendering for large chat logs and dynamic UI features.

• Accessibility:
  Making all chatbot interactions keyboard and screen-reader friendly.

Project Architecture

• Architecture Style:
  Modular React with clear separation of concerns (UI, state, helpers, services, types, utils).

• Component Organization:

  • components/chatbot/: Main UI, FAB, message rendering, quick actions, typing indicator
  • components/chatbot/components/: Layout, input, message list, headers, advanced UI
  • components/chatbot/helpers/: Quick actions, hashtag commands, link extraction, type definitions
  • components/chatbot/services/: Chat service abstraction
  • components/chatbot/types/: TypeScript interfaces for chat context and messages
  • components/chatbot/utils/: State management, analytics, accessibility, error handling, etc.

• State Management:
  React Context and custom hooks for chat state and operations.

• Integrations:
  Framer Motion for animation, Radix UI and Shadcn UI for accessibility and design.

Demo Preview

• Screenshots/Video:
  The live demo for the chatbot is available at franz-domingo.vercel.app. Open the chatbot via the floating action button (FAB) to interact with all features live.

• Platform Views:
  Web (responsive, mobile-first)

• Functionality Shown:

  • Floating action button (FAB) for chat access
  • Animated, accessible chat UI
  • Quick actions, typing indicator, error handling
  • Modular message rendering and context-aware features

• Demo Instructions:
  Visit franz-domingo.vercel.app and click the chatbot FAB to launch and interact with the chatbot.

Development Resources

• Guides/Docs:
  • React Context, Framer Motion, Radix UI, Shadcn UI documentation

If you need further details or want to see the codebase, please contact the author directly.