phuthuycoding/registry-ui repository overview

⁠Docker Registry UI

A simple web application to manage Docker Images in Docker Registry.

⁠Features

• ✅ View Docker images list
• ✅ View image details (manifest, layers, size)
• ✅ Delete image by tag
• ✅ Delete multiple images at once
• ✅ Modern interface with Tailwind CSS and Shadcn UI

⁠Technologies Used

• React 19 - UI Framework
• TypeScript - Type safety
• Vite - Build tool
• Tailwind CSS 4 - Styling
• Shadcn UI - Component library
• Lucide React - Icons

⁠Installation

1. Clone repository:

git clone <repository-url>
cd registry-ui

1. Install dependencies:

pnpm install

1. Configure environment variables:

cp .env.example .env

Edit the .env file with your Docker Registry information:

VITE_REGISTRY_URL=http://localhost:5000
VITE_REGISTRY_USERNAME=your_username
VITE_REGISTRY_PASSWORD=your_password

1. Run the application:

pnpm dev

The application will run at http://localhost:3001

⁠Usage

1. View images list: Home page displays all images in the registry
2. View details: Click "Details" button to view manifest and layers information
3. Delete image: Click delete button to delete an image
4. Delete multiple images: Select checkboxes and click "Delete" to delete multiple images

⁠Project Structure

src/
├── components/          # React components
│   ├── ui/             # Shadcn UI components
│   ├── ImageList.tsx   # Images list
│   └── ImageDetails.tsx # Image details
├── services/           # API services
│   └── registry.ts     # Docker Registry API
├── types/              # TypeScript types
│   └── registry.ts     # Registry types
├── app/
│   └── config/         # App configuration
└── lib/
    └── utils.ts        # Utility functions

⁠Development

# Run dev server
pnpm dev

# Build production
pnpm build

# Preview production build
pnpm preview

# Lint code
pnpm lint