Chatbot H2S

Welcome to Chatbot H2S, a React-based chatbot application built as part of the Hack2Skill Building Chatbot in React Challenge. This project leverages cutting-edge libraries and tools to deliver a sleek and interactive chatbot experience. 🚀

Live Demo 🌐

Experience the chatbot live here: Chatbot H2S

Features ✨

• Interactive Chat Interface: Built with React for a dynamic and seamless user experience.
• Markdown Rendering: Supports rich-text responses using the react-markdown library.
• API Integration: Fetches data dynamically using axios and the Gemini API.
• Tailwind CSS Styling: Modern and responsive design powered by Tailwind CSS.

Tech Stack 🛠️

Frontend

• React: Core framework for building the chatbot interface.
• Tailwind CSS: For sleek, responsive, and utility-first styling.
• react-markdown: To render Markdown-formatted chatbot responses.
• axios: Simplifies API requests and data fetching.

Backend API

• Gemini API: Powers the chatbot's conversational capabilities.

Deployment

• Vercel: Effortless deployment for a live production experience.

Installation and Setup 🚀

Follow these steps to set up the project locally:

1. Clone the Repository:

   git clone https://github.com/deepakcode21/chatbot-H2S.git
   cd chatbot-H2S

2. Install Dependencies:

   npm install

3. Configure Environment Variables:

   • Create a .env file in the root directory.
   • Add your Gemini API key or other necessary environment variables:

     REACT_APP_GEMINI_API_KEY=your_api_key_here

4. Run the Development Server:

   npm start

   Open http://localhost:3000 in your browser to see the app.

Project Structure 📁

Here's an overview of the project structure:

chatbot-H2S/
├── public/          # Static assets
├── src/             # Main source code
│   ├── components/  # React components
├── .env             # Environment variables
├── package.json     # Dependencies and scripts
└── README.md        # Project documentation

Contributions 🤝

Contributions are welcome! If you have ideas to enhance the chatbot or find any bugs, feel free to open an issue or submit a pull request.

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

Challenges and Learnings 📚

This project was a great opportunity to:

• Dive deeper into React's capabilities for building interactive UIs.
• Explore Tailwind CSS for rapid and efficient styling.
• Work with APIs using axios to fetch and handle data.
• Deploy the app on Vercel for a seamless live experience.

Links 🔗

• Live Application: https://chatbot-h2-s.vercel.app/
• GitHub Repository: https://github.com/deepakcode21/chatbot-H2S
• Hackathon Challenge: Hack2Skill Event

License 📜

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

---

Developed with ❤️ by Deepak.