GovOpps Dashboard

A modern React-based dashboard for browsing, filtering, and managing government opportunity data from the GovOpps API. Features AI-powered scoring, advanced filtering, and application tracking.

🚀 Features

Real-time Data: Fetches opportunities from the GovOpps backend API
AI-Powered Insights: View AI scoring and detailed analysis for each opportunity
Advanced Filtering: Filter by score, agency, keywords, and application status
Smart Search: Search across titles and descriptions
Application Tracking: Mark opportunities as applied and track your progress
Detailed View: Modal with complete opportunity details, contacts, and AI analysis
Responsive Design: Modern, mobile-friendly interface with dark theme
Pagination: Efficient handling of large datasets
Live Updates: Real-time refresh functionality

📋 Prerequisites

Node.js (v16 or higher)
GovOpps Backend API running on localhost:9000 (see govopps)
Modern web browser

🛠️ Installation

1. Clone and Install

git clone <your-repo-url>
cd govopps-dash
npm install

2. Start Development Server

npm run dev

The dashboard will be available at http://localhost:3001

3. Build for Production

npm run build
npm run preview

🔧 Configuration

Backend API Connection

The dashboard connects to your GovOpps backend API via a proxy configuration in vite.config.js:

server: {
  port: 3001,
  proxy: {
    '/api': {
      target: 'http://localhost:9000',
      changeOrigin: true,
      rewrite: (path) => path.replace(/^/api/, '')
    }
  }
}

Make sure your GovOpps backend is running on port 9000 before starting the dashboard.

🎯 Usage

Dashboard Overview

The dashboard provides several key sections:

Header: Shows total opportunities, filtered count, and applied count
Filters Bar: Advanced filtering and search options
Opportunity Cards: Paginated list of opportunities with key information
Detail Modal: Complete opportunity information and AI analysis

Filtering Options

Search: Search opportunity titles and descriptions
Minimum Score: Filter by AI score (0-10 scale)
Agency: Filter by government agency
Sort Options: Sort by score, due date, or posted date
Show Applied: Toggle visibility of applied opportunities

Opportunity Cards

Each card shows:

Title and AI Score (color-coded: green 8+, yellow 6-7, red <6)
Agency and Description
Posted Date and Due Date (with countdown)
Contract Value (when available)
Application Status (Applied/Not Applied)
Quick Actions: Mark as applied, view details

Detailed View

Click any opportunity to see:

Complete Description and AI Analysis
Key Technologies and Differentiators
Agency Details and Points of Contact
NAICS Codes and Solicitation Numbers
Direct Links to SAM.gov
Application Management

🎨 UI Features

Color-Coded Scoring

🟢 Green (8.0+): Excellent match, high priority
🟡 Yellow (6.0-7.9): Good match, worth considering
🔴 Red (<6.0): Lower relevance

Due Date Indicators

🔴 Red: Expired opportunities
🟠 Orange: Due within 7 days
🟡 Yellow: Due within 14 days
🟢 Green: More than 14 days remaining

Application Tracking

Local Storage: Your application status is saved locally
Visual Indicators: Applied opportunities are clearly marked
Filter Toggle: Hide/show applied opportunities
Statistics: Track total applications in header

📱 Responsive Design

The dashboard is fully responsive and works on:

Desktop: Full feature experience
Tablet: Optimized layout with touch interactions
Mobile: Compact view with essential functionality

🔌 API Integration

Endpoints Used

The dashboard connects to these GovOpps API endpoints:

// Fetch opportunities with pagination
GET /api/opportunities?minScore=0&limit=100&offset=0

// Response format
{
  "count": 25,
  "total": 150,
  "opportunities": [
    {
      "id": 1,
      "source": "SAM",
      "title": "Data Pipeline Implementation",
      "aiScore": 8.5,
      "aiSummary": "High relevance for data streaming...",
      "fullAnalysis": { ... },
      "agency": "Department of Commerce",
      "dueDate": "2024-01-15T00:00:00.000Z",
      "amount": 500000,
      "url": "https://sam.gov/...",
      "rawData": { ... }
    }
  ]
}

Error Handling

Connection Errors: Shows user-friendly error messages
Loading States: Spinner animations during data fetching
Retry Logic: Refresh button to reload data
Graceful Degradation: Handles missing data fields

🛠️ Development

Available Scripts

# Start development server
npm run dev

# Build for production
npm run build

# Preview production build
npm run preview

# Lint code
npm run lint

Technology Stack

React 19: Modern React with hooks
Vite: Fast development and build tool
Tailwind CSS 4: Utility-first CSS framework
Lucide React: Beautiful SVG icons
Axios: HTTP client for API calls
date-fns: Date manipulation and formatting

File Structure

src/
├── main.jsx          # React app entry point
├── App.jsx           # Main dashboard component
├── App.css           # Custom styles
├── index.css         # Global styles and Tailwind
└── assets/           # Static assets

Key Components

App.jsx contains:

State management for opportunities and filters
API integration and data fetching
Filtering and sorting logic
Pagination implementation
Modal management
Local storage for application tracking

🐛 Troubleshooting

Common Issues

Dashboard won't load data:

# Check if backend API is running
curl http://localhost:9000/health

# Check browser console for errors
# Verify proxy configuration in vite.config.js

Styling issues:

# Rebuild Tailwind CSS
npm run dev

# Clear browser cache
# Check for console CSS errors

Build errors:

# Clear node modules and reinstall
rm -rf node_modules package-lock.json
npm install

# Check for TypeScript errors
npm run lint

Performance Tips

Pagination: Dashboard fetches data in chunks for better performance
Local Storage: Application status is cached locally
Lazy Loading: Only fetches additional data when needed
Debounced Search: Search input is optimized for performance

🚀 Deployment

Development

npm run dev

Runs on http://localhost:3001

Production Build

npm run build

Creates optimized build in dist/ folder

Deployment Options

Static Hosting (Netlify, Vercel, GitHub Pages):

npm run build
# Deploy dist/ folder

Docker:

FROM node:18-alpine
WORKDIR /app
COPY package*.json ./
RUN npm ci
COPY . .
RUN npm run build
EXPOSE 3001
CMD ["npm", "run", "preview"]

Nginx (serve static files):

server {
    listen 80;
    root /path/to/govopps-dash/dist;
    index index.html;
    
    # API proxy to backend
    location /api/ {
        proxy_pass http://localhost:9000/;
    }
    
    # Frontend routes
    location / {
        try_files $uri $uri/ /index.html;
    }
}

🔐 Security Considerations

No API Keys: All authentication handled by backend
CORS: Configured for local development
XSS Protection: React's built-in XSS protection
Local Storage: Only stores non-sensitive UI state

📊 Browser Support

Chrome: 88+
Firefox: 85+
Safari: 14+
Edge: 88+

🤝 Contributing

Fork the repository
Create a feature branch: git checkout -b feature/new-feature
Make changes and test thoroughly
Commit changes: git commit -m "Add new feature"
Push to branch: git push origin feature/new-feature
Submit a pull request

📝 License

ISC License

🆘 Support

Getting Help

Check Backend: Ensure GovOpps API is running and accessible
Browser Console: Check for JavaScript errors
Network Tab: Verify API calls are working
Documentation: Review this README and inline comments

Common Workflows

Setting up for first time:

Start GovOpps backend API on port 9000
Install dashboard dependencies: npm install
Start development server: npm run dev
Open http://localhost:3001

Daily usage:

Start backend API (if not running)
Start dashboard: npm run dev
Use filters to find relevant opportunities
Click opportunities for detailed analysis
Mark interesting opportunities as "Applied"

Troubleshooting data issues:

Click "Refresh" button in header
Check backend API logs
Verify database has opportunities data
Check browser network tab for API errors

Name		Name	Last commit message	Last commit date
Latest commit History 2 Commits
public		public
src		src
.gitignore		.gitignore
README.md		README.md
eslint.config.js		eslint.config.js
index.html		index.html
package-lock.json		package-lock.json
package.json		package.json
vite.config.js		vite.config.js

devarismeroxa/govopps-dashboard

Folders and files

Latest commit

History

Repository files navigation