Project Structure

EatlyPOS follows a modular and organized structure to maintain scalability and developer-friendly codebase. Here's an overview of the main directories and their purposes.

Root Directory Structure

src/

Main source code directory containing all application code

public/

Static assets like images, fonts, and other public files

package.json

Project dependencies and scripts

next.config.mjs

Next.js configuration

tailwind.config.js

Tailwind CSS configuration

jsconfig.json

JavaScript configuration with path aliases

Source Directory (src/)

app/

Next.js App Router directory containing all pages and layouts

components/

Reusable React components organized by feature

contexts/

React context providers and state management

data/

Data files and mock data

hooks/

Custom React hooks for reusable logic

styles/

Global styles and theme configuration

types/

TypeScript type definitions

utilities/

Utility functions and helpers

App Directory (src/app/)

(default)/

Default layout pages including dashboard and settings

(pos)/

Point of Sale system pages with minimal layout

auth/

Authentication related pages (login, register)

docs/

Documentation pages with specialized layout

globals.css

Global CSS imports (Tailwind, Radix UI, Date Range), CSS variables for theming, and dark mode support

layout.tsx

Root layout with theme providers (next-themes, Radix UI), font configuration, and global providers (Toaster, LoadingProgressBar)

not-found.tsx

Custom 404 page component

Components Directory (src/components/)

admin-settings/

Administrative settings components

common/

Shared components used across multiple features

inventory/

Inventory management components

loyalty-program/

Customer loyalty program components

menu-management/

Menu and product management components

purchasing/

Purchase order and supplier management

sales/

Sales reporting and analytics components

waste-management/

Waste tracking and management components

Important Files

These are the key files that developers commonly work with:

Layout & Navigation

src/app/layout.tsx

Root layout with theme providers, global styles, and metadata

src/app/(default)/layout.tsx

Default layout with sidebar navigation and top bar

src/app/(pos)/layout.tsx

POS layout with minimal UI and full viewport

src/components/common/Sidebar.tsx

Main navigation sidebar component

src/components/common/TopBar.tsx

Top navigation bar with user menu and actions

Styling & Theme

src/app/globals.css

Global CSS imports (Tailwind, Radix UI, Date Range), CSS variables for theming, and dark mode support

src/styles/custom.css

Custom styles and overrides

tailwind.config.js

Tailwind CSS configuration

Core Configuration

src/app/layout.tsx

Root layout with theme providers (next-themes, Radix UI), font configuration, and global providers (Toaster, LoadingProgressBar)

src/contexts/auth-context.tsx

Authentication and user session management

src/utilities/chartOptions.ts

ApexCharts default configuration and themes