【個人開発】webアプリ制作しました Next.js/firebase
今回Next.jsでオリジナルアプリを制作しました。
ファッションアプリを制作しました。
【アプリ名】ISSUN
【URL】https://issun-app.vercel.app/top
【github】https://github.com/nobyn0312/ISSUN_app
コンセプト
アプリ名称の『ISSUN』は一寸法師からとりました。
低身長は洋服のサイズ選びが大変です。
最近はオーバーサイズトレンドで、少しくらい大きくても『オシャレ』で片付くようになりました。
しかし中にはオーバーサイズすぎる洋服もあったり、最近ではそもそもMサイズ,Lサイズしか販売していないブランドも出てきました。
オンラインの買い物の場合、そのような大きすぎる洋服は返品となり、
手間も時間も配送業者のコストもかかってしまいます。
ISSUNでは、ZOZOTOWN,ユニクロといった様々なアパレルのアイテムを一同に閲覧できます。
また着用感のレビュー書き込むことが出来、身長も記載されているので購入の参考になります。
あらかじめ欲しいアイテムの着用感がわかれば、洋服選びの悩みが軽減されます。
また副産物として返品も減るため、配送業者のコストも削減できると考えました。
【使用した言語・技術】
フロント
Next.js
TypeScript
CSS
Tailwind.css 一部の UI へ補助的に利用
uid
スケルトンスクリーン
MUI SnackBar
バックエンド・DB
firebase
デプロイ
vercel
【画面構成】
▼ トップページ【/app/top/page.tsx】
登録されている洋服の一覧が表示されます。 各洋服の詳細への遷移ができ、ソートが可能です。
▼ アイテムの詳細ページ【/app/item/[id]/page.tsx】
洋服(アイテム)の詳細ページです。 登録されたアイテム(洋服)の詳細を確認する事ができます。 アイテムについてのレビューの投稿、閲覧、販売サイトへのリンクを見る事ができます。
▼ ログイン
アプリへの新規登録のためのページ。 Googleでのログイン/ログインも可能 ※ログイン済みの場合はトップページへリダイレクトされます。
▼ ユーザー情報【/app/user/info/page.tsx】
ユーザー名、身長・体型の確認ができ、変更したい場合はeditページへ遷移します。
▼ アイテムの登録 【/app/create/page.tsx】
新しくアイテムを追加する事ができます。 アイテムの名前、価格、説明、画像、販売サイトへのURLを登録できます。
【デザインイメージ】
力強さを表現するためにロゴやタイトルには太めのフォントを使いました。
また、黒字にオレンジというコントラストの高いカラーリングでカッコよさを表現しました。
【感想】
今までTodoアプリやチュートリアル的なwebアプリしか作った事がなく、
0からサービスを考えて作るという経験が出来たのは、人生においてもかなり大きく、自信になった。
『1つでもいいからwebアプリを作った経験を』というエンジニアの方は多いので、
それが達成出来たというのはかなり大きかった。
NodeやGoといったバックエンド・APIを作るまで到達できなかった心残りはありますが、
今までHTML・JSしかやってこなかった自分が、firebaseでDBの処理を行う世界線があるかと思うと感慨深い。
Discussion