見出し画像

【エンジニア】駆け出しエンジニアがNext.js App Routerで大学生向けの教科書フリマアプリを作ってみた

こんにちは、しゅんです。都内フロントエンドエンジニアとして働いてるエンジニア3年生です。今日は大学生向け教科書フリマアプリ「UniFli」をリリースしたのでアプリの紹介と開発の裏側について話していこうと思います。お時間がございましたら是非、最後までご覧ください。

※大学生向け教科書フリマアプリ「UniFli」は開発メンバーを募集しています。ご興味がありましたらこちらにご連絡ください。

開発の背景

以前、大学時代に作った大学生向けの教科書フリマアプリの記事をnoteで公開したのですが、この記事を見た大学生から「同じコンセプトのアプリを作ろうとしています。お話ししませんか?」とコンタクトがありました。

話を伺ってみるとまだ市場調査の段階で「アプリを作るエンジニアもまだいない」とのことでした。当時筆者は無職で手隙だったので乗りかかった船だと思って開発のお手伝いをすることになりました。

大学生向け教科書フリマアプリ「UniFli」

使わなくなった教科書を手放そうと思っている学生と、安く教科書を手に入れたい学生を繋げるアプリです。イメージはマッチングアプリに近いと思います。不要になった教科書をアプリに投稿してもらって欲しいものがあればアプリ内のDMで連絡を取り、交渉してもらいます。今後、機能拡張をする中でアプリ内決済やカテゴリーを教科書以外に広げる予定になっています。

ヒアリングをしていく中で他大学も教科書フリマアプリを作っていることが分かりアクティブユーザーも確保できているくらい大学生のニーズがあるとのことでした。以下は立命館大学の例になります。(情報共有・アドバイス等ありがとうございました!)

リリースしたのは良いものの、まずは認知拡大をしなくてはいけないのでX(旧Twitter)やInstagramを活用してオンラインでの広報活動や、オフラインでは週次でビラ配り、月次で実際に教科書のフリマを開くことも考えています。コロナが明けてよかったです。直近では4月の入学式・新歓がユーザー獲得の山場かなと思っています。

UniFliは大学生のニーズの大きい教科書に絞っていますが将来的には理系で使うような機材だったり、特定の講座で使われる資料だったり、就活の情報だったり、教科書以外のものもターゲットに含め「必要なものを必要な人へ、あなたの要らないが誰かの役に立つ」世界観を作っていこうと思っています。

開発の振り返り

開発期間は2024年1月22日(開発開始)〜2024年3月18日(納品)なので2ヶ月くらいです。先方とは週次でミーティングをして進捗の共有と実装のFBをもらっていました。※先方 = 筆者のnoteを見てコンタクトを取ってくださった学生さん。

開発期間

  • 2024年1月

    • 基盤開発(技術選定、リンター設定、テーブル設計 etc)

  • 2024年2月

    • メイン開発

    • ベータ版のリリース

  • 2024年3月

    • バグ改修

    • テスト実装

    • 正式版のリリース

技術スタック

  • frontend: Next.js App Router

  • backend: Next.js Route Handler

  • orm: Prisma

  • database: Supabase

  • ui: CSS Modules + Sass

  • auth: Firebase Authentication + NextAuth

  • storage: Firebase Storage

  • catalog: Storybook

  • test: react-testing-library

  • hosting: Vercel

コアの部分のみ抜粋しています。技術周りの深掘りは別途Zennに投稿する予定です。開発期間が短く、いくつか初見の技術スタックがある中でいい感じにまとまったのかなと思います。

開発のTips

以降は開発者向けのTipsになりますので興味がありましたらご覧ください。


これは過去の経験なのですが、友人から家具アプリの開発を依頼されたことがありました。ところが完成度5割くらいのタイミングで友人の熱量が冷めてしまいポシャってしまいました。どうやら社内の起業コンペ(勝てば出資してもらえるぽい)で負けてしまったのが原因だそうです。

依頼されている以上、サービスの存続は基本的に先方にあります。極端ですが先方のモチベーションに左右されるのでスピード感を持って開発に取り組むことを念頭にいれましょう。


上記を踏まえた上で、不特定多数の方に使ってもらうアプリをビジネス1・開発者1で作る場合はベータ版開発から始めることをお勧めします。

「え、スピード感をもって開発するなら最初から正式版の開発でしょう?」と思うかもしれません。以下に理由を記載します。

①エンジニア主体で開発を進められる

筆者の指す「ベータ版開発」とは詰まるところ個人開発と同じだと捉えていただいて問題ないです。※個人開発 = 自分のGitHubアカウントでリポジトリを作って外部サービスの登録も自分のアカウントとクレカで済まして開発を進めること。

開発開始のタイミングで都合よく正式版で使用するアカウントやクレカが用意されているとは考えにくいです。かと言って、いつ受け取れるかわからない間ただ待つのも時間がもったいないですよね。

②の理由にもかかってきますがベータ版開発で発生するアカウント作成やクレカ登録を開発者側で負担することで開発のスピードを上げることができます。筆者の例で言うとFirebase・Supabase・Vercel・Cloudflare・GitHubが該当します。

②開発がポシャった時のリスクヘッジ

最悪のケースではありますが、開発がポシャった時のために先方と交渉してベータ版はそのまま筆者の資産として筆者のGitHubに残すことを了承してもらいました。ベータ版が出来上がる頃までには正式版で使うアカウントを揃えていただくよう先方にお願いをしています。

ベータ版を自分の資産にできることが前提にはなりますが①で述べたようにベータ版は自分のアカウントで進めているため開発がポシャっても自分のリポジトリにそのまま残りますし、外部サービスの登録の改修をする必要がないので後始末が楽になります。

③ビシネス側との認識齟齬があっても負債にならない

開発する中でビジネス側との認識齟齬が発生すると思います。具体的には筆者はサービス名を勘違いしていてドメインを「unifree」としていましたが「UniFli」が正です。しかし気づいた時は既に開発の中盤まで進めていました。本来なら改修しないといけませんね。

しかしベータ版であったので今回の齟齬は正式版で改めれば問題ありません。スピード感を持って開発するが故に発生したビジネス側との差分をベータ版に押し付けることができるのは非常に楽だと思いました。

また話が逸れるかもしれませんがPlanetScaleのサービス改悪が発表されたので開発終盤でSupabaseに乗り換えたのですが、この時もベータ版開発だったこともあり、あまり恐れずに移行作業に着手することができました。ベータ版はいい意味で雑に扱える環境なので便利だと思いました。

④テスト環境として活用することができる

ベータ版本来のメリットですよね。UniFliでは2月後半にベータ版をリリースしてテストユーザーに触ってもらいFBを元にアプリのブラッシュアップをしていました。

通常の開発でいうところのStaging環境みたいな感じです。正式版リリースの4月1日までにはベータ版をクローズさせる予定で運用しています。


ベータ版開発のメリットを享受しながら先方から最終的なGoサインが出て、正式版のアカウントでサービスを作り直し、綺麗な状態でリリースを行うことができました。正式版の作り直しも1時間もかからないくらいで終わりました。

「ベータ版を作るなんて悠長だ」「そもそもエンジニアが複数人いる現場なら最初から正式版のアカウントは用意すべきだ」と様々なケース・意見があると思いますが、あくまでも今回のUniFliの開発ではかなりマッチしたというところだけご容赦くださいませ。

最後に

「3年もエンジニアやって、いつまで駆け出してるんだよ」とツッコミが入りそうですが2024年2月に転職活動が終わって2024年4月1日から新しい会社で働き始めます。キリもいいのでそろそろ駆け出しエンジニアを卒業してジュニアエンジニアを名乗っても良いのかなと思っているこの頃です。

ということで(?)筆者はエンジニアになってからの月次報告を投稿していますのでお時間がありましたらご覧ください。これからエンジニアになりたい方、駆け出しエンジニアは何をしていたのかなと気になる方の参考になると思います。

また、今後はジュニアエンジニア編のマガジンを更新していきますので、こちらも合わせてご覧いただけますと幸いです。

重複しますが、大学生向け教科書フリマアプリ「UniFli」では開発メンバーを募集しています。ご興味がありましたらこちらにご連絡ください。

しばらくしたら、どのくらいアクティブユーザーを獲得できたのか?実際にどのくらい使用されているのか?アプリを運用する上でのメリット・デメリットなどに関するUniFliの進捗報告をしようと思っています。駆け足になりましたが最後までご覧いただきありがとうございました。

この記事が参加している募集

振り返りnote

この記事が気に入ったらサポートをしてみませんか?