Cloudverse Frontend

A comprehensive cloud cost management and FinOps platform built with Next.js and TypeScript. Cloudverse helps organizations optimize multi-cloud spending, manage resources, and implement governance across AWS, Azure, GCP, and other cloud providers.

🏗️ Architecture

This is a Turborepo monorepo containing three main Next.js applications:

• FinOps (apps/finops) - Core cost management and optimization platform
• BillOps (apps/billops) - Specialized billing operations and customer management
• Identity (apps/identity) - Authentication, authorization, and user management service

🛠️ Tech Stack

Frontend

• Next.js 14 with React 18
• TypeScript (100% TypeScript codebase)
• Ant Design with custom components
• Zustand for state management
• SCSS/Sass for styling

Backend & Data

• PostgreSQL with Prisma ORM
• GraphQL (Apollo Client/Server, Nexus)
• Axios, SWR, TanStack Query for data fetching

Development & Build

• Turborepo for monorepo management
• Jest with React Testing Library
• ESLint, Prettier, Stylelint
• Docker deployment with Node.js 22

🚀 Getting Started

Prerequisites

• Node.js: 22.x or higher
• npm: 10.5.0 or higher
• PostgreSQL (for identity service)

Installation

1. Clone and install dependencies

git clone <repository-url>
cd aio-frontend
npm install

2. Set up environment variables

# Copy env files for each app
cp apps/finops/.env.example apps/finops/.env
cp apps/billops/.env.example apps/billops/.env
cp apps/identity/.env.example apps/identity/.env

3. Set up database (Identity service)

cd apps/identity
npm run migrate

Development

Start all applications:

npm run dev

Start individual applications:

# FinOps app
cd apps/finops && npm run dev

# BillOps app
cd apps/billops && npm run dev

# Identity service
cd apps/identity && npm run dev

Build

# Build all apps
npm run build

# Build specific app
cd apps/finops && npm run build

📦 Apps and Packages

Applications

• apps/finops - Core FinOps platform with cost analytics, optimization, and governance
• apps/billops - Billing operations and customer management workflows
• apps/identity - Authentication service with SSO, RBAC, and user management

Packages

• @repo/ui - Shared React component library
• Shared configs - ESLint, TypeScript, and build configurations

🔧 Development Workflow

Code Quality

• Strict TypeScript configuration
• Pre-commit hooks with Husky
• Conventional commits with Commitlint
• Automated testing with Jest

Branch Management

# Feature branches
git checkout -b feature/your-feature-name

# Bug fixes
git checkout -b fix/bug-description

🚢 Deployment

Docker

# Build image
docker build -t cloudverse-frontend .

# Run container
docker run -p 3000:3000 cloudverse-frontend

Environment Ports

• FinOps: Configurable via APP_PORT (default varies)
• BillOps: Configurable via APP_PORT
• Identity: Configurable via APP_PORT

🤝 Contributing

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

---

Built with ❤️.