Introduction

Welcome to the Appbox Documentation
We're excited to announce that the frontend for Appbox is now open-sourced at GitHub. Our aim is to foster a collaborative community that contributes to documentation, develops new frontend features, and helps improve the overall Appbox experience.

While our documentation is still in the early stages, we're working to build a comprehensive resource similar to other platforms in our space. Currently, our docs primarily focus on contribution guidelines, but we plan to expand with detailed information for all apps available on Appbox.

Until our documentation grows more robust, please visit our legacy knowledge base for immediate questions about specific apps or services. If you need technical support, you can submit a ticket for assistance. You can always access these new docs via the link in our site's footer to check our progress as we expand.

Future Plans

• In-Depth App Guides
  Covering installation, troubleshooting, and tips for each of the apps supported on our platform.
• User & Developer Resources
  Providing everything from beginner-friendly tutorials to advanced code references for customizing your Appbox experience.
• Community-Driven Content
  Encouraging pull requests, feedback, and suggestions—all are welcome and help grow this project for everyone.

Getting Started

If you want to check out or contribute to our open-sourced frontend code, clone the Appbox repository:

git clone https://github.com/appbox-co/appbox.git

Then navigate into the project and install its dependencies:

cd appbox
pnpm install
pnpm dev

Your local instance will be available at http://localhost:3000. Feel free to explore, make changes, and create pull requests. We appreciate every contribution!

Development Tools

Linting

The project comes with comprehensive linting setup using ESLint with TypeScript and Prettier integration. This ensures consistent code style and helps catch common errors early. You can run the linting checks manually:

# Run linting
pnpm lint
 
# Fix automatically fixable issues
pnpm lint:fix

Our ESLint configuration includes:

• TypeScript-specific rules via @typescript-eslint
• Next.js specific linting with eslint-config-next
• Code formatting with Prettier integration

Pre-commit Hooks

We use Husky to manage Git hooks, which helps ensure only quality code is committed to the repository. The following hooks are set up:

• pre-commit: Runs lint:fix before each commit to ensure code quality
• commit-msg: Uses commitlint to enforce conventional commit message formatting

This means your commits will be checked for code quality and proper formatting automatically before they're accepted, maintaining a high standard throughout the codebase.

Making Pull Requests

When you're ready to contribute your changes, follow these guidelines to make your Pull Request (PR) more likely to be accepted:

Before Creating a PR

1. Rebase from the latest main branch to avoid merge conflicts:

   git checkout main
   git pull origin main
   git checkout your-branch
   git rebase main

   Copy

2. Ensure all linting passes:

   pnpm lint:fix

   Copy

3. Make sure your code works locally by testing the relevant functionality.

PR Guidelines

1. Keep PRs focused - Address one issue or feature per PR.
2. Write clear commit messages - Following the conventional commit format.
3. Include clear descriptions - Explain what your PR does and why it's needed.
4. Add tests - Where applicable, add tests to verify your changes work correctly.
5. Document your code - Use comments for complex logic and ensure function names are descriptive.
6. Follow existing patterns - Your code should match the style and patterns used in the rest of the codebase.

For significant changes, consider opening an issue first to discuss the approach before investing time in coding. This helps ensure your contribution aligns with the project's direction and avoids wasted effort.