Skip to content

raids-lab/crater-frontend

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

🌋 Crater Frontend

Crater is a Kubernetes-based GPU cluster management system providing a comprehensive solution for GPU resource orchestration.


Jupyter Lab

Ray Job

Monitor

Models

🛠️ Environment Setup

Note

Install Node.js and Pnpm: Official Download

Ensure you have Node.js and pnpm installed. We recommend using nvm for Node.js version management.

Verify installations:

node -v  # Should show v22.x or higher
pnpm -v   # Should show v10.x or higher

💻 Development Guide

Project Configuration

For VS Code users:

  1. Import .vscode/React.code-profile via Profiles > Import Profile
  2. Install recommended extensions

For other IDEs, manually configure:

  • Prettier
  • ESLint
  • Tailwind CSS IntelliSense

Clone and initialize:

git clone https://github.com/raids-lab/crater-frontend.git
cd crater-web-frontend
pnpm install

Create .env.development with:

VITE_API_BASE_URL="http://localhost:8098/"
VITE_USE_MSW=false  # Enable API mocking
PORT=5180           # Dev server port

Start development server:

make run

Core Technologies 🚀

  • Language: TypeScript
  • Framework: React 19
  • State Management: Jotai
  • Data Fetching: TanStack Query v5
  • Styling: Tailwind CSS
  • UI Libraries:
    • shadcn/ui (headless components)
    • Flowbite (Tailwind templates)
    • TanStack Table (headless tables)

API Mocking 🧪

Use MSW for API simulation during development:

  1. Set VITE_USE_MSW=true in .env.development
  2. Add handlers in src/mocks/handlers.ts

Dependency Management 📦

Check updates:

pnpm outdated

Update dependencies:

pnpm update       # Minor updates
pnpm update --latest  # Major updates (use cautiously)

Update shadcn components:

for file in src/components/ui/*.tsx; do
  pnpm dlx shadcn-ui@latest add -y $(basename "$file" .tsx)
done

🚀 Deployment

pnpm build

📁 Project Structure

src/
├── components/           # Reusable components
│   ├── custom/           # Custom components
│   ├── layout/           # App layouts
│   └── ui/               # shadcn components
├── hooks/                # Custom hooks
├── lib/                  # Utilities
├── pages/                # Route-based pages
│   ├── Admin/            # Admin interfaces
│   ├── Portal/           # Job management
│   └── ...               # Other sections
├── services/             # API services
├── stores/               # State management
├── types/                # TypeScript types
└── ...

🐛 Known Issues

  1. Dark Mode Input Styling: Browser autofill causes white backgrounds in dark mode (TailwindCSS#8679)

About

Crater Frontend is the web frontend of Crater System.

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

 
 
 

Contributors 13