Featured Module / Context-Aware Chatbot / Portfolio Integration
One-liner summary:
Isang matatag, modular, at extensible na sistema ng chatbot para sa Portfolio: Glass, binuo gamit ang React Context, service abstraction, at nakatuon sa maintainability, accessibility, at advanced na UI/UX.
Tagal ng Pagbuo: Hunyo 2025 - Hulyo 2025
(Mga) Paalala:
Disclaimer sa hosting/code availability:
Ang buong source code para sa chatbot module ay available kapag hiniling. Para sa seguridad at privacy, ang code ay hindi inilathala nang publiko.
Kontakin para sa karagdagang impormasyon o mga demo:
Makipag-ugnayan kay Franz Phillip G. Domingo sa pamamagitan ng franzdomingo.dev.
Paalala sa pag-navigate:
Ang chatbot ay mapupuntahan sa pamamagitan ng floating action button (FAB) sa portfolio site.
Mga Tampok (Features)
Modular na arkitektura na may mga reusable na component
Centralized na state management gamit ang React Context
Service abstraction layer para sa API/business logic
Error boundaries at retry logic para sa matatag na UX
Animated at accessible na UI (Shadcn UI, Radix UI, Framer Motion)
Quick Actions para sa mabilis na mga command
Typing indicator para sa real-time na feedback
Floating Action Button (FAB) para sa madaling access
Extensible na disenyo para sa mga bagong provider, prompt, o tampok
Separation of concerns: UI, state, helpers, types, services
Performance optimized: minimal na client-side state, dynamic loading, image optimization
Aking mga Kontribusyon (Tungkulin at Responsibilidad)
Arkitektura at Engineering:
Dinisenyo at ipinatupad ang modular na sistema ng chatbot, hinihiwalay ang UI, state, helpers, at services para sa madaling pag-maintain.
State Management:
Binuo ang centralized na chat state gamit ang React Context at mga custom hook.
Service Layer:
Gumawa ng abstraction para sa chat API at business logic, na nagbibigay-daan sa madaling extension at pag-test.
UI/UX:
Gumawa ng mga animated at accessible na component gamit ang Shadcn UI, Radix UI, at Framer Motion.
Error Handling:
Ipinatupad ang mga error boundary at retry logic para sa maayos na karanasan ng user.
Extensibility:
Inayos ang codebase para sa madaling pagdaragdag ng mga bagong tampok, provider, at quick actions.
Mga Hamon na Kinaharap
Context management:
Pagsiguro na ang global chat state ay maaasahan at extensible sa maraming component.
Error handling:
Pagbuo ng matatag na mga error boundary at retry logic para sa mga hindi inaasahang tugon ng API.
Performance:
Pag-optimize ng pag-render para sa malalaking chat log at mga dynamic na tampok ng UI.
Accessibility:
Paggawa sa lahat ng chatbot interaction na keyboard at screen-reader friendly.
Arkitektura ng Proyekto
Estilo ng Arkitektura:
Modular React na may malinaw na separation of concerns (UI, state, helpers, services, types, utils).
Organisasyon ng Component:
components/chatbot/: Pangunahing UI, FAB, message rendering, quick actions, typing indicator
components/chatbot/components/: Layout, input, message list, mga header, advanced na UI
components/chatbot/helpers/: Quick actions, hashtag commands, link extraction, mga type definition
components/chatbot/services/: Chat service abstraction
components/chatbot/types/: Mga TypeScript interface para sa chat context at mga mensahe
components/chatbot/utils/: State management, analytics, accessibility, error handling, atbp.
State Management:
React Context at mga custom hook para sa chat state at mga operasyon.
Mga Integrasyon:
Framer Motion para sa animation, Radix UI at Shadcn UI para sa accessibility at disenyo.
Demo Preview
Mga Screenshot/Video:
Ang live demo para sa chatbot ay available sa franz-domingo.vercel.app. Buksan ang chatbot sa pamamagitan ng floating action button (FAB) upang makita ang lahat ng tampok nang live.
Mga Platform View:
Web (responsive, mobile-first)
Ipinapakitang Functionality:
Floating action button (FAB) para sa chat access
Animated at accessible na chat UI
Quick actions, typing indicator, error handling
Modular na message rendering at context-aware na mga tampok
Mga Instruksyon para sa Demo:
Bisitahin ang franz-domingo.vercel.app at i-click ang chatbot FAB upang buksan at gamitin ang chatbot.
Mga Resource sa Pagbuo
Mga Gabay/Dokumentasyon:
Dokumentasyon ng React Context, Framer Motion, Radix UI, Shadcn UI
Kung kailangan mo ng karagdagang detalye o nais mong makita ang codebase, mangyaring kontakin ang may-akda nang direkta.
\n# Chatbot (Portfolio: Glass)
Context-Aware Chatbot at Portfolio Integration
Pangunahing Resulta: Seamless, accessible na chatbot integration na nagpapanatili ng perpektong 100/100 performance score
Buod: Isang matatag, modular, at extensible na sistema ng chatbot para sa Portfolio: Glass, binuo gamit ang React Context, service abstraction, at nakatuon sa maintainability, accessibility, at advanced na UI/UX.
Ang Problema
Hamon: Ang pangunahing hamon ay ang pag-integrate ng isang context-aware na chatbot sa isang minimalist glassmorphic na UI nang hindi nasisira ang aesthetic o ang perpektong performance scores.
Audience: Mga technical recruiter, engineering lead, at mga team sa mga kumpanyang inaaplayan ko (tulad ng Trend Micro).
Mga Limitasyon: Pagpapanatiling maliit ng mga client bundle, pag-maintain ng 100/100 Lighthouse score, at pagtiyak na ang lahat ay keyboard at screen-reader friendly.
Diskarte at Mga Desisyon
Arkitektura: Modular na React na may malinaw na paghihiwalay ng mga bahagi (UI, state, helpers, services). Centralized na state management gamit ang React Context.
Pangunahing Desisyon:
Service Abstraction: Gumawa ng abstraction layer para sa chat API at business logic.
Modular UI Primitives: Pinaghiwalay ang UI components upang maiwasan ang monolithic structures.
Trade-offs: Pinili ang React Context kaysa sa Redux para mapaliit ang bundle size.
Data Flow: Ang user input ay dumadaan mula sa UI components patungo sa React Context, na nakikipag-ugnayan sa API layer.
Mga Pangunahing Resulta at Epekto
Kinalabasan: Isang mabilis at accessible na chatbot na nagpapaganda ng karanasan sa portfolio nang hindi nagpapabagal ng load times.
Paghahambing: Pinabuti ang static na Portfolio sa pamamagitan ng pagdaragdag ng dynamic na conversational interface.
Epekto: Napatunayan ang galing sa advanced state management at API integration sa mga recruiter.
Sukatan
Resulta
Lighthouse Performance
Napanatili ang 100/100
Accessibility
Keyboard & Screen-reader Friendly
Technical Deep Dive
Mga Natatanging Detalye: Quick Actions, typing indicator, at Floating Action Button (FAB).
Beripikasyon: Binuo na may error boundaries at sinubok gamit ang Lighthouse.
Mga Pag-optimize: Dynamic deferred loading.
Mga Repleksyon
Mga Tagumpay: Matagumpay na nabuo ang chat state nang walang mabibigat na external libraries, pinapanatili ang 100/100 speed.
Mga Aral: Nangangailangan ng mahigpit na disiplina ang pagma-manage ng complex interactive state sa isang static na site.
Arkitektura ng Proyekto
Layered Structure: Ang UI, state, at services ay mahigpit na pinaghihiwalay sa components/chatbot/.
