🤖Portfolio Chatbot

How I Built an AI-Powered Portfolio Assistant

💡Project Overview

The Portfolio Chatbot is a site-wide AI assistant that appears on every page of this portfolio. It's designed to answer questions about my skills, projects, experience, and technical expertise in real-time, providing visitors with an interactive way to explore my work.

This project showcases my ability to integrate AI technologies into production applications, combining frontend React components with backend API architecture and database systems.

🏗️System Architecture

Frontend (React/Next.js)
Chat UI Component
↓ HTTP Request
Next.js API Route
/api/chatbot
↓ Future: HTTP to Python Backend
Python Flask Backend
AI Processing & LLM Integration
↓ SQL Queries
MySQL Database
Conversations & Portfolio Data

Architecture Components:

  • Frontend: React component with TypeScript, CSS modules for styling, real-time chat interface
  • API Layer: Next.js API route handling requests, response generation, error handling
  • Backend: Python Flask server with MySQL integration, conversation storage, content search
  • Database: MySQL for persistent storage, conversation history, portfolio content synchronization

⚡Key Features

🎯

Context-Aware Responses

Understands portfolio content and provides accurate, relevant answers about skills, projects, and experience.

💬

Conversation History

Tracks conversations in MySQL database for improved context and personalized follow-up responses.

🔄

Dynamic Content Sync

Automatically stays updated with portfolio changes, ensuring responses reflect current information.

⚡

Real-Time Interaction

Instant responses with smooth animations, typing indicators, and suggested questions for better UX.

🎨

Beautiful UI

Glassmorphism design that matches portfolio aesthetic, fully responsive across all devices.

🔐

Production Ready

Built with security best practices, error handling, and optimized for deployment.

🎯Engineering Challenges & Solutions

⚛️

Real-Time UI State Management

Challenge:

Managing complex chat state including messages, loading indicators, scroll behavior, and user input while maintaining smooth performance.

Solution:

Implemented React hooks (useState, useEffect, useRef) with proper memoization. Used refs for scroll management and input focus, ensuring 60fps animations and responsive feel.

🧠

Context-Aware Response Generation

Challenge:

Creating intelligent responses that understand portfolio context without constant LLM API calls, balancing accuracy with cost and latency.

Solution:

Built a hybrid approach: rule-based system for common queries with portfolio knowledge base, prepared for future LLM integration. Implemented smart keyword matching and response templating.

🗄️

Database Design & Scalability

Challenge:

Designing a MySQL schema that supports conversation history, portfolio data sync, and future vector embeddings while maintaining query performance.

Solution:

Created normalized schema with proper indexes, JSON metadata fields for flexibility, and foreign key relationships. Designed for horizontal scaling with session-based partitioning strategy.

🌐

Cross-Origin Communication

Challenge:

Connecting Next.js frontend with separate Python backend while handling CORS, session management, and error scenarios gracefully.

Solution:

Implemented proper CORS configuration, session ID generation, fallback responses for API failures, and comprehensive error handling with user-friendly messages.

💻Technology Stack

Frontend

  • React 19 - UI component framework
  • TypeScript - Type safety and developer experience
  • Next.js 15 - Framework and API routes
  • CSS Modules - Scoped styling

Backend

  • Python 3.10+ - Backend language
  • Flask - Web framework
  • MySQL - Database system
  • Gunicorn - Production server

Infrastructure

  • Vercel - Frontend hosting
  • Railway/PlanetScale - Backend & DB
  • Git/GitHub - Version control

Future Additions

  • OpenAI API - Advanced LLM responses
  • Vector DB - Semantic search
  • Redis - Response caching

📝Implementation Highlights

React Component Example

Chat message handling with TypeScript:

const handleSendMessage = async () => {
  const userMessage: Message = {
    id: Date.now().toString(),
    content: inputValue.trim(),
    sender: 'user',
    timestamp: new Date()
  };
  
  setMessages(prev => [...prev, userMessage]);
  setIsLoading(true);
  
  const response = await fetch('/api/chatbot', {
    method: 'POST',
    body: JSON.stringify({ message: inputValue })
  });
  
  const data = await response.json();
  // Handle response...
};

Python Backend Example

Conversation storage with MySQL:

def store_conversation(session_id, message, response):
    connection = get_db_connection()
    cursor = connection.cursor()
    
    query = """
        INSERT INTO conversations 
        (session_id, message, response, sender)
        VALUES (%s, %s, %s, %s)
    """
    cursor.execute(query, (session_id, message, response, 'user'))
    connection.commit()

🚀Try It Yourself!

The chatbot is available on every page of this portfolio. Click the floating button in the bottom-right corner to start a conversation and ask questions about my work!

💬

Look for the chat button →

View All ProjectsLearn More About Me