ACCESSING DATABANKS...
// 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 indicatorcomponents/chatbot/components/: Layout, input, message list, headers, advanced UIcomponents/chatbot/helpers/: Quick actions, hashtag commands, link extraction, type definitionscomponents/chatbot/services/: Chat service abstractioncomponents/chatbot/types/: TypeScript interfaces for chat context and messagescomponents/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.