T3 Stack × Supabaseで本格的なサービスを作ってみる①

作りたいwebサービスが出来たので気になっていたT3 Stackを使用して実装してみたので紹介

create.t3.gg

サービスについては、まだ開発中なので、何回か記事にする予定

リポジトリ

github.com

作成中のWebサービス

oomaka.vercel.app

サービス名: OOMAKA
URL: https://oomaka.vercel.app
概要: 大まかに未来の予定を可視化するサービス
※まだログアウトの実装がミスっているので現在修正中 😅

T3 Stackとは

最近、話題のWebアプリーケーション開発の構成で以下の技術を使用している。

この構成で簡単に環境構築できるコマンドラインツールが以下で提供されている。

create.t3.gg

今回のサービスも上記のコマンドラインツールを使って実装

使用技術

基本構成
- T3 Stack
データベース
- Supabase
デプロイ
- vercel
デザイン
- Figma

実装の紹介

以下のコマンドラインを実行して、環境を構築

$ pnpm create t3-app@latest

Supabaseの接続は環境変数（.env）を以下を設定すればOK
DATABASE_URLの値はSupabseのコンソールの接続情報から取得可能

■ .env

# Prisma
# https://www.prisma.io/docs/reference/database-reference/connection-urls#env
DATABASE_URL="postgresql://postgres:*****@db.*****.supabase.co:****/postgres"

ログインはDiscordを使用
こちらも以下の環境変数を設定すればOK

■ .env

# Next Auth Discord Provider
DISCORD_CLIENT_ID="************"
DISCORD_CLIENT_SECRET="************"

上記でログインとデータベースの接続は完了

まずはDBの構築から実装
DBの構築はPrismaのスキーマファイルから作成

■ prisma/schema.prisma

model Url {
    id       String     @id @default(cuid())
    userId   String?
    schedule Schedule[]
}

model Schedule {
    id        String   @id @default(cuid())
    urlId     String
    date      DateTime
    day       Int?
    emoji     String?  @db.VarChar(5)
    text      String   @db.VarChar(10)
    createdAt DateTime @default(now())
    updatedAt DateTime @updatedAt
    url       Url      @relation(fields: [urlId], references: [id], onDelete: Cascade)

    @@index([urlId, date, day])
}

以下のコマンドでマイグレーションを実行

$ npx prisma migrate dev --name init

以下のコマンドでローカルで起動

$ pnpm dev

ログインについては以下の感じで実装できる

■ src/pages/index.tsx

import { signIn, signOut, useSession } from "next-auth/react";

（略）

  // ログインしている場合は sessionDataからログイン情報が取得できる
  const { data: sessionData } = useSession();

  // signIn()、signOut()を参照することでログイン/ログアウトを実装できる

APIアクセスはAPI Routesを使用
フロントエンドからのAPIアクセスはtRPCを使用、DBアクセスにはPrismaを使用してデータを取得

まず、APIの実装は以下の通りに実装

■ src/server/api/routers/schedule.ts

export const scheduleRouter = createTRPCRouter({
  (略)
  fetchInPeriod: publicProcedure
    .input(
      z.object({
        urlId: z.string(),
        startDate: z.date(),
        endDate: z.date(),
      })
    )
    .query(async ({ ctx, input }) => {
      const schedules = await ctx.prisma.schedule.findMany({
        where: {
          urlId: input.urlId,
          date: {
            gte: input.startDate,
            lte: input.endDate,
          },
        },
        orderBy: {
          day: "asc",
        },
      });
      return schedules;
    }),

上記のAPIをフロントエンドから呼ぶ場合は以下の通りに実装

■ src/features/schedules/components/Items.tsx

  const schedules = api.schedule.fetchInPeriod.useQuery(
    {
      urlId: props.urlId,
      startDate: props.date.toDate(),
      endDate: props.date.endOf("month").toDate(),
    }
  );