Skip to content

README.md

Latest commit

 

History

History
137 lines (106 loc) · 3.64 KB

README.md

File metadata and controls

137 lines (106 loc) · 3.64 KB

Proust Frontend

AI-powered chat application frontend built with React, TypeScript, and Tailwind CSS.

🚀 Quick Start

Prerequisites

  • Node.js 18+ and npm
  • Firebase project with Authentication enabled
  • Backend API running (see backend README)

Installation

  1. Install dependencies:

    npm install

  2. Set up environment variables:

    cp .env.example .env

    Edit .env and add your Firebase configuration:

    VITE_FIREBASE_API_KEY=your_firebase_api_key
VITE_FIREBASE_AUTH_DOMAIN=your_project.firebaseapp.com
VITE_FIREBASE_PROJECT_ID=your_project_id
VITE_FIREBASE_STORAGE_BUCKET=your_project.appspot.com
VITE_FIREBASE_MESSAGING_SENDER_ID=your_sender_id
VITE_FIREBASE_APP_ID=your_app_id
VITE_API_BASE_URL=http://localhost:8000

  3. Get Firebase configuration:

    • Go to Firebase Console → Project Settings → General
    • Scroll to "Your apps" → Select your web app (or create one)
    • Copy the config values to your .env file

Running the App

npm run dev

The app will be available at http://localhost:5173

🏗️ Project Structure

frontend/
├── src/
│   ├── components/
│   │   ├── ui/              # shadcn UI components
│   │   ├── auth/            # Authentication components
│   │   └── chat/            # Chat components
│   ├── hooks/               # Custom React hooks
│   ├── lib/                 # Utilities and configs
│   ├── types/               # TypeScript types
│   ├── App.tsx              # Main app component
│   ├── main.tsx             # App entry point
│   └── index.css            # Global styles
├── package.json
├── tsconfig.json
├── vite.config.ts
└── tailwind.config.js

🎨 Features

  • Firebase Authentication - Google OAuth sign-in
  • Real-time Chat - Send messages to AI and get responses
  • Modern UI - Built with shadcn/ui and Tailwind CSS
  • TypeScript - Full type safety
  • Responsive Design - Works on all devices

🔧 Available Scripts

npm run dev       # Start development server
npm run build     # Build for production
npm run preview   # Preview production build
npm run lint      # Run ESLint

🎯 Usage

  1. Open the app in your browser
  2. Click "Sign in with Google"
  3. Authenticate with your Google account
  4. Start chatting with the AI
  5. Click the trash icon to clear chat history
  6. Click the logout button to sign out

🔐 Authentication Flow

  1. User clicks "Sign in with Google"
  2. Firebase handles OAuth flow
  3. User is redirected back to app
  4. Firebase ID token is automatically included in API requests
  5. Backend verifies token and processes requests

🛠️ Tech Stack

  • React 18 - UI framework
  • TypeScript - Type safety
  • Vite - Build tool
  • Tailwind CSS - Styling
  • shadcn/ui - UI components
  • Firebase - Authentication
  • Axios - HTTP client
  • Lucide React - Icons

📝 Environment Variables

Variable Description Required
VITE_FIREBASE_API_KEY Firebase API key Yes
VITE_FIREBASE_AUTH_DOMAIN Firebase auth domain Yes
VITE_FIREBASE_PROJECT_ID Firebase project ID Yes
VITE_FIREBASE_STORAGE_BUCKET Firebase storage bucket Yes
VITE_FIREBASE_MESSAGING_SENDER_ID Firebase messaging sender ID Yes
VITE_FIREBASE_APP_ID Firebase app ID Yes
VITE_API_BASE_URL Backend API URL Yes

🚀 Building for Production

npm run build

The built files will be in the dist/ directory.

📄 License

MIT License