React Chat Interface

A modern chat interface built with React that mimics ChatGPT's functionality. This project demonstrates a clean and maintainable React application with features like conversation management, markdown support, and AI integration.

Features

• 💬 ChatGPT-like interface with conversation history
• 📝 Markdown rendering support
• 🔄 Multiple conversation threads
• 🎨 Modern UI with TailwindCSS
• 🔌 Ready-to-use AI service integration
• 📱 Responsive design

Tech Stack

• React (with functional components and hooks)
• Redux Toolkit for state management
• TailwindCSS for styling
• React Markdown for rendering markdown
• Axios for API requests

Getting Started

Prerequisites

• Node.js (v14 or higher)
• npm or yarn

Installation

1. Clone the repository:

   git clone https://github.com/yourusername/react-chat-interface.git
   cd react-chat-interface
   

2. Install dependencies:

   npm install
   # or
   yarn install
   

3. Create a .env file in the root directory and add your AI service credentials:

   REACT_APP_API_ENDPOINT=your_api_endpoint
   REACT_APP_API_KEY=your_api_key
   

4. Start the development server:

   npm run dev
   # or
   yarn dev
   

The application will be available at http://localhost:5173

Design Decisions

State Management

• Redux Toolkit was chosen for its simplified setup and built-in immutability helpers
• Conversation state is managed centrally, making it easy to persist and restore chat history

Component Structure

• Functional components with hooks for better code organization and reusability
• Separate components for the sidebar and chat interface to maintain clean separation of concerns

Styling

• TailwindCSS for rapid UI development and consistent design
• Responsive design principles applied throughout the application
• Dark mode support in the sidebar for better visual hierarchy

API Integration

• Modular API service design allows easy switching between different AI providers
• Error handling and loading states implemented throughout the application
• Conversation history maintained for context-aware responses

Contributing

1. Fork the repository
2. Create your feature branch (git checkout -b feature/AmazingFeature)
3. Commit your changes (git commit -m 'Add some AmazingFeature')
4. Push to the branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

License

This project is licensed under the MIT License - see the LICENSE file for details.