ChatGpt App

A simple web-based chatbot interface built using HTML, CSS, and JavaScript. This project mimics the front-end layout of a ChatGPT-like interface, allowing for user input and simulated bot responses.

📁 Project Structure

chatgpt-clone/

├── public/ # Static assets

├── src/

│ ├── components/ # Reusable UI components

│ │ ├── ChatMessage.jsx

│ │ ├── ChatWindow.jsx

│ │ ├── Layout.jsx

│ │ ├── MessageInput.jsx

│ │ ├── SettingMenu.jsx

│ │ ├── Sidebar.jsx

│ │ └── TypingIndicator.jsx

│ ├── context/ # Global state management

│ │ ├── ChatContext.jsx

│ │ └── ThemeContext.jsx

│ ├── hooks/ # Custom React hooks

│ │ └── useChatHistory.js

│ ├── pages/ # App pages

│ │ └── Home.jsx

│ ├── services/ # API services

│ │ └── api.js

│ ├── utils/ # Utility functions

│ │ └── openaiApi.js

├── .env # Environment variables

└── README.md # Project documentation

🚀 Features

• ⚡ Clean, responsive, and modern UI
• 💬 Real-time user message input
• 🤖 Simulated chatbot responses
• 📱 Mobile-friendly layout
• 🌙 Light/Dark theme support
• 🧠 Context API-based state management

🛠️ Technologies Used

• React.js – Component-based frontend library
• JavaScript – Programming language
• Tailwind CSS – Utility-first CSS framework

🧪 Getting Started

Prerequisites

• Make sure you have Node.js and npm installed.

🧪 How to Run

• Clone the repository or download the ZIP.
• git clone https://github.com/Aamir-786687/ChatGpt_Clone.git
• cd ChatGpt-clone
• npm install
• npm run dev (to start the server)
• Then open your browser at http://localhost:5174

📌 Future Improvements

1. Integrate with a real chatbot API like OpenAI
2. Add conversation history storage
3. Enhance styling and animations