Posted on Mar 29

Building an E-Commerce Support Chatbot Part 6: Building the React Frontend

Now that our backend and chatbot logic are ready, it's time to create a user-friendly chat interface using React. This part focuses on building a simple yet elegant frontend that interacts with the backend and enhances the user experience.

✅ What We'll Cover

Setting up the React project structure
Creating a chat interface
Sending queries to the backend API
Displaying responses from the chatbot
Basic styling for good UX

⚙️ 1. Project Setup (if not already done)

cd frontend npx create-react-app . npm install axios styled-components

💬 2. Chat Interface Component

Let’s create the chat interface:

// frontend/src/components/ChatInterface.js import React, { useState } from 'react'; import styled from 'styled-components'; import axios from 'axios'; const ChatContainer = styled.div\` max-width: 800px; margin: 40px auto; padding: 20px; height: 80vh; display: flex; flex-direction: column; \`; const MessagesContainer = styled.div\` flex: 1; overflow-y: auto; padding: 10px; margin-bottom: 20px; border: 1px solid #ccc; border-radius: 4px; \`; const MessageBubble = styled.div\` max-width: 70%; padding: 10px 15px; border-radius: 18px; margin-bottom: 10px; line-height: 1.4; word-wrap: break-word; \${props => props.isUser ? \` background-color: #dcf8c6; margin-left: auto; \` : \` background-color: #f0f0f0; margin-right: auto; \`} \`; const InputContainer = styled.div\` display: flex; gap: 10px; \`; const Input = styled.input\` flex: 1; padding: 10px; border-radius: 4px; border: 1px solid #ccc; \`; const Button = styled.button\` padding: 10px 20px; background-color: #4a69bd; color: white; border: none; border-radius: 4px; cursor: pointer; &:hover { background-color: #3c55a5; } \`; const ChatInterface = () => { const [messages, setMessages] = useState([ { text: "Hi! How can I help you with your order today?", isUser: false } ]); const [input, setInput] = useState(''); const handleSendMessage = async () => { if (!input.trim()) return; const userMessage = { text: input, isUser: true }; setMessages(prev => [...prev, userMessage]); try { const response = await axios.post('/api/chat', { question: input }); const botMessage = { text: response.data.answer, isUser: false }; setMessages(prev => [...prev, botMessage]); } catch (err) { console.error(err); setMessages(prev => [...prev, { text: "Sorry, something went wrong.", isUser: false }]); } setInput(''); }; return ( <ChatContainer> <h2>E-Commerce Support Chatbot</h2> <MessagesContainer> {messages.map((msg, idx) => ( <MessageBubble key={idx} isUser={msg.isUser}> {msg.text} </MessageBubble> ))} </MessagesContainer> <InputContainer> <Input value={input} onChange={e => setInput(e.target.value)} onKeyDown={e => e.key === 'Enter' && handleSendMessage()} placeholder="Ask about your order..." /> <Button onClick={handleSendMessage}>Send</Button> </InputContainer> </ChatContainer> ); }; export default ChatInterface;

🧩 3. Use Component in App

// frontend/src/App.js import React from 'react'; import ChatInterface from './components/ChatInterface'; import './App.css'; function App() { return ( <div className="App"> <ChatInterface /> </div>  ); } export default App;