Chat Bot Experiment

Access the demo

Table of Contents

• About
• Features
• Technologies and libraries
• Best Practices & Tooling
• Project Structure
• How to Use

🔖 About

A modern and interactive chat bot application built with React, TypeScript, and Vite. This project features a beautiful UI with animations, dark mode support, and a responsive design.

🎯 Features

• Modern and responsive UI
• Dark mode support
• Smooth animations with Framer Motion
• Toast notifications
• Accessible components with Radix UI
• Type-safe development with TypeScript
• State management with Zustand
• Beautiful animations with Lottie
• Code quality tools (ESLint, Prettier, Husky)

🚀 Technologies and libraries

The project was developed using the following technologies and libraries:

• React - A JavaScript library for building user interfaces
• TypeScript - JavaScript with syntax for types
• Vite - Next Generation Frontend Tooling
• Tailwind CSS - A utility-first CSS framework
• Radix UI - Unstyled, accessible components
• Framer Motion - A production-ready motion library for React
• Zustand - A small, fast and scalable state management solution
• LottieFiles - Lottie animations for React
• Sonner - Toast notifications

✅ Best Practices & Tooling

This project follows modern best practices to ensure code quality, consistency, and maintainability:

• Husky Automates pre-commit hooks to enforce standards before pushing changes.
• ESLint Ensures consistent code quality by identifying and fixing linting issues.
• Prettier Automatically formats code to maintain a uniform style.
• Commitlint Enforces a standardized commit message format.
• Lint-staged Runs linters on staged files before committing, ensuring only formatted and checked code is pushed.

📂 Project structure

/chat-bot-experiment
├── src/                     # Source files
│   ├── components/          # React components
│   │   ├── chat/            # Chat-related components
│   │   └── ui/              # Reusable UI components
│   ├── constants/           # Application constants
│   ├── hooks/               # Custom React hooks
│   ├── lib/                 # Shared libraries, helpers, and integrations
│   ├── store/               # Zustand store and state management
│   ├── styles/              # Global styles and CSS
│   ├── types/               # TypeScript type definitions
│   ├── utils/               # Utility functions and helper methods
│   ├── App.tsx              # Root application component
│   ├── index.css            # Global CSS styles
│   └── main.tsx             # Application entry point
├── public/                  # Static files
├── components.json          # Radix UI configuration
├── vite.config.ts           # Vite configuration
├── tsconfig.json            # TypeScript configuration
├── package.json             # Project dependencies
└── README.md                # Project documentation

✔️ 💻 Desktop Result

✔️ 📱 Mobile Result

🔥 How to use

• Prerequisites

  • It is necessary to have Node.js installed on the machine in the lts version.
  • Also, you need to have a package manager be it NPM or Yarn.

1. Clone the repository:

  $ git clone git@github.com:dominguetigs/chat-bot-experiment.git

2. Run the Application:

  # Install the dependencies
  $ npm install

  # Initialize the application
  $ npm run dev

  # Initialize the application and expose it on your local network IP address
  $ npm run dev:host

📝 License

This project is under the MIT license. See the LICENSE file for more details.

---

Made with 💙 by Gustavo Domingueti