Dreamer
App | TypeScript
Todoを達成すると星を獲得でき、星を集めて設定したご褒美をGETすることができるご褒美機能付きTodoアプリを制作しました。現在画像登録はできず、事前に用意したイラストが振られます。 （ テスト用_ username: test / password: 111 ）
https://dreamer-six.vercel.app使用技術詳細：
GitHubDesign
Figma & StoryBook
モバイル主体のデザインで制作しました。他のデバイスでは違和感のないよう背景に画像を設置しています。メニューなどのアイテムや文字間をなるべく広めにとりクリックしやすくしました。 見た目のデザインは、Figmaですべてのページデザインをはじめに作成し、Next.jsでStoryBookを利用して確認しながらコンポーネントを作っていきました。 MUIのアイコンをいくつか使用しているので、StoryBookでアイコンを一覧で確認できたことやコンポーネントごとに見た目などをリアルタイムに確認できたので、とても便利で取り入れて良かったと感じています。 Figmaはスペースやサイズなどの確認や画像の書き出しなど、常に確認しながら作業しました。
Coding
Styling | styled-components、Headless UI、MUI
styled-componentsのThemeProviderを使用しアプリ全体で使うスタイルのthemeを始めに作成し、スタイルの統一と修正や変更のしやすさを取り入れました。コンポーネントと同ファイル内にスタイルを書くことで後から見た時に分かりやすくなりました。アイコンはMUIで統一し、分かりやすいUIを意識しました。ドロップダウンメニューやTodoページのタブにHeadless UIを使用し、動作面でのスムーズさを取り入れました。
Front end | useContext & useReducer
このアプリの特徴であるご褒美機能を作るために、useContextとuseReducerを使用し、ユーザーの保持する星の数をアプリ全体で管理しています。ご褒美を獲得した後も、ご褒美獲得記録ページで獲得した日付とともに一覧で見られるようにしています。
Backend Framework | json-server & express
ログインや新規のサインインの認証登録にjson-serverでexpressを使用しています。レスポンスにcookieを設定し、それをもとにuseContextで現在のユーザーに設定しています。
Form | react-hook-form
アプリのフォームにはすべてreact-hook-formのバリデーションを設定し必須項目のチェックを行っています。