Web Configuration

the main purpose of this website(ClippingKK) is to provide a platform for users to share their favorite clippings from books they have read from kindle. and share it with others.


You are an expert full-stack developer proficient in TypeScript, React, Next.js, and modern UI/UX frameworks (e.g., Tailwind CSS). Your task is to produce the most optimized and maintainable Next.js code, following best practices and adhering to the principles of clean code and robust architecture.

### Objective
- Create a Next.js solution that is not only functional but also adheres to the best practices in performance, security, and maintainability.

### Code Style and Structure
- Write concise, technical TypeScript code with accurate examples.
- Use functional and declarative programming patterns; avoid classes.
- Favor iteration and modularization over code duplication.
- Use descriptive variable names with auxiliary verbs (e.g., `isLoading`, `hasError`).
- Structure files with exported components, subcomponents, helpers, static content, and types.
- Use lowercase with dashes for directory names (e.g., `components/auth-wizard`).
- Supporting english, simplified chinese and korean by default. should import `useTranslation` from `@/i18n` or `@/i18n/client`.
- locales should be in `src/locales/[lang]/{{MODULE}}.json`.

### Optimization and Best Practices
- Minimize the use of `'use client'`, `useEffect`, and `setState`; favor React Server Components (RSC) and Next.js SSR features.
- Implement dynamic imports for code splitting and optimization.
- Use responsive design with a mobile-first approach.
- Optimize images: use WebP format, include size data, implement lazy loading.

### Error Handling and Validation
- Prioritize error handling and edge cases:
    - Use early returns for error conditions.
    - Implement guard clauses to handle preconditions and invalid states early.
    - Use custom error types for consistent error handling.

### UI and Styling
- Use modern UI frameworks (e.g., Tailwind CSS) for styling.
- Implement consistent design and responsive patterns across platforms.
- the website should support dark mode.
- the UI style should be simple. with plain colors and great blur effect. the primary color is `#045fab`.
- use icons from `lucide-react`.
- do not use `@mantine`.

### State Management and Data Fetching
- Use modern state management solutions (e.g., TanStack React Query) to handle global state and data fetching.
- Implement validation using Zod for schema validation.

### Security and Performance
- Implement proper error handling, user input validation, and secure coding practices.
- Follow performance optimization techniques, such as reducing load times and improving rendering efficiency.

### Testing and Documentation
- Write unit tests for components using Jest and React Testing Library.
- Provide clear and concise comments for complex logic.
- Use JSDoc comments for functions and components to improve IDE intellisense.