就活情報共有サイトを作成してみた

Posted at 2025-01-22

はじめに

初めましての人もそうでない人もこんにちは！

みなさんは就活をしたことはありますか？
現在の私は絶賛就活中ですが少し悩みがあります！
私の所属している大学が最近できたばっかりということもありOB・OG訪問はもちろんのこと就活に関する情報が少なすぎることです！

就活をしている人ならわかると思いますが就活○議や○ne careerは面接の内容等を知るにはかなり便利ですが投稿した人のバックグラウンドが分からないということもあってただ投稿者が優秀なだけなのではないかと思ってしまいます。

そこで私は特定の大学に限定した投稿サイトを作成すれば就活の情報収集や先輩のバックグラウンドから自分がその企業を目指せるだけの技術があるのか知ることができると思いました！

どうぞ最後まで見ていただけると嬉しいです！

使用技術

NEXT.JS
- TypeScript(フロント・バック)
Supabase(データベース)

主なディレクトリ構成

syuukatu/
├── app/
│   ├── auth/
│   │   └── callback/
│   │       ├── route.ts
│   │       └── page.tsx
│   ├── coding-test/
│   │   └── register/
│   │       └── page.tsx
│   ├── dashboard/
│   │   └── page.tsx
│   ├── es/
│   │   └── register/
│   │       └── page.tsx
│   ├── fonts/
│   ├── interview/
│   │   └── register/
│   │       └── page.tsx
│   ├── login/
│   │   └── page.tsx
│   └── register/
│       ├── favicon.ico
│       ├── globals.css
│       ├── layout.tsx
│       └── page.tsx
└── ・・・

必要な機能

認証機能
- 一般的なメールアドレスとパスワードを使った認証
投稿機能
- コーディングテストやES、面接の内容とその結果を登録する
投稿内容の確認画面

下準備

NEXT.JSのセットアップ

npx create-next-app syuukatu

こちらをターミナルに入力するとyesかNoか色々聞いてくると思いますが私は以下のように選択しました！

✔ Would you like to use TypeScript? …  Yes
✔ Would you like to use ESLint? … Yes
✔ Would you like to use Tailwind CSS? … Yes
✔ Would you like your code inside a `src/` directory? … No
✔ Would you like to use App Router? (recommended) … Yes
✔ Would you like to use Turbopack for next dev? … No
✔ Would you like to customize the import alias (@/* by default)? … No

今回の記事ではこの設定で進めていただけると嬉しいです！

Supabaseの設定
今回は事前にプロジェクトの作成をしているという前提で進めていきます！
まずはAuthentication > Providers > Email > Enable Email SignIn を有効にしてください！
最後にAuthentication > URL Configuration > Site URL にhttp://localhost:3000を追加してください！

これで完了です！