NEWS LIST

/ NEWS

Test fanclub
2024.12.23

個人開発】契約中のサブスクリプションを管理できるサービスをリリースしました【Next.js×Neon×Clerk×Netlify】

Last updated at Posted at 2025-06-15

はじめに

以前からの不満を解消し、ポートフォリオを充実させるため、正式にユーザー向けにリリースするアプリを個人開発しました。この記事では、サービスの紹介と開発を通じて得られた知見を共有させていただきます。

サービス概要

タイトルにある通り、「契約中のサブスクリプションを管理するサービス」です。主に以下のような機能を提供しています。

サービス概要

サービス作成の目的

私自身、いくつかのサブスクリプションを契約しており、読者の方々も同様の状況である方が多いと思います。しかし、個人向けでPCから契約中のサブスクリプションを把握できるサービスはほとんどなく、これまではNotionにメモすることで管理していました。

その管理方法には以下のような課題がありました:

  • ドルやユーロで支払っているサブスクリプションを日本円に換算する手間
  • 次回更新日の手動更新の煩雑さ
  • 契約日を忘れてしまい、不要な契約更新をしてしまうリスク

これらの課題を解決するため、React学習の成果発表も兼ねて、本サービスを開発しました。

製作者の経歴

Reactの学習を始めて半年程度の初心者です。

それまでReactに限らず新しい技術への関心はありましたが、アウトプットとなると手が動かず、自分を動かす理由を作るために半年ほど前にJISOU(プログラミングスクール)に入って学習を始めました。そして、今回React学習の集大成として本サービスを開発しています。

プログラミング自体も、2年前に社会人になってから本格的に触れ始めたばかりです。

機能一覧

サブスクリプションの管理

登録

以下のページから登録できます。

サブスクリプション登録画面

通貨・請求サイクルは、現在は以下のものから選択できます。

  • 通貨
    • 日本円
    • 人民元
    • 英ポンド
    • 米ドル
    • ユーロ
    • ビットコイン
  • 請求サイクル
    • 月毎
    • 年毎

ドロップダウン

閲覧

登録したサブスクリプションの、金額(日本円換算)や、次回更新日などを一覧で確認できます。

ダッシュボード画面

また、名前を押下することで、詳細な情報を確認できます。

名前押下

サブスクリプション詳細画面

登録内容の削除

以下のアイコンなどから削除できます。

削除アイコン

更新日の通知

毎朝、翌日更新予定のサブスクリプションがある場合、更新通知メールが登録されたメールアドレスに送信されます。