記事一覧
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業界をはじめ多くの企業が人手不足となっており、企業は採用に多大なコストと労力を支払っています。
単純に労働人口が減っていることもありますし、働き方や転職に対する意識の変化も相まって、求人マッチングや副業マッチングの市場規模が急拡大し
Nextjs + SupabaseでSupabaseのStorage Image Transformationsを利用する方法
前回はSupabase上で『画像投稿アプリの最適化』方法についてご紹介しました。
しかしながらSupabaseでPRO以上のプランを契約しておられる場合、もっと簡単に画像の最適化を行う事ができます。
それが『Storage Image Transformations』です。
今回はそちらの実装方法をご紹介します。
※Storage Image Transformationsの機能はPROプラン以