ARIA Lab Website

Official website of the ARIA (Align Robust Interactive Autonomy) Lab
A static frontend web app built using Vite.

• Live Site: https://aria-lab.cs.utah.edu/

Management Guide

• Data: Update the Google Sheet to refresh site data (Google Sheet is configured in .env).
• Deploy: On each commit, the site is automatically redeployed; alternatively, re-run all jobs for the latest deployment in the Actions tab.

For more detailed information, please ask to Seongil Heo.

Tech Stack

• Frontend: React, Vite, TailwindCSS
• CI/CD: GitHub Actions (Static build & GitHub Pages deployment)
• Data Source: Google Spreadsheet → JSON transformation script

Project Structure

├── .github/workflows/      # GitHub Actions CI/CD workflows
├── README.md               # Project documentation
├── index.css               # TailwindCSS global styles
├── index.html              # HTML entry point for Vite
├── package-lock.json       # Auto-generated lockfile for npm dependencies
├── package.json            # Project metadata and dependencies
├── vite.config.js          # Vite build and server configuration
├── public/                 # Static assets served directly
│   ├── 404.html                # Custom 404 page for GitHub Pages
│   ├── manifest.json           # PWA manifest
│   ├── robots.txt              # Web crawler rules
│   └── images                  # Image folders
│       ├── placeholder.png         # Default placeholder image
│       ├── photos/                 # Gallery images
│       ├── people/                 # Member profile images
│       ├── publications/           # Publication figures
│       └── videos/                 # Video preview thumbnails
├── scripts                 # Utility scripts
│   ├── download-images.js      # Script to download images from URLs in JSON data
│   └── fetch-sheet.js          # Script to fetch and convert Google Sheet to JSON
└── src/                    # Source code
    ├── App.jsx             # App wrapper component
    ├── main.jsx            # App entry point for rendering
    ├── components/         # Reusable UI components
    ├── data/               # Preprocessed JSON data files
    ├── icons/              # Custom SVG icons
    ├── layout/             # Shared layout elements (Header, Footer, etc.)
    ├── pages/              # Route-specific page components
    └── routes/             # App route definitions

Features

• Responsive layout
• Google Spreadsheet data integration (npm run fetch-sheet && download-image)
• GitHub Pages auto-deployment
• Environment variable configuration via .env
• Client-side routing with React Router
• Custom 404 handling on GitHub Pages (static-hosting limitation)

GitHub Actions Deployment

The .github/workflows/deploy.yaml workflow performs:

• Reads .env upon push to main
• Runs npm run fetch-sheet to convert spreadsheet to JSON
• Runs npm run download-images to download images from Google Drive
• Builds static site via npm run build
• Deploys to GitHub Pages

Based on Vite’s static deployment guide

License

This project is licensed under the MIT License.