マガジン
記事一覧
Next.js とSupabaseで求人マッチングアプリを作る⑬～コミュニケーション機能の実装～
前回に続いて、今回は応募・スカウト後のコミュニケーション機能を作成します。
コミュニケーション機能は、あらゆるプロダクトで使うものになりますので、ぜひ作り方をマスターしておきましょう！
※既読機能や通知周りは、次回以降ご紹介します。
Supabaseの設定今回応募、スカウトをするにあたり必要なテーブルがいくつかあるため作成します。
trn_apply_message送信されたメッセージを定義す
Next.js とSupabaseで求人マッチングアプリを作る⑫～応募・スカウト機能の実装～
いよいよマッチングアプリ開発も終盤になってきました！
今回はマッチングアプリの肝になる部分、求職者から応募、企業からスカウトができる機能を作成します。
Supabaseの設定今回応募・スカウトをするにあたり、必要なテーブルがいくつかあるため、そちらを作成します。
m2m_job_seeker_job求職者と求人を結び付ける`m2m_job_seeker_job`テーブルを作成します。
添付画像
Next.js とSupabaseで求人マッチングアプリを作る⑪～求職者から企業をブロックする機能～
今回は『求職者側で企業をブロックする機能』を作成します。
この機能はなぜ、求職者にとって必要でしょうか？
単に『スパムのようにオファーを掛けてくる企業をブロックしたい』という理由や『この企業は評判が悪いからブロックしたい』というケースもありますが、
一番は『今現在勤めている会社に、マッチングサイトへ登録していることを知られたくない』という理由が大きいです。
求職者にとって安心して使ってもらうた
Next.js とSupabaseで求人マッチングアプリを作る⑩～検索機能～
さて、一覧・詳細画面が一通り完成した訳ですが、残りマッチングアプリに必要な機能とはなんでしょうか。
それは『検索機能』です。
たとえ沢山の求人や求職者が登録されていたとしても、ユーザーが見たいのは『条件に合う』リストだけです。
なので、今回は企業側・求職者側それぞれの検索機能を実装します！
企業側 - 求職者の検索機能
求職者 - デフォルトの検索欄（企業 or 案件）と、求人の検索ができる
Next.js とSupabaseで求人マッチングアプリを作る⑨～企業、求職者情報、求人のファイルを追加できる仕組み作成～
今回は、今まで作成してきた各種編集画面にファイルアップロードの機能を搭載し、アップロードしたファイルのURLをDBに保存する仕組みを作成します。
マッチングアプリにおいて、画像アップロード機能はほぼ必須です。
求人を行う企業の雰囲気を掴んでもらうには画像が一番ですし、
応募側にも履歴書や在留資格カードをアップする機能をつければ、スムーズに採用手続きへ入ることができます。
では早速手順を見ていき
Next.js とSupabaseで求人マッチングアプリを作る⑧～求人一覧、求人詳細情報～
ここまで作ってきたマッチングアプリも、だいぶ形になってきましたね。
今回は求職者一覧と求職者詳細を作成します。
企業一覧
企業詳細
求職者一覧
求職者詳細
求人一覧
求人詳細
これも求職者一覧・求職者詳細と同じ形で作成ができるので、作り方をマスターした、という人は自力で作れるか試してみましょう。
Next.jsの実装app/joblist/page.tsx求人一覧ページです。
求職
Next.js とSupabaseで求人マッチングアプリを作る⑦～求職者一覧、求職者詳細情報～
今回は求職者一覧と求職者詳細を作成します。
企業一覧
企業詳細
求職者一覧
求職者詳細
求人一覧
求人詳細
おおよそ前回の流れと一緒なので、もし自学目的であれば、前回のコードを見ながら作ってみたあと、答え合わせをしても面白いかもしれません。
それでは見ていきましょう！
Supabase側の設定前回と同様に求職者テーブル（mst_job_seeker）の`SELECT`ポリシーをtr
Next.js とSupabaseで求人マッチングアプリを作る⑥～企業一覧、企業詳細情報～
今回から一覧系ページ、詳細系ページの作成を進めます！
具体的には
企業一覧
企業詳細
求職者一覧
求職者詳細
求人一覧
求人詳細
になります。
今回は企業一覧と企業詳細を作成します。
単に情報取得・表示だけでなく、ポリシーの調整も含まれているため、そのあたりも意識して制作していきましょう。
Supabase側の設定今まで企業テーブル（mst_company）は自社のアカウントでし
Next.js とSupabaseで求人マッチングアプリを作る⑤～求人募集の登録・修正機能～
今回は前回の続きで求人募集の登録・修正機能とそのUIを追加します。
これも『企業のプロファイル』『求職者のプロファイル』と同じように実装したいところですが、少し違う点があります。
例えば『"新規作成"と"既存求人の編集"の切り替え』や『作成・編集の権限』等です。
そのあたりに注意して構築を行いましょう。
Supabase側準備求人テーブルの作成（trn_job）Supabaseのダッシュボード
Next.js とSupabaseで求人マッチングアプリを作る④～求職者のプロファイル変更～
今回は前回の記事の続きで、『求職者の基本情報を変更する』UIを追加します。
基本的な流れは『企業のプロファイル変更』と同じです。
なのでもし自学目的で見ておられる方は、企業プロファイルのコードを見ながら、求職者部分のUI実装を行ってみてください。
Next.js実装components/userinfo/MainContents.tsx以前同様に、求職者の基本情報の変更画面も追加します。
im
Next.js とSupabaseで求人マッチングアプリを作る③～企業のプロファイル変更～
前回に引き続き、求人マッチングアプリの制作方法をご紹介します！
先日作ったマスタデータに対して、UIを追加していきます。
今回は、以下のような『企業の基本情報を変更する』UIを追加しましょう。この記事をベースに、UI作成・DBとの紐づけを習得してみてください。
Next.js実装components/UserInfo.tsx"use client";import Link from "next
Next.js とSupabaseで求人マッチングアプリを作る①～ユーザ認証～
今回からNext.jsとSupabaseを利用して求人マッチングアプリを作成します。
現在求人マッチングアプリに、大きな注目が集まっているのはご存知でしょうか？
IT業界をはじめ多くの企業が人手不足となっており、企業は採用に多大なコストと労力を支払っています。
単純に労働人口が減っていることもありますし、働き方や転職に対する意識の変化も相まって、求人マッチングや副業マッチングの市場規模が急拡大し