🥰 Futurealize with Tech！

FwTのメッセージ募集用サイトのリポジトリです

🤩 概要

卒業メンターにメッセージを共有できるサービス！！
ライフイズテックの卒業メンバーののぞみ・さっきー・うしょう・いのれんが作成してます。

⚒️ 使用した技術

• Next.js 14.0.4
• TypeScript
• Sass (スタイリング)
• Supabase (DB)
• Prisma (ORM)
• framer-motion（アニメーション）

🌐 デプロイ

フロントエンド：Vercel

📁 ファイル構成

.
├── public/
│   ├── next.svg
│   └── vercel.svg
│
├── src/
│   ├── app/
│   │   ├── layout.js
│   │   ├── template.js（ローディング画面）
│   │   ├── page.js
│   │   ├── global.scss
│   │   ├── page.module.scss
│   │   ├── favicon.ico
│   │   ├── apple-touch-icon.png
│   │   ├── opengraph-image.png
│   │   └── twitter-image.png
│   │
│   ├── components/（以下のファイルは頭文字大文字）
│   │   ├── XXX/ (XXXに関するコンポーネント)
│   │   │
│   │   └── UI/ (ボタンなど細々したUI)
│   │       ├── Animation/（Lottieのコンポーネント）
│   │       ├── Button/
│   │       ├── Menu/
│   │       ├── Modal/
│   │       └── Screen/
│   │
│   ├── lib/（配列や関数などの処理）
│   │   ├── Function/（関数）
│   │   ├── Image/（画像配列）
│   │   ├── Key/（ローカルストレージなどのkey）
│   │   └── Site/（メディアのURL）
│   │
│   └── type/ (型定義)
│
├── (.env)
├── .eslintrc.json
├── .gitignore
├── next-env.d.ts
├── next.config.js
├── package.json
├── package-lock.json
├── README.md
└── tsconfig.json

🗒️ セットアップ方法

FwTのサイトのセットアップ方法は以下のとおりです。

1. リポジトリをクローン

指定のディレクトリで、以下のコマンドを実行。

$ git clone https://github.com/Futurealize-with-Tech/fwt.git

2. npmパッケージをインストール

上記でクローンしたディレクトリに移動し、以下のコマンドを実行。

$ npm install

3. Supabaseのセットアップ

2024年はSupabaseを採用しましたが、RDBなら何でも構いません。 ※ PostgreSQLだとコードを書き換えずに使用できます。

調べながらセットアップしてみてください！！！

4. 環境変数の用意

まずは、.envを作成してください。 そして、使っている環境変数は以下の二つです。
デプロイする際には、環境変数に以下のものを指定しないとプロジェクトが機能しません。

- NEXT_PUBLIC_API_BASE_URL=http://localhost:3000/api/v1
- DATABASE_URL='DBのURL'

上記のDATABASE_URLには、セットアップしたDBのURLを入れてください。(PostgreSQLならpostgres://postgres.から始まるもの)

5. Prismaのセットアップ

Prismaをローカルでセットアップします。

$ npx prisma generate

6. ローカルサーバーの起動

開発環境で実行するには、下記のコマンド。

$ npm run dev

ビルドコマンド ↓

$ npm run build

ビルドしたものを実行 ↓

$ npm run start

🍕 Prisma Studio

Prisma Studioという接続したDBをGUIで操作できるツールがあります。 下記のコマンドで実行できます。

$ npx prisma studio

⚙️ 環境変数

• NEXT_PUBLIC_API_BASE_URL=http://localhost:3000/api/v1
• DATABASE_URL='DBのURL'

メッセージ

このプロジェクトはOSSです！！ 不具合などあればぜひ気軽にissue飛ばしてみてください！

質問したいことがあれば、いのれんまで！（LiT!生ならフォロー返します！)