Skip to Content
IntroductionGeneralProjects

Projects

Detailed explanation of what each project group does and what they are used/responsible for.

In this section, we’ll explore the structure and components that make up our project. Understanding the project layout is crucial for developers working within Akinon’s frontend ecosystem.

Packages

Our project is organized into various packages, each designed for a specific purpose. Here’s an overview of the main packages:

app-client and app-shell

Located under the packages directory, app-client and app-shell are fundamental to our micro frontend architecture:

  • app-client: Contains the code for our AppClient library, which facilitates seamless communication between micro frontend applications and their parent main applications.

  • app-shell: Hosts the AppShell library code, which resides within main applications and manages essential functions like data sharing, actions, and logic between micro frontend applications and the main application.

  • app-shared: Contains shared types and utilities used by app-client and app-shell packages.

cli

The cli directory contains our Command-Line Interface (CLI) tools, which simplify the creation and management of frontend projects by automating setup and essential tasks.

eslint-config

In the eslint-config directory, you’ll find our custom ESLint configurations, designed to maintain high code quality and consistency across our projects.

typescript-config

The typescript-config directory provides various TypeScript configurations tailored for different environments and frameworks like Astro, Next.js, Vite, and React libraries.

ui/**

Our UI components and libraries are organized under the ui directory within packages/ui/*. These components form the foundation of our frontend applications, ensuring visual consistency and usability.

Applications

Alongside our packages, our frontend ecosystem includes several applications:

docs-next

The docs-next directory hosts the source code for this documentation site, built using Next.js.

To run the documentation site, use the following command.

pnpm run dev --filter @akinon/docs

storybook

The storybook directory shows all possible usage scenarios of various components. Storybook allows you to test components independently from the main application.

To run Storybook, use the following command.

pnpm run dev --filter @akinon/storybook

Playground App

We have a playground app where you can experiment with our UI components and libraries. You can access the playground project at this repository .

ArchitectureTesting