A React-based web application for HPC (High-Performance Computing) cluster management at National Yang Ming Chiao Tung University (NYCU).
Clustron Frontend provides a comprehensive web portal for managing computational groups, submitting jobs to SLURM-based clusters, configuring SSH keys, and administering role-based access control.
- Group Management: Create and manage computational groups with hierarchical roles (Owner, TA, Student, Auditor)
- Job Submission: Submit and monitor batch jobs on HPC clusters via SLURM integration
- User Settings: Configure profiles, SSH keys, and login method bindings
- Administration: Configure role access levels and system-wide permissions
- OAuth Authentication: Support for NYCU Portal and Google login
- Internationalization: Full support for English and Traditional Chinese
| Technology | Purpose |
|---|---|
| React | UI framework |
| TypeScript | Type-safe development |
| Vite | Build tool and dev server |
| Tailwind CSS | Styling |
| React Router | Client-side routing |
| TanStack Query | Server state management |
| ShadCN | Component library |
| react-hook-form + zod | Form validation |
| react-i18next | Internationalization |
- Node.js 23 or higher
- npm (comes with Node.js)
# Clone the repository
git clone https://github.com/NYCU-SDC/clustron-frontend.git
cd clustron-frontend
# Install dependencies
npm install
# Start development server
npm run devThe application will be available at http://localhost:5173.
| Command | Description |
|---|---|
npm run dev |
Start Vite dev server with hot module replacement |
npm run build |
TypeScript compilation + production build |
npm run lint |
Run ESLint code analysis |
npm run preview |
Preview production build locally |
src/
├── components/ # Reusable UI components
│ ├── auth/ # Authentication components
│ ├── group/ # Group management components
│ ├── setting/ # Settings components
│ └── ui/ # Base UI components (Radix)
├── pages/ # Route-level pages
│ ├── layouts/ # Layout wrappers
│ ├── group/ # Group pages
│ ├── job/ # Job pages
│ ├── setting/ # Settings pages
│ └── admin/ # Admin pages
├── locales/ # i18n translations (en.json, zh.json)
├── lib/ # Utilities and API requests
├── hooks/ # Custom React hooks
├── types/ # TypeScript type definitions
├── App.tsx # Route configuration
└── main.tsx # Application entry point
The project uses GitHub Actions for CI/CD with three deployment environments:
- Snapshot: Ephemeral PR preview environments at
pr-N.clustron.sdc.nycu.club - Dev: Persistent development environment at
dev.clustron.sdc.nycu.club - Stage: Staging environment deployed on version tags
Docker images are published to nycusdc/clustron-frontend on Docker Hub.
Each deployment runs through quality gates:
- Lint: ESLint code analysis
- Format: Prettier formatting check
- Build: TypeScript compilation and Vite build
- Docker: Build and push container image
- Deploy: Trigger n8n webhook for orchestration
The project enforces code quality through:
- ESLint: Linting with React, TypeScript, and TanStack Query rules
- Prettier: Automatic code formatting
- Husky: Pre-commit hooks for automated formatting
- TypeScript: Strict type checking
The backend server URL is configured through environment variable.
.env
VITE_BACKEND_BASE_URL=https://api.dev.clustron.sdc.nycu.club
- Create a feature branch from
main - Make your changes with appropriate tests
- Ensure all quality checks pass (
npm run lint,npm run build) - Submit a pull request - a snapshot environment will be automatically deployed
- After review and merge, changes deploy to the dev environment
This project is maintained by NYCU Software Development Club (NYCU-SDC).
The application uses a sophisticated multi-environment deployment strategy with n8n webhook orchestration for domain management and Discord notifications. The frontend communicates with a separate backend API for all data operations. The project emphasizes accessibility through Radix UI primitives and maintains comprehensive internationalization support.
Pages you might want to explore: