個人開発のWebサービス『CAMP STACK』のβ版をリリースしました。

Web開発

ユージンです。

前回の投稿でWebサービスを作ることを書きましたが、今回なんとかβ版のリリースをすることができたのでその報告です!

『CAMP STACK』

つくったものは『CAMP STACK』というWebサービスです。
キャンプ道具を収納サイズから検索することができます!

URLはこちら➡︎ https://camp-stack.com/

↑この箱の大きさを変化させて、アイテムを検索することができます。

※まだβ版ですので検索できるアイテムは一部メーカーのテントのみになっています。

やったこと

今回やったことで大きかったのは、

  • サイズ選択ボックスの作成
  • Next.jsで開発(ホスティングはVercelを使用)
  • Firebaseへデータ入力

の3つでした。

サイズ選択ボックスの作成

本サービスで一番特徴のある部分です。直感的に大きさを選択できるUIを考えているとき、このアイディアが浮かんだので作ってみみました。
実装方法はReactとCanvasで箱を描写して、スライダーコントロールにはMaterial-UIを使いました。
なかなかよくできたと思っています。

Next.jsで開発

Next.jsというのはReactを使ったWebサービスのフレームワークです。
Next.jsを使うのは初めてでしたが、サーバーサイドレンダリング(SSR)を使ってSEOの改善が期待できたので今回使ってみることにしました。
シンプルなフレームワークなので、Reactを直接使うより簡単だったかもしれません。

また、ホスティング(サーバー)はVercelというサービスを使いました。
Next.jsを開発している会社のサービスなので簡単で高速しかも無料!で使えているのでとても良いです。

Firebaseへのデータ入力

商品アイテムの管理はAmazonで検索した結果をGoogleスプレッドシートでまとめて管理しています。
(これが現在とても面倒です。。)

バックエンドAPIにはFirebaseを使っているので、スプレッドシートからFirebaseへのデータ入力はTypeScriptで作成したスクリプトを利用しています。

やってみて

9月の連休から技術調査を始めて、開発は10月の1ヶ月間行いました。
仕事もあるので平日は毎朝6時くらいに起きて2~3時間程度を開発に当てました。
また土日もどちらか1日を開発に当てる生活をして、充実していたもののなかなか大変に感じることも多かったです。

ただ、開発はとても楽しく思っていたよりもいいものができたので達成感はとても大きいです!

今後の開発

まだまだβ版で入力されている商品アイテムの数も多くないため、まずはアイテム数を拡充していけるような仕組みを作っていきたいと思います。
また、バグや調整の必要なところもたくさんあるので並行してアップデートしていきます。

あとSEO対応がほとんどできてないのですぐやります。