作品概要

コード片をGUIで簡単に生成でき、保存、そして共有できるサイトです。

機能

・影のCSSを生成するジェネレーター ・波のデザインをSVGで生成するジェネレーター ・上記のコードを保存する機能 ・作成したコードを共有する機能

使用技術

ベース

・Next.js ・TypeScript

UI作成

・Tailwind CSS ・Tailwind Varient ・Tailwind Merge ・Framer Motion ・Radix UI ・Storybook ・Chromatic

認証

・Auth.js

DB周辺

・Drizzle ・Supabase

ツール

・Biome ・Lefthook ・Git ・GitHub ・Figma

こだわり

モダンなCSSにも対応

従来のサイトではVanila CSSしか対応していませんが、このサイトはモダンなCSSフレームワーク（Tailwind CSS）にも対応しています。今後は、Panda CSSやEmotionなどにも対応させていきたいです。

Figmaでのデザイン

ユーザビリティに配慮し、多くのユーザに対して一貫性のあるデザインを心がけました。また、操作の可逆性を確保することで、ユーザが誤操作を簡単に元に戻せるよう工夫しました。

Storybookを用いたUI開発

既存のUIライブラリのスタイルが合わなかったため、ヘッドレスなUIライブラリであるRadix UIをベースにデザインにあったスタイルを作成しました。Storybookにもチャレンジし、デザイナーの人と話しながら、開発を進めました。

▼Storybook https://671480a7dd1b3df9d6e66d91-atpdddvuau.chromatic.com/

Drizzleへの移行

普段はPrismaを用いていましたが、クライアント生成がないことやSQLライクに記述できる、また型がより強力なことからDrizzleというORMを新しくキャッチアップし、採用しました。

BiomeとLefthookの採用

元々、ESLint+Prettier+Husky+lint-stagedで開発していましたが、毎回設定が大変で苦労していました。そのため、今回の開発ではESLint+Prettierを統合したBiomeとHusky+lint-stagedを統合したLefthookを採用し、環境構築がとても簡単でした。また、commitlintを導入したため、コミットメッセージを統一したものにできました。

今後の展望

・多言語対応 ・ジェネレータの追加 ・UI/UX改善