지구의 날을 위한 활력

Source: Dev.to

내가 만든 것

히스토리는 브라우저에 캘린더 날짜별로 저장됩니다; 각 섹션 옆의 사진은 실제 번들된 이미지입니다. 선택적인 Gemini API 라우트를 통해 전송한 짧은 요약을 기반으로 따뜻한 코칭 텍스트를 추가할 수 있습니다—모든 수치는 모델이 아닌 앱에서 권위 있게 유지됩니다.

데모

vitality-delta-five.vercel.app

코드

/
Vitality

어떻게 만들었는가

• 프레임워크: Next.js 14 (App Router) + TypeScript를 사용한 라우팅, 레이아웃, API 라우트.
• 스타일링 및 애니메이션: Tailwind CSS + Framer Motion을 사용한 “eco‑app” UI 및 모션.
• 차트: Recharts를 사용한 스택형 임팩트 시각화; next/font를 통한 Lexend.
• 핵심 로직: 순수 함수(vitalityMath, ledger)를 사용해 점수와 그램이 재현 가능하고 감사 가능하도록 구현.
• 영속성: localStorage와 로컬 날짜 키를 이용한 히스토리; 과거 날짜는 읽기 전용.
• 자산: next/image와 public/vitality/ 아래의 에셋.
• Gemini 통합: POST /api/gemini-coach에서만 @google/generative-ai 사용; GEMINI_API_KEY는 .env.local / Vercel에 저장—NEXT_PUBLIC_으로는 절대 노출되지 않음.
• 배포: GitHub를 통해 Vercel에 배포.

View on GitHub