🤖 Build AI-Powered Apps

A full-stack TypeScript application demonstrating AI integration with multiple LLM providers, featuring an intelligent chatbot and AI-powered product review summarization.

📋 Table of Contents

• Overview
• Features
• Tech Stack
• Project Structure
• Getting Started
  • Prerequisites
  • Installation
  • Environment Variables
  • Database Setup
  • Running the Application
• API Documentation
• Development
• Contributing
• License

🎯 Overview

This project showcases modern full-stack development with AI integration, built using TypeScript, React, and Express. It demonstrates how to integrate multiple AI providers (OpenAI, Ollama, Hugging Face) into a production-ready application with features like intelligent chatbots and AI-powered content summarization.

✨ Features

• 🤖 Multi-Provider AI Integration

  • Support for OpenAI, Ollama, and Hugging Face
  • Flexible AI provider switching
  • Configurable prompts and models

• 💬 Intelligent Chatbot

  • Real-time chat interface
  • Context-aware conversations
  • Typing indicators and smooth UX

• ⭐ Product Review System

  • Display product reviews with ratings
  • Star rating visualization
  • Review filtering and sorting

• 📊 AI-Powered Review Summarization

  • Generate intelligent summaries from multiple reviews
  • Cached summaries with expiration
  • Efficient data processing

• 🏗️ Modern Architecture

  • Monorepo structure with workspaces
  • Type-safe database queries with Prisma
  • RESTful API design
  • Responsive UI with Tailwind CSS

🛠️ Tech Stack

Frontend

• React 19 - UI library
• TypeScript - Type safety
• Vite - Build tool and dev server
• Tailwind CSS - Utility-first CSS framework
• React Query - Data fetching and caching
• Radix UI - Accessible component primitives
• Axios - HTTP client

Backend

• Express 5 - Web framework
• Bun - JavaScript runtime
• TypeScript - Type safety
• Prisma 7 - Next-generation ORM
• MySQL - Relational database
• Zod - Schema validation

AI Integration

• OpenAI - GPT models
• Ollama - Local LLM support
• Hugging Face - Open-source models

DevOps & Tools

• Husky - Git hooks
• lint-staged - Pre-commit linting
• Prettier - Code formatting
• ESLint - Code linting

📁 Project Structure

build-ai-powered-apps/
├── packages/
│   ├── client/                 # React frontend application
│   │   ├── src/
│   │   │   ├── components/    # React components
│   │   │   │   ├── chat/      # Chatbot components
│   │   │   │   ├── reviews/   # Review components
│   │   │   │   └── ui/        # UI primitives
│   │   │   └── lib/           # Utilities
│   │   └── package.json
│   │
│   └── server/                # Express backend application
│       ├── controllers/       # Route controllers
│       ├── services/          # Business logic
│       ├── repositories/      # Data access layer
│       ├── routes.ts          # API routes
│       ├── prisma/            # Prisma schema and migrations
│       ├── generated/         # Generated Prisma client
│       └── package.json
│
├── package.json               # Root package.json (workspaces)
└── README.md

🚀 Getting Started

Prerequisites

• Node.js v20.19+, v22.12+, or v24.0+
• Bun v1.0+ (Install Bun)
• MySQL 8.0+ (or MariaDB 10.3+)
• Git

Installation

1. Clone the repository

   git clone https://github.com/andreassosilo/build-ai-powered-apps.git
   cd build-ai-powered-apps

2. Install dependencies

   bun install

3. Install dependencies for each package

   cd packages/client && bun install
   cd ../server && bun install

Environment Variables

Create a .env file in the packages/server directory:

# Database Configuration
DATABASE_URL="mysql://username:password@localhost:3306/database_name"
DATABASE_HOST="localhost"
DATABASE_USER="your_username"
DATABASE_PASSWORD="your_password"
DATABASE_NAME="your_database"

# Server Configuration
PORT=3000

# AI Provider Configuration
# OpenAI
OPENAI_API_KEY="your_openai_api_key"
OPENAI_MODEL="gpt-3.5-turbo"

# Ollama (optional)
OLLAMA_BASE_URL="http://localhost:11434"
OLLAMA_MODEL="llama2"

# Hugging Face (optional)
HUGGINGFACE_API_KEY="your_huggingface_api_key"

Database Setup

1. Create your MySQL database

   CREATE DATABASE your_database_name;

2. Run Prisma migrations

   cd packages/server
   bunx prisma migrate dev

3. Generate Prisma Client

   bunx prisma generate

Running the Application

Development mode (runs both client and server):

From the root directory:

bun run dev

Or run separately:

Terminal 1 - Server:

cd packages/server
bun run dev

Terminal 2 - Client:

cd packages/client
bun run dev

The application will be available at:

• Frontend: http://localhost:5173
• Backend API: http://localhost:3000

📚 API Documentation

Chat Endpoints

POST /api/chat

Send a message to the AI chatbot.

Request Body:

{
  "prompt": "Hello, how are you?",
  "conversationId": "optional-conversation-id"
}

Response:

{
  "message": "I'm doing well, thank you! How can I help you today?",
  "conversationId": "conversation-id"
}

Review Endpoints

GET /api/products/:id/reviews

Get all reviews for a specific product.

Parameters:

• id (number) - Product ID

Response:

[
  {
    "id": 1,
    "author": "John Doe",
    "rating": 5,
    "content": "Great product!",
    "createdAt": "2024-01-01T00:00:00.000Z",
    "productId": 1
  }
]

POST /api/products/:id/reviews/summarize

Generate an AI summary of all reviews for a product.

Parameters:

• id (number) - Product ID

Response:

{
  "summary": "Based on 10 reviews, this product has an average rating of 4.5 stars...",
  "generatedAt": "2024-01-01T00:00:00.000Z",
  "expiresAt": "2024-01-02T00:00:00.000Z"
}

💻 Development

Code Formatting

Format code with Prettier:

bun run format

Git Hooks

This project uses Husky for Git hooks. Pre-commit hooks will automatically:

• Run lint-staged to format and lint staged files
• Ensure code quality before commits

Database Management

Open Prisma Studio (visual database editor):

cd packages/server
bunx prisma studio

Create a new migration:

cd packages/server
bunx prisma migrate dev --name your_migration_name

Reset database:

cd packages/server
bunx prisma migrate reset

🤝 Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

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

📄 License

This project is open source and available under the MIT License.

👤 Author

Andreas Sosilo

• GitHub: @andreassosilo
• Twitter: @andreassosilo
• LinkedIn: Andreas Sosilo

🙏 Acknowledgments

• Prisma for the amazing ORM
• Vite for the blazing-fast build tool
• Bun for the fast JavaScript runtime
• All the open-source contributors and libraries that made this project possible

---

⭐ If you found this project helpful, please consider giving it a star!