Understanding project structure

A well-organized project structure is the foundation of a scalable and maintainable application. This guide will walk you through the recommended architecture for LegionEdge projects.

The Root Directory

When you start a new project, you'll typically find these key files and folders in the root directory:

• src/: Contains the main source code of your application.
• public/: Static assets like images, fonts, and icons that don't need processing.
• package.json: Your project's dependencies and scripts.
• legionedge.config.js: Configuration file specific to the LegionEdge platform.
• .env: Environment variables (do not commit this file!).

Inside the src Directory

The src directory is where you'll spend most of your time. A typical structure looks like this:

components/

Reusable UI components. It's often helpful to organize these into subfolders (e.g., ui/, layout/, forms/).

pages/ or app/

Depending on your framework (like Next.js), this folder defines your application's routing. Each file or folder represents a specific route or view.

lib/ or utils/

Utility functions, API clients, and helper methods that are used across multiple components.

styles/

Global CSS files, design tokens, or utility classes.

hooks/

Custom React hooks (if using React) for encapsulating reusable logic.

Best Practices

• Keep It Modular: Break your code down into small, focused modules.
• Group by Feature: Consider organizing files by feature rather than by type (e.g., a user/ folder containing the component, hook, and API functions for user-related tasks).
• Consistent Naming: Adopt a consistent naming convention for files and folders (e.g., camelCase or kebab-case).

Conclusion

While there's no single "perfect" structure, adhering to these guidelines will help your team navigate the codebase easily as your application grows.