Skip to content

hifichevymane/ai-chat-frontend

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

77 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

AI Chat Frontend

A modern, minimal frontend for an AI chat application, built with React, TypeScript, and Vite. This project provides a fast, developer-friendly environment with hot module replacement, code linting, and Tailwind CSS for styling.

🚀 Technologies Used

  • React — UI library for building user interfaces
  • TypeScript — Typed superset of JavaScript
  • Vite — Next-generation frontend tooling
  • TanStack Router — Modern and scalable routing for React
  • TanStack Query - Powerful asynchronous state management for React
  • Redux Toolkit - A predictable state container for JavaScript applications
  • Tailwind CSS — Utility-first CSS framework
  • Axios — Promise based HTTP client for the browser and node.js
  • React Hook Form - Performant, flexible and extensible forms with easy-to-use validation.
  • zod - TypeScript-first schema validation with static type inference
  • React Markdown — Render Markdown in React
  • remark-gfm — GitHub Flavored Markdown support
  • ESLint — Linting utility for JavaScript and TypeScript
  • Prettier - Formatting utility for JavaScript and TypeScript
  • Vitest - Unit Testing utility
  • React Testing Library - Library to work with React in unit tests

🛠️ Getting Started

Prerequisites

  • Node.js (v22.x recommended)
  • pnpm (used as the package manager)

1. Clone the repository

git clone <your-repo-url>
cd ai-chat-frontend

2. Install dependencies

pnpm install

3. Configure environment variables

Create a .env file in the root directory and set the backend API URL:

VITE_BACKEND_API_URL=https://your-backend-url.com

4. Run the development server

pnpm dev

The app will be available at http://localhost:5173 (or the port shown in your terminal).

5. Build for production

pnpm build

6. Preview the production build

pnpm preview

📋 Scripts

  • pnpm dev — Start the development server
  • pnpm build — Build the app for production
  • pnpm preview — Preview the production build
  • pnpm lint — Run ESLint on the codebase
  • pnpm docker:dev - Run Docker container in Development environment
  • pnpm docker:prod - Run Docker container in Production environment

About

AI Chat frontend built on React + TypeScript + TailwindCSS

Resources

Stars

0 stars

Watchers

1 watching

Forks

Releases

No releases published

Packages

 
 
 

Contributors