Google Gemini Clone

Overview

The Google Gemini Clone is a sophisticated AI chat interface that mimics the look and feel of Google's Gemini. It demonstrates advanced frontend development skills using React.js and leverages Firebase for a serverless backend infrastructure.

This project focuses on delivering a smooth, responsive user experience with real-time message streaming, dynamic prompt suggestions, and a polished UI that adapts to various screen sizes.

Key Features

Interactive Chat Interface

• Real-time Streaming: Messages appear character-by-character, simulating a natural conversation flow.
• Context Awareness: The chat maintains context for the duration of the session.
• Markdown Support: Responses are rendered with Markdown support for code blocks, lists, and formatting.

User Experience

• Sidebar Navigation: easy access to chat history and settings.
• Dynamic Prompts: "Hello, how can I help you today?" style suggestions to get started.
• Dark/Light Mode: (Planned) Theming support for better accessibility.

Technical Implementation

Chat Logic

The core chat functionality relies on a custom React hook to manage the conversation state and API interactions.

// Custom hook for chat management
const useChat = () => {
  const [messages, setMessages] = useState<Message[]>([]);
  const [loading, setLoading] = useState(false);

  const sendMessage = async (prompt: string) => {
    setLoading(true);
    // Optimistic UI update
    setMessages(prev => [...prev, { role: 'user', content: prompt }]);
    
    try {
      const response = await geminiApi.generateContent(prompt);
      setMessages(prev => [...prev, { role: 'model', content: response }]);
    } catch (error) {
      console.error("Error generating content:", error);
    } finally {
      setLoading(false);
    }
  };

  return { messages, loading, sendMessage };
};

Firebase Integration

Firebase Firestore is used to persist chat history, allowing users to revisit previous conversations.

// Saving a chat session
const saveChat = async (userId: string, messages: Message[]) => {
  await addDoc(collection(db, "chats"), {
    userId,
    messages,
    timestamp: serverTimestamp(),
  });
};

Challenges & Solutions

• Streaming Responses: simulating the AI "typing" effect required careful state management to prevent re-renders from causing jank. I used useRef and controlled updates to smooth out the animation.
• CSS Layouts: Recreating the specific Gemini layout involved complex Flexbox and Grid configurations to ensure the sidebar and chat window resized correctly on mobile devices.