Frontend Introduction

Welcome to the Klinik Gunung Health Screening System frontend documentation. This section provides a comprehensive overview of the frontend application architecture, technologies used, and development guidelines.

Technology Stack

The frontend application is built using modern web technologies to ensure scalability, maintainability, and excellent user experience:

Core Framework

• Next.js 14+ - React framework with App Router for server-side rendering and static generation
• React 18+ - Component-based UI library with concurrent features
• TypeScript - Type-safe JavaScript for better development experience

State Management & Data Fetching

• TanStack Query (React Query) - Powerful data synchronization for server state
• Zustand - Lightweight state management for client state
• React Hook Form - Performant forms with easy validation

UI & Styling

• Tailwind CSS - Utility-first CSS framework
• Radix UI - Accessible, customizable component primitives
• Lucide React - Beautiful & consistent icon library
• Tailwind Merge & clsx - Conditional className utilities

Development Tools

• ESLint - Code linting for consistent code quality
• Prettier - Code formatting
• Husky - Git hooks for pre-commit checks
• Commitlint - Conventional commit messages

Project Structure

frontend/
├── app/                    # Next.js App Router pages
│   ├── (auth)/            # Authentication routes
│   ├── (dashboard)/       # Protected dashboard routes
│   └── api/               # API routes (if needed)
├── components/            # Reusable UI components
│   ├── ui/               # Base UI components (buttons, inputs, etc.)
│   ├── forms/            # Form components
│   ├── layout/           # Layout components
│   └── providers/        # Context providers
├── hooks/                # Custom React hooks
├── lib/                  # Utility functions and configurations
│   ├── api/             # API client and queries
│   ├── utils/           # Helper functions
│   ├── validations/     # Form validation schemas
│   └── constants/       # Application constants
├── types/               # TypeScript type definitions
├── styles/              # Global styles and Tailwind config
└── public/              # Static assets

Key Features

Authentication & Authorization

• JWT-based authentication
• Role-based access control (Patient, Admin, Doctor)
• Protected routes with middleware
• Secure token management

Health Screening Management

• Patient registration and profile management
• Interactive health screening questionnaires
• Real-time form validation
• Progress tracking and status updates

Dashboard & Analytics

• Comprehensive patient dashboard
• Screening history and results
• Payment tracking
• Administrative overview panels

Responsive Design

• Mobile-first approach
• Adaptive layouts for all screen sizes
• Touch-friendly interfaces
• Optimized performance across devices

Getting Started

Prerequisites

Before starting development, ensure you have the following installed:

• Node.js 18+ - JavaScript runtime
• npm or yarn - Package manager
• Git - Version control

Installation

1. Clone the repository

   git clone <repository-url>
   cd klinik-gunung/frontend
   

2. Install dependencies

   npm install
   # or
   yarn install
   

3. Environment Setup

   cp .env.example .env.local
   

   
   Configure the following environment variables:

   NEXT_PUBLIC_API_URL=http://localhost:8000/api/v1
   NEXT_PUBLIC_APP_URL=http://localhost:3000
   

4. Start development server

   npm run dev
   # or
   yarn dev
   

   
   The application will be available at http://localhost:3000

Build for Production

npm run build
npm start

Development Guidelines

Code Style & Conventions

• Use TypeScript for all new components and utilities
• Follow the single responsibility principle for components
• Use custom hooks for reusable logic
• Implement proper error boundaries for error handling
• Write meaningful commit messages following conventional commits

Component Guidelines

• Use functional components with hooks
• Implement proper TypeScript interfaces for props
• Use Tailwind CSS for styling (avoid custom CSS when possible)
• Ensure accessibility with proper ARIA labels and keyboard navigation
• Implement loading states and error handling

State Management

• Use TanStack Query for server state (API data)
• Use Zustand for client state (UI state, preferences)
• Avoid prop drilling with appropriate state management
• Implement optimistic updates for better UX

API Integration

• Use the centralized API client in lib/api/
• Implement proper error handling for API calls
• Use React Query for caching and synchronization
• Handle loading states appropriately

Testing

Testing Strategy

• Unit Tests: Component logic and utilities
• Integration Tests: API interactions and user flows
• E2E Tests: Critical user journeys

Running Tests

# Run unit tests
npm run test

# Run tests with coverage
npm run test:coverage

# Run E2E tests
npm run test:e2e

Deployment

The frontend application is configured for deployment on:

• Vercel (recommended for Next.js)
• Netlify
• Docker containers
• Traditional hosting with static export

Environment Variables for Production

NEXT_PUBLIC_API_URL=https://api.klinikgunung.com/api/v1
NEXT_PUBLIC_APP_URL=https://klinikgunung.com

Performance Optimization

The application implements several performance optimizations:

• Code splitting with Next.js dynamic imports
• Image optimization with Next.js Image component
• Bundle analysis and tree shaking
• Caching strategies with React Query
• Lazy loading for routes and components

Browser Support

The application supports all modern browsers:

• Chrome 90+
• Firefox 88+
• Safari 14+
• Edge 90+

Contributing

1. Create a feature branch from main
2. Make your changes following the guidelines
3. Write or update tests as needed
4. Ensure all tests pass
5. Submit a pull request with a clear description

Support

For technical support or questions:

• Check the troubleshooting section
• Review existing issues on GitHub
• Contact the development team

This documentation will be updated as the application evolves. Please refer to the latest version for the most accurate information.