このスクラップは限定公開です
Open15

アルバムサイト

ピン留めされたアイテム
きゃきゃ

いい写真撮れたら綺麗に飾りたくなるよね

きゃきゃ

スクラップの使い方あんまりわかんないけどここにサイトの備忘録どんどん追加していきます

きゃきゃ

使用技術

フロントエンド

  • HTML
  • CSS
  • JS

バックエンド

  • TS
  • Node.js
  • Express
  • dotenv
  • multer
  • sharp
  • uuid
  • Supabase

その他

  • Git
  • GitHub
  • Figma
  • railway
  • netlify
きゃきゃ

デザインはりっちゃんが手伝ってくれました
好きな写真レイアウト募集します

きゃきゃ

バックエンドの動き

裏で動いているシステムの流れです
セキュリティ難しい。。。

画像の保存

  1. 画像アップロード
  2. webp(めっちゃ容量の小さい写真ファイル)に変換
  3. 画像をネット上のストレージに保存
  4. ネットに保存した写真のurlと日付情報をデータベースに保存

画像データの取得

  1. データベースにアクセス
  2. 全部の写真のurlと日付情報を取得

パスワード認証

  1. バックエンドのシステムにアクセス
  2. 安全な場所に保管されているパスワードと一致しているか確認
きゃきゃ

フロントエンドのセキュリティがばがばすぎるので後ほど対応します。。。

きゃきゃ

ルーティングは突破できるけどストレージ読み込めないのでﾖｼ！
（バックエンド難しい）

きゃきゃ

今は開発スムーズに行ってていいけど次回はDocker使うぞ

きゃきゃ

画像アップロード実装できた！！！！！！！！！！！！！！！！１
あとはローディングと画像の読み込み

きゃきゃ

やばいday2もうすぐだ完成させなきゃ

きゃきゃ

CSSの順番メモ

  1. Positioning（位置）
    position, top/right/bottom/left, z-index, transform

  2. Display / Flex / Grid（表示・レイアウト）
    display, flex/grid系の指定（flex-direction, justify-content, align-items, gap）

  3. Box Model（サイズと余白）
    width, height, margin, padding, box-sizing

  4. Typography（文字）
    font, color, text-align, line-height, letter-spacing

  5. Background & Border（背景と枠）
    background, border, border-radius, box-shadow

  6. Effects & Animation（エフェクト）
    transition, animation, filter, opacity

  7. Others（その他）
    resize, overflow, outline, cursor, content（擬似要素）

きゃきゃ

railway 今までありがとうお財布が寒いから安くて早い子使うね。。。

きゃきゃ

うわあああああああああああやっとバグ治った
エラーハンドリングちょっと理解できたぞ
静的型付け理解するぞぉ