---
title: AndesOps AI Frontend
emoji: 💼
colorFrom: purple
colorTo: blue
sdk: docker
app_port: 7860
startup_duration_timeout: 20m
---

# AndesOps AI - Frontend

Complete platform for real-time intelligence on Chilean public procurement market (Mercado Público).

## ✨ Features

### 🔍 **Tender Discovery**
- Search across all active tenders
- Filter by keyword, buyer, region, status, date
- **Compra Ágil** (Agile Purchase) real-time scraping
- Tender code search
- Advanced filtering options

### 📊 **Market Monitor**
- Real-time purchase orders (Órdenes de Compra)
- Filter by status (Enviada, En Proceso, Aceptada, Cancelada)
- Live streaming of government procurement
- Amount tracking in CLP currency

### 🤖 **AI-Powered Analysis**
- Tender suitability analysis for your company
- Proposal draft generation
- Market insights and recommendations
- Chat with AI agents about tenders
- Historical analysis tracking

### 👤 **Company Profile**
- Define your company's capabilities
- Track certifications and experience
- Manage service offerings
- Regional focus management

### 📈 **Reports & History**
- Analysis history tracking
- Tender portfolio management
- Market trend insights
- Save favorite tenders

### 🌐 **Global Sync**
- Real-time database synchronization
- Latest market data pulls
- Auto-updated tender database

## 🔧 Architecture

- **Framework**: Next.js 14.2.5 + React 18
- **Styling**: Tailwind CSS 3.4.4
- **Language**: TypeScript 5.6.3
- **Backend Integration**: RESTful API to FastAPI backend

## 🚀 Quick Start

The frontend **automatically detects** your environment:

- **Local Dev**: Uses `http://localhost:8000`
- **Hugging Face Spaces**: Auto-connects to backend space
- **Production**: Uses environment variables

No manual configuration needed! ✨

## 🔌 Backend Integration

- Connects to: `https://{username}-andesai-backend.hf.space`
- Auto-detection based on hostname
- Full CORS support
- Real-time data sync

## 📦 Tech Stack

- **UI Framework**: Next.js 14 (App Router)
- **Styling**: Tailwind CSS + PostCSS
- **Type Safety**: TypeScript
- **Data Fetching**: Fetch API + React Hooks
- **State Management**: React Hooks (useState, useContext)

## 🎨 UI Components

- Premium glass-morphism design
- Dark theme with purple/cyan accent
- Responsive grid layouts
- Real-time data tables
- Modal dialogs for details
- Brand loader animations
- Mobile-optimized

## 📊 Main Screens

1. **Dashboard** - Overview of market activity
2. **Tender Search** - Discover opportunities
3. **Market Monitor** - Watch purchase orders
4. **Company Profile** - Setup & manage
5. **Agent Analysis** - AI-powered insights
6. **Reports** - Generate analyses
7. **History** - Track your activity

## 🔐 Data Privacy

- Local storage for user preferences
- Company profile stored server-side
- No sensitive data in localStorage
- HTTPS communication

## 🌟 For Hackathon

- 🏆 Part of **lablab AI + AMD Developer Hackathon**
- 🎯 Optimized for Hugging Face Spaces
- ⚡ Fast, responsive, production-ready
- 📱 Mobile-friendly interface

## 🚦 Status

- ✅ Frontend fully functional
- ✅ Real-time data integration
- ✅ AI-powered features working
- ✅ Complete market intelligence platform

---

**Want to give it a 👍 like?** Every like helps us win the hackathon! 🚀