Chatbot React App is a simple chatbot application built using React. The app allows users to send messages and receive responses from the bot. This app is styled using Tailwind CSS and includes a typing indicator for a better user experience.
You can see a live demo of the project here.
- User-friendly interface for chatting
- Message sending functionality
- Typing indicator for bot responses
- Responsive design with Tailwind CSS
- React: A JavaScript library for building user interfaces.
- Tailwind CSS: A utility-first CSS framework for styling.
- Axios: For making HTTP requests (if needed).
- Heroicons: For vector icons.
- Headless UI: For unstyled, accessible UI components.
To set up the Chatbot React App locally, follow these steps:
-
Clone the repository:
git clone <https://github.com/mouraleonardo/react-chatbot-app.git> cd chatbot-react-app
-
Install dependencies:
Make sure you have Node.js installed, then run:
npm install
-
Start the development server:
npm start
Your application should be running on http://localhost:3000.
Once the app is running, you can:
- Type your message into the input field.
- Press Enter or click the Send button (represented by a paper airplane icon) to send your message.
- The bot will respond with an echoed message after a short delay, simulating typing.
src/
├── components/
│ └── Chatbot.js
├── index.js
├── App.js
├── index.css
├── tailwind.config.js
└── .gitignore
- src/components/Chatbot.js: Contains the main functionality and UI for the chatbot.
- index.js: The entry point for the React application.
- App.js: The main app component.
- index.css: Global styles for the app.
- tailwind.config.js: Configuration file for Tailwind CSS.
- postcss.config.js: Configuration file for PostCSS.
This project is licensed under the MIT License. See the LICENSE file for more details.
Feel free to contribute to this project! Open issues or submit pull requests for any improvements or bug fixes.