detoxir

https://github.com/mkanakubo/detoxir

Next.js

GCP

MySQL

Rails

Terraform

カフェインの接種を効率よく、健康的に行えるサービス!

pgvbdk90nog

7jldqojcrbk

Masamichi

推しアイデア

バーコード解析で即計測、グラフで体内のカフェイン濃度をひと目で確認。

作った背景

カフェインは効率を高める一方で、摂りすぎは不調の原因に。このアプリで最適量を知り、健康的に活用できます。

推し技術

バーコード解析

プロジェクト詳細

このアプリはこんな人におすすめ

  • 勉強や仕事をがんばりたい学生や社会人
  • コーヒーやエナジードリンクをよく飲む人
  • カフェインを取りすぎていないか気になる人
  • 効率よく集中したいけど健康も大事にしたい人

サービス概要

このアプリは、バーコード解析技術を活用して、飲み物に含まれるカフェイン量を素早く読み取ります。
記録したデータをもとに、体内のカフェイン濃度の推移をグラフで表示
就寝時間にカフェイン量が多い場合、睡眠への影響を防ぐためアラートを表示。 体内のカフェイン量が作業効率を高めやすい時間帯に通知。

特徴

  • ドリンクのバーコードをスキャンするだけでカフェイン量を自動取得
  • 自分の体内にどれくらいカフェインが残っているかをグラフで可視化
  • 摂りすぎ防止や作業効率アップの自己管理に役立つ

目指すこと

「コーヒーをもう1杯飲んでも大丈夫?」
「勉強のために効率よくカフェインを使いたい」
そんな人のために、健康的でスマートなカフェイン管理をサポートします。

技術選定

  • フロントエンド
    • Next.js App Router
  • バックエンド
    • Ruby on Rails
  • インフラ
    • GCP
    • Terraform

Google Slides

https://docs.google.com/presentation/d/16Zh7MZlbrQ3hqJCLArAzYeSpaDuXNMjEhBYRJPbnyV0/edit?usp=sharing

デザインの特徴

1. 黄緑を基調としたテーマカラー

アプリ全体のキーカラーとして、鮮やかな黄緑を採用しています。
この色は「エナジードリンクのような人工的な黄緑」と「DETOX=解毒・リフレッシュ感」の両方を表現し、
活力と安らぎを同時に感じられるカラーコンセプトとなっています。

2. 直感的で分かりやすいUI

  • 大きな「摂取イベントを作成」ボタンを配置し、ユーザーが迷わず操作できる設計。
  • 摂取後の経過時間や体内のカフェイン濃度、就寝時間などをグラフで表示し、一目で状況が把握できるダッシュボードを実現しています。

3. モダンでシンプルなデザイン

  • 背景には濃いネイビーを使用し、黄緑が映えるコントラストを演出。
  • アイコンや文字情報は最小限に抑えつつ、視覚的に情報の優先度が分かるように整理されています。
  • ボトムナビゲーション(ホーム/分析/設定)も直感的で、日常的に使いやすいデザインです。

pgvbdk90nog

@1ab435430b033615