Brand Color Demo

Select a color:

EatlyPOS Documentation
v1.0.0Back to Dashboard

Adding Features

Learn how to add custom features and modules to EatlyPOS.

Overview

EatlyPOS is designed to be extensible, allowing you to add custom features and modules to meet your specific business needs. This guide will walk you through the process of adding new features to your EatlyPOS installation.

Project Structure

Before adding new features, it's important to understand where different components should be placed:

src/
  ├── app/              # Next.js app router pages
  ├── components/       # Reusable React components organized by feature
  ├── contexts/         # React context providers and state management
  ├── data/             # Data files and mock data
  ├── styles/           # Global styles and theme configuration
  ├── types/           # TypeScript type definitions
  └── utilities/       # Utility functions and helpers

Adding a New Feature

To add a new feature to EatlyPOS, follow these steps:

// src/components/my-feature/my-component.tsx
import { Box } from "@radix-ui/themes"

export function MyComponent() {
  return (
    <Box>
      {/* Your component content */}
    </Box>
  )
}

Adding a New Feature

To add a new feature to EatlyPOS, follow these steps:

1. Create Feature Directory

Start by creating a new directory in the src/features folder for your feature:

mkdir src/features/my-feature

2. Create Feature Components

Create the necessary components for your feature. Follow this basic structure:

// src/components/my-feature/my-component.tsx
import { Box } from "@radix-ui/themes"

export function MyComponent() {
  return (
    <Box>
      {/* Your component content */}
    </Box>
  )
}

3. Add Feature Route

Create a new route for your feature in the appropriate section of the app:

// src/app/(default)/my-feature/page.tsx
import { MyFeature } from "@/components/my-feature"

export default function MyFeaturePage() {
  return <MyFeature />
}

Remember to follow the existing code style and patterns when adding new features. Use Radix Theme components for UI elements and maintain consistent file naming conventions.

Best Practices

When adding new features, keep these guidelines in mind:

  • Use TypeScript for type safety and better development experience
  • Follow the existing project structure and naming conventions
  • Utilize Radix Theme components for consistent UI
  • Write unit tests for critical functionality
  • Keep components modular and reusable
  • Document your code and update relevant documentation

Contributing

If you've developed a feature, consider contributing it back to the main project:

  • Fork the repository
  • Create a new branch for your feature
  • Submit a pull request with a clear description of your feature
  • Include documentation and tests