2
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

【個人開発】Next.js15でフリーランス向けの勤怠管理サービスを作りました

Last updated at Posted at 2025-03-02

こんにちは
フリーランスエンジニアのshutaです。

今回、フリーランスのための勤怠管理サービスを公開したので紹介させていただきます。

スクリーンショット 2025-03-02 17.34.45.png
URL:https://www.free-attendance.com/

なぜ作ったのか

  • フリーランスとして業務委託で働いている上で、勤怠管理をしたい
  • 案件別の勤怠管理や、1日の中で複数回に分かれた勤怠管理をしたい
  • Next.js(AppRouter)で作成したポートフォリオとして紹介できるサービスを作りたい
  • 自分で1からサービスを作ることで技術力を高め、実務に役立てたい

使用技術

フロントエンド
Next.js15(AppRouter)
バックエンド
Prisma
ServerComponet
ServerActions
RouteHandlers
インフラ
Vercel
Neon
個人開発のため、実装コスト・インフラコストを最低限に収めるために最小限の構成で開発しました。
また、Next.jsの理解を深めるためでもあったのでParallel Routes + Intercepting Routesでのモーダル実装を含め、Next.jsの新しい機能をできるだけ幅広く取り入れて実装しました。

機能紹介

打刻機能

image.png
開始/終了ボタンで簡単に打刻することができます。
また、勤務時間が一定以上の場合は休憩時間を入力することも可能です。
image.png

勤怠管理

slide-image-3.jpeg
slide-image-4.jpeg
勤怠履歴の確認・編集をすることができます。

プロジェクト管理

image.png
勤怠管理を行うプロジェクトを複数作成することができます。

今後の展開

現状は勤怠管理に関する最低限の機能のみとなっているので、Excel出力など機能追加を行なっていく予定です。
より多くの方に使っていただけるサービスにしていきたいので、要望・フィードバック等いただけたら大変嬉しいです。

最後に

今回はじめて1からWebサービスを開発しましたが、エンジニアとして大変良い経験になりました。
今後も今回のサービスの開発を継続的に行なっていくことに加え、別のサービスの開発も行っていきたいとも思っています
ここまでお読みいただきありがとうございました。

2
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?