海と冒険者のためのファッション。コバルトラインプレゼントにも最適!写真から作るペットオーダーグッズ。Cobalt Line×mofuno

【Next.js】商品売買・メッセージ機能がついた会員制Webアプリ開発のフロントエンド開発支援

Webアプリケーション
Amplify
Next.js
Typescript

商品の売買や、ユーザー同士コミュニケーションが取れるWebアプリケーションのフロントエンド開発を支援させていただきました。

Webアプリ機能について

アカウントを開設しなくても商品や投稿をお試し閲覧することは可能ですが、アカウントを開設することで商品購入や他ユーザーとのフォローやメッセージやり取り、ブックマークなどの機能が使えます。

また、アカウントにログインした上で店舗アカウントを開設すると、商品販売が可能になり、画像・テキスト・動画・音声・Zipファイルを販売できます。
販売方式は買切りと月額制です。

  • アカウント作成/編集/退会
  • ユーザー認証(Google・Twitter・メールアドレス)
  • 店舗アカウントの開設/編集/閉鎖
  • 店舗アカウントでの投稿/商品投稿/編集/削除
  • お試し閲覧(投稿/商品)
  • 購入した商品の履歴/閲覧/ダウンロード
  • カート/決済
  • 売上履歴/閲覧/引き出し
  • ユーザー・店舗・運営のメッセージやり取り
  • ブックマーク/いいね/フォロー
  • 検索
  • お問い合わせ
  • 運営からのお知らせ

Webアプリ開発について

支援期間

初期リリースまで7ヶ月、リリース後8ヶ月

担当

  • フロントエンド設計
  • フロントエンド開発
  • コードレビュー
  • シナリオテスト

主な言語

  • Javascript
  • Typescript
  • Next.js

ホスティング(デプロイ先)

AWS Amplify ホスティング

開発後コメント

開発開始1ヶ月後くらいに10人ほどのチームに入り、支援させていただきました。

途中フレームワークや開発環境を大きく変更したり、開発人数が減ってしまったりと不安定な部分がありましたが、7ヶ月後リリースとなりました。

リリース後はbundle-analyzer やPage Speed insightを用いてのパフォーマンス改善、お問い合わせをもとにした一部閲覧環境でのユーザビリティ改善や、当時不安定だった middleware で認証が切れてしまう事象の調査・修正などを行なっています。

また、追加開発としてアップロードできるファイル形式にZip形式を取り入れ、アップロード中にユーザーを離脱させないように離脱前のアラート表示やアップロード中の進捗表示を開発しました。

Contactお問い合わせ

やりたいことも課題も、
お気軽に聞かせてください。

「相談からはじめたい」という方も
アイディア段階から
共創させていただきます。