A modern healthcare web application designed for tracking meals, exercise, and personal records. Built with Next.js, Material UI, and Tailwind CSS.

• Node.js: >= 20.0.0
• pnpm: >= 9.0.0
• Docker: Optional (for containerized execution)

# Install dependencies
pnpm install

# Run local development server
pnpm dev
# The app will be available at http://localhost:3000

# Build the application
pnpm build

# Start the production server
pnpm start

# Build and run with Docker Compose
docker-compose build
docker-compose up

/arent-test
├── app/                    # Next.js App Router (Pages & API)
│   ├── (dashboard)/        # Dashboard routes (Home, Columns, Record)
│   ├── api/                # Backend API Route Handlers
│   ├── globals.css         # Global styles and Tailwind imports
│   └── layout.tsx          # Root layout
├── components/             # Reusable UI Components
│   ├── common/             # Layout and Shared components
│   ├── presentation/       # Design-specific UI components
│   └── ThemeRegistry.tsx   # MUI Theme and RTL/Cache setup
├── public/                 # Static assets (images, icons, design specs)
├── hooks/                  # Custom React hooks
├── types/                  # Global TypeScript definitions
├── Dockerfile              # Multi-stage Docker setup
├── docker-compose.yml      # Docker orchestration
├── package.json            # Project manifest and scripts
└── tsconfig.json           # TypeScript configuration

• Frontend: Next.js (App Router) using TypeScript.
• UI Framework: Material UI (MUI) v7 for robust component design.
• Styling: Tailwind CSS v4 for utility-first styling and layout.
• Data Fetching: Next.js Route Handlers (/app/api) providing mock JSON data for various features.
• Persistence: Currently using simulated JSON data; prepared for PostgreSQL/Supabase integration.
• Containerization: Optimized Docker environment with hot-reload support for development and lightweight builds for production.

• Top Page: Meal history tracker with filtering and "Load More" functionality.
• My Record Page: Interactive health charts, exercise logs, and personal diary with pagination.
• Column Page: Curated health articles and recommendations.
• Responsive Design: Fully optimized for mobile, tablet, and desktop views.