danial/kami_apple_exchage
1
0
Fork 0
mirror of https://git.oceanpay.cc/danial/kami_apple_exchage.git synced 2025-12-18 23:05:11 +00:00
Code Issues Packages Projects Releases Wiki Activity
Files
master
kami_apple_exchage/frontend/GEMINI.md
danial 5c486e34d3 docs(项目): 添加项目文档并进行代码调整 
- 新增 CODEBUDDY.md、GEMINI.md、GEMINI_CN.md 等项目文档
- 更新 Dockerfile 和其他配置文件
- 优化部分代码结构，如 orders.py、tasks.py 等
- 新增 .dockerignore 文件
2025-09-12 19:38:24 +08:00

3.6 KiB
Raw Permalink Blame History

Gemini Project Context: Frontend for Apple Gift Card Exchange

Project Overview

This is the frontend for the Apple Gift Card Exchange platform, also referred to as a "Crawler Monitoring System." It's a modern, responsive web application built with Next.js and TypeScript, designed to provide a real-time monitoring dashboard for backend processes. The UI is heavily inspired by Apple's Human Interface Guidelines (HIG), utilizing a custom-themed shadcn/ui component library, Tailwind CSS, and glass morphism effects.

  • Framework: Next.js 14+ (with Turbopack)
  • Language: TypeScript
  • Styling: Tailwind CSS, Sass, and a custom Apple-style design system.
  • UI Components: shadcn/ui, Radix UI, Headless UI
  • State Management: TanStack Query (React Query) for server state, React Hooks for local state.
  • API Communication: Axios client with API types and hooks generated by orval from an OpenAPI specification.
  • Code Quality: ESLint for linting, Prettier for formatting.

Building and Running

The project uses bun as the package manager.

  1. Install Dependencies:

    bun install

  2. Run Development Server: The development server runs on http://localhost:3000.

    bun run dev

  3. Build for Production: This command builds the application for production usage.

    bun run build

  4. Run Production Server: Starts the production server.

    bun run start

  5. Linting: Run the linter to check for code quality issues.

    bun run lint

  6. Generate API Client: The frontend's API client is generated from the backend's OpenAPI schema. If the backend API changes, run this command to update the client.

    bun run generate:api

Development Conventions

  • Styling: Follow the Apple HIG design principles. Use Tailwind CSS utility classes and the existing component styles in src/styles and src/components/ui.
  • API Interaction: Do not write API fetching code manually. Use the generated hooks from src/lib/api/generated/. If an endpoint is missing, regenerate the API client.
  • State Management: Use TanStack Query for all data fetched from the server. Use component-level state (e.g., useState) for UI-related state.
  • Environment Variables: Create a .env.local file from env.example for local development settings.
  • Components: Reusable, low-level components are in src/components/ui. Feature-specific components are in src/components/dashboard, src/components/forms, etc.

Key Files and Directories

  • src/app/: Contains the pages and layouts for the application (App Router).
  • src/components/: Contains all React components.
    • ui/: General-purpose, reusable UI components (Button, Card, etc.).
    • dashboard/: Components specific to the main monitoring dashboard.
    • layout/: Components that define the page structure (Header, Footer, etc.).
  • src/lib/: Core logic, utilities, and API communication.
    • api/generated/: API client code generated by orval. Do not edit manually.
    • contexts/: React contexts for shared state (e.g., theme).
    • hooks/: Custom React hooks.
    • utils.ts: General utility functions.
  • src/styles/: Global styles and Sass files.
  • tailwind.config.js: Configuration for the Tailwind CSS design system, including custom colors and effects.
  • next.config.js: Configuration for the Next.js framework.
  • orval.config.ts: Configuration for the orval API client generator.
  • GEMINI.md: This file, containing the project context.