Introduction: Building a Full-Stack AI Chat Application

This tutorial details the creation and deployment of a full-stack AI chat application. The application leverages React.js for the frontend, Node.js and Express.js for the backend, MongoDB for the database, and Google Gemini for AI capabilities. The tutorial also utilizes Hostinger VPS hosting for deployment.

Project Overview and Features

The application allows users to engage in AI-powered chats, view chat history, send images for AI description, and more. Key features include:

User authentication (using Clerk)
AI chat functionality (using Google Gemini)
Image upload and AI-powered image description
Chat history persistence (using MongoDB)
Responsive design
Deployment on Hostinger VPS

Technology Stack

Frontend: React 19
Backend: Node.js, Express.js
Database: MongoDB
AI: Google Gemini
Hosting: Hostinger VPS
Authentication: Clerk
Image Handling: ImageKit
Routing: React Router

Setting up the Development Environment

React Project Setup

The tutorial uses a starter React project from a GitHub repository. The project is cloned, and dependencies are installed using `npm install`. The project is then started using `npm run dev`.

git clone [GitHub Repository URL]
npm install
npm run dev

Backend Server Setup (Node.js)

A Node.js application is created using Express.js to handle API requests. The `npm init -y` command initializes the project, and `npm install express` installs the Express.js framework.

npm init -y
npm install express

Creating the Application Pages and Navigation

The application consists of five pages: homepage, dashboard, chat page, login, and signup. React Router is used for navigation between these pages.

Implementing Authentication with Clerk

Clerk is integrated to handle user authentication. The publishable key from the Clerk dashboard is added to a `.env` file (kept out of Git using `.gitignore`). The Clerk React SDK is installed (`npm install @clerk/clerk-react`). The application is wrapped with the Clerk provider to enable authentication features.

Building Layouts and Reusable Components

Custom layouts are created for the root layout and the dashboard layout, promoting code reusability.

Protecting Routes

Protected routes are implemented using the Clerk's `useAuth` hook. This hook checks for authentication status and redirects unauthorized users to the login page.

Designing the Homepage

The homepage is designed using HTML, CSS, and animations, including a rotating background image and a typing animation effect using the `react-type-animation` library.

Designing the Dashboard

The dashboard displays a list of chats, options for creating new chats or analyzing images, and a search bar. The chat list is fetched from the MongoDB database using React Query.

Implementing Image Upload with ImageKit

ImageKit is used for image uploads and management. The ImageKit React SDK is installed (`npm install @imagekit/react`), and the endpoint and public key are configured. The backend server handles image uploads using the ImageKit Node.js SDK.

Backend Image Upload Endpoint

The backend server's image upload endpoint uses the ImageKit Node.js SDK to handle uploads and returns the image URL.

Integrating Google Gemini for AI Capabilities

Google Gemini is integrated for AI functionality. The Gemini API key is added to a `.env` file. The Google AI library (`npm install @google-ai/generative-language`) is installed for interaction with the Gemini API.

Implementing AI Chat Streaming

The application implements AI chat streaming using Google Gemini's streaming capabilities, enabling a more responsive chat experience.

Database Integration with MongoDB

MongoDB is used for persistent storage of chat history and user data. Mongoose is used as the ODM. The connection string is configured using environment variables.

Chat Model (Mongoose Schema)

const mongoose = require('mongoose');
const { Schema } = mongoose;

const chatSchema = new Schema({
  userId: { type: String, required: true },
  history: [{
    role: { type: String, required: true, enum: ['user', 'model'] },
    parts: [{ text: { type: String, required: true } }],
    image: { type: String }
  }]
}, { timestamps: true });

module.exports = mongoose.models.Chat || mongoose.model('Chat', chatSchema);

User Chats Model (Mongoose Schema)

const mongoose = require('mongoose');
const { Schema } = mongoose;

const userChatSchema = new Schema({
  userId: { type: String, required: true },
  chats: [{
    chatId: { type: String, required: true },
    title: { type: String, required: true },
    createdAt: { type: Date, default: Date.now }
  }]
});

module.exports = mongoose.models.UserChats || mongoose.model('UserChats', userChatSchema);

Backend API Endpoints

POST /api/chats: Creates a new chat and stores it in MongoDB.
GET /api/userChats: Retrieves the list of chats for a specific user.
GET /api/chats/:id: Retrieves a specific chat by ID.
PUT /api/chats/:id: Updates a chat with new messages.

Deployment to Hostinger VPS

The application is deployed to a Hostinger VPS server using Git. The backend server is started using PM2 for process management.

Conclusion

This tutorial demonstrates building a comprehensive, full-stack AI chat application. It highlights using various technologies for different aspects of the application, from frontend development to backend API creation, database integration, and deployment.

Discover content by category