Phoenix Frontend is built with TypeScript and leverages yarn workspaces for package management. You'll find multiple packages in the /packages directory, each serving a unique function in the overall application ecosystem. The project is optimized with Turborepo for efficient monorepo management.
Our UI package is an MUI-based UI kit, providing reusable components and styles in line with Material Design principles. It ensures a uniform and appealing visual experience across the app.
The State package focuses on state management, incorporating zustand along with its actions to optimally manage and update the app's data based on user interactions and other events.
Housing a range of utility and helper functions, the Utils package offers a one-stop-shop for common tasks like data manipulation, date formatting, string handling, and network calls.
As the heart of the application, the Core package orchestrates the UI, state management, and utility functions. It's built on Next.js 15 and serves as the primary entry point, setting the architectural groundwork and facilitating inter-package interactions.
The Contracts package provides generated contract classes and associated types, created through Soroban bindings. For more information, refer to Soroban's documentation.
The Types package contains TypeScript type definitions used throughout the Phoenix Frontend ecosystem, ensuring type consistency across all packages.
The Strategies package serves as a strategy provider registry for the Phoenix DeFi ecosystem, offering modular and extensible strategy implementations.
The easiest way to get started is to use the provided setup script:
./setup.shThis script will:
- Check for the correct Node.js version
- Create a local environment file
- Install dependencies
- Build the required packages
This project uses Turborepo for efficient monorepo management. It optimizes builds, provides incremental builds, and manages dependencies between packages.
# Install dependencies
yarn install
# Start development with watch mode for all packages
yarn dev
# Run only the core app (Next.js)
yarn dev:core
# Run experimental features (if available)
yarn dev:experimental
# Run only the UI package development
yarn dev:ui
# Build all packages
yarn build
# Build specific packages
yarn build:core # Build the core Next.js app
yarn build:contracts # Build the contracts package
yarn build:state # Build the state package
yarn build:ui # Build the UI package
yarn build:utils # Build the utils package
yarn build:types # Build the types package
yarn build:strat # Build the strategies package
# Run Storybook for the UI package
yarn storybookWhen you run yarn dev, Turborepo will:
- Build all necessary dependencies in the correct order
- Start watch mode for all packages, rebuilding them when files change
- Start the Next.js development server for the core package
This means you can edit files in any package, and changes will automatically be reflected in the running application without manual rebuilds.
/packages/core- Next.js application (main entry point)/packages/ui- UI component library based on Material UI/packages/state- State management with Zustand/packages/utils- Utility functions/packages/types- TypeScript type definitions/packages/contracts- Generated Soroban contract bindings/packages/strategies- Strategy provider registry for Phoenix DeFi/schemas- JSON schemas for project configuration
- Node.js (version specified in .nvmrc)
- Yarn package manager
- Git
Questions, feedback, or suggestions? Feel free to connect with our dev team via GitHub Issues. We value your input!