Skip to content

Latest commit

 

History

History
163 lines (124 loc) · 6.02 KB

README.md

File metadata and controls

163 lines (124 loc) · 6.02 KB

Chat Bot Experiment

Node.js version NPM version ReactJS version Made by Gustavo Domingueti

Access the demo

Table of Contents

🔖 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

Desktop light result Desktop dark result

✔️ 📱 Mobile Result

Mobile light result Mobile dark 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
  1. 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