@tony-ai-champ/chatbot-web-frontend

AIPA Frontend Documentation

Overview

This is a Next.js project that serves as the frontend for the AIPA (AI Personal Assistant) application. It's built with React, TypeScript, and uses Tailwind CSS for styling.

Project Structure

The project follows a typical Next.js structure:

• /app: Contains the main application components and pages
• /public: Static assets
• /styles: Global CSS styles
• /services: API and other service functions
• /types: TypeScript type definitions

Key Files

• package.json: Defines project dependencies and scripts
• next.config.mjs: Next.js configuration
• tailwind.config.ts: Tailwind CSS configuration
• tsconfig.json: TypeScript configuration
• Dockerfile: Instructions for building the Docker image

Setup and Running

1. Install dependencies:

   npm install
   

2. Run the development server:

   npm run dev
   

3. Open http://localhost:3000 in your browser to see the result.

Environment Variables

The project uses environment variables for configuration. Ensure you have a .env.local file with the necessary configurations.

Required variables: NEXT_PUBLIC_AIPA_API_URL (url of the API).

Deployment

The project can be deployed using Docker:

1. Build the Docker image:

   docker build -t aipa-frontend .
   

2. Run the Docker container:

   docker run -p 3000:3000 aipa-frontend
   

Configuration

The project uses a centralized configuration file for managing application-wide settings. This file is located at:

export const config = {
  appName: "AIPA",
  title: "AI Personal Assistant",
  description: "Your intelligent personal assistant powered by AI",
  // Add more configuration settings as needed
};

These settings are used throughout the application to maintain consistency and make it easier to update global values.

Styling

The project uses Tailwind CSS for styling. The configuration can be found in:

import type { Config } from "tailwindcss";

const config: Config = {
  content: [
    "./pages/**/*.{js,ts,jsx,tsx,mdx}",
    "./components/**/*.{js,ts,jsx,tsx,mdx}",
    "./app/**/*.{js,ts,jsx,tsx,mdx}",
  ],
  theme: {
    extend: {
      backgroundImage: {
        "gradient-radial": "radial-gradient(var(--tw-gradient-stops))",
        "gradient-conic":
          "conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))",
      },
    },
  },
  plugins: [],
};