01Cloud UI

A React-based frontend for the 01Cloud platform. This application provides the user interface for managing organizations, projects, applications, environments, clusters, billing, support workflows, and related day-to-day cloud operations.

---

Table of Contents

• Overview
• Key Features
• Tech Stack
• Getting Started
• Runtime Configuration
• Available Scripts
• Docker and Make Targets
• Testing and Code Quality
• Project Structure
• Contributing
• Security
• License

---

Overview

01cloud is a frontend app written primarily in React, TypeScript, and JavaScript. It integrates with the 01Cloud backend APIs and websocket endpoints to support workflows such as:

• Authentication
• Organization and Project management
• Application and Environment lifecycle management
• Cluster provisioning and infrastructure visibility
• CI/CD, Logs, Monitoring, and Alerts
• Billing and payment flows
• Support ticketing and Notifications

The repository also includes unit tests, linting, Docker targets, issue templates, pull request templates, and pre-commit automation to support collaborative open source development.

---

Key Features

• Multi-area product UI spanning projects, apps, environments, clusters, organizations and notifications.
• Runtime-configurable frontend endpoints loaded through public/config.js.
• Redux and saga based state management across major application modules.
• Internationalization support with locale resources under src/locales/.
• Extensive component and page-level test coverage using Jest and React Testing Library.
• Contributor safeguards through pre-commit, codespell, gitleaks, YAML validation, and stylelint.

---

Tech Stack

• React 16
• TypeScript and JavaScript
• React Router v5
• Redux and Redux Saga
• Material-UI v4
• Jest, Enzyme, and React Testing Library
• react-scripts

---

Getting Started

Prerequisites

Make sure you have the following installed:

• Node.js 12+ recommended for compatibility with the current Dockerfile and dependency set
• npm
• Docker (optional, for containerized lint/test/build workflows)
• pre-commit (optional, but recommended for contributors)

Installation

1. Clone the repository.
2. Install dependencies:

npm install

3. Create the runtime config file used by the app shell:

cp public/config.sample.js public/config.js

4. Review and update the values in public/config.js for your environment.
5. Start the development server:

npm start

The app will usually be available at http://localhost:3000.

---

Runtime Configuration

This project loads runtime settings from public/config.js, which is included by public/index.html before the React application boots.

Typical values include:

• API base URL
• websocket endpoint
• OAuth provider endpoints and client IDs
• reCAPTCHA site key
• payment provider URL
• message origin URL

Recommended practices:

• Treat public/config.js as environment-specific configuration.
• Do not commit production secrets or sensitive values.
• Prefer safe placeholder values in sample files.
• Keep public/config.sample.js as the template contributors can copy locally.

---

Available Scripts

The following npm scripts are defined in package.json:

• npm start: Run the development server.
• npm run build: Create a production build.
• npm test: Run the test suite.
• npm run test:coverage: Run tests with coverage output.
• npm run lint: Run ESLint against src/**/*.js.
• npm run lint:fix: Run ESLint with autofixes.
• npm run generate-build-meta: Generate build metadata using react-clear-cache.

---

Docker and Make Targets

The repository includes a multi-stage Dockerfile and a small Makefile.

Use Docker targets directly:

docker build . --target lint
docker build . --target test
docker build . --target build

Or use the provided Make targets:

make lint
make unit-test

---

Testing and Code Quality

Before opening a pull request, it is a good idea to run the core checks locally:

npm run lint
npm run test -- --watchAll=false
npm run test:coverage

This repository also includes a pre-commit configuration with checks such as:

• YAML validation
• large file detection
• codespell
• gitleaks secret scanning
• stylelint for CSS/SCSS files

To enable the hooks locally:

pre-commit install
pre-commit run --all-files

---

Project Structure

A simplified view of the repository:

.
|-- .github/                 # GitHub workflows, issue templates, PR template
|-- public/                  # Static assets and runtime config template
|-- src/
|   |-- components/          # Reusable UI components
|   |-- containers/          # App-level containers and route wrappers
|   |-- constants/           # Shared constants and route definitions
|   |-- helpers/             # Utility helpers
|   |-- locales/             # i18n translation resources
|   |-- models/              # Frontend data models
|   |-- pages/               # Feature and route-level pages
|   |-- redux/               # Store setup
|   |-- services/            # API/service integrations
|   |-- test/                # Unit and integration-style tests
|   `-- theme/               # Theming and UI overrides
|-- Dockerfile
|-- Makefile
|-- package.json
`-- README.md

---

Contributing

Contributions are welcome! Please read the Contributing Guidelines before submitting a pull request. By participating in this project, you agree to abide by its terms.

If you have an idea, found a bug, or want to improve the project:

1. Fork the repository
2. Create a feature branch (git checkout -b feature/your-feature)
3. Commit your changes (git commit -m 'Add your feature')
4. Push to your branch (git push origin feature/your-feature)
5. Open a Pull Request

---

Security

If you discover a security vulnerability, please do not open a public issue. Instead, refer to our Security Policy for responsible disclosure instructions.

---

License

This project is licensed under the Apache 2.0 License.

Copyright © 2026 BerryBytes and 01cloud-ui contributors.