Client Folder
Overview
The client folder contains the Next.js application that powers the front end of our application, generating a static site that delivers the core functionalities such as the dashboard, settings, downloads, and marketplace. This folder follows an extended version of Atomic Design, accommodating our unique components and state management needs.
We proudly adopt Brad Frost's Atomic Design (opens in a new tab) methodology to structure our UI components. This approach allows us to maintain a highly modular and scalable interface. Atomic Design helps us systematically arrange components into ions, atoms, molecules, and organisms, making our application robust and maintainable. We highly recommend exploring this methodology to appreciate how it benefits our design processes and enhances the developer experience.
Atomic Design Extended
We extend the traditional Atomic Design framework by incorporating Ions, inspired by Brad Frost's ideas on Extending Atomic Design (opens in a new tab). Ions include non-renderable components like state managers and internationalization configurations, enhancing our application's architecture.
Our implementation of atomic design incorporates:
- Ions: Non-renderable parts such as Jotai atoms, Day.js configurations for internationalization, and internal React hooks. These components form the underlying functionalities that support state management and theming across the app.
- Atoms: UI components that are the foundational building blocks of our user interface, such as buttons and input fields.
- Molecules: Composed of one or more atoms and serve as functional groupings for smaller, reusable components.
- Organisms: Complex UI components that combine multiple molecules into more significant sections of our app interface.
Special Features
- Component Design: We utilize
@mui/joy(opens in a new tab) for crafting themable and accessible UI components, with styles provided through our@captn/themepackage to ensure consistency and native feel across both core and third-party applications. - Integration: Components in the
clientfolder exclusively use utilities from thesharedfolder to maintain separation of concerns, particularly avoiding direct interactions with the Electron-specific code to prevent bundling issues.
Common Tasks
Developers working within the client folder typically engage in:
- Enhancing core functionalities like the dashboard, settings, and marketplace.
- Developing and refining internal apps that utilize our advanced search capabilities, ensuring these apps are seamlessly integrated into the overall UI.
Documentation
For more detailed information on each component within the client folder, please refer to our documentation at /captain/client/** accessible through the sidebar navigation in our main documentation portal.