Let's search for Icon -アイコンを特徴で検索しよう！-

このアプリについて

Let's search for IconはマテリアルアイコンとFontAwesomeアイコンを特徴で探せるアプリです。
「いいね」「矢印」「人」のような特徴で検索してみてください。

作ったきっかけ

　例えば、♡(ハート)のアイコンが欲しかったとして、マテリアルアイコンのページでハートと検索しました。しかしながら、私が欲しい「ハート」アイコンの正しい名前は「favorite」なので検索に引っかからない。そうなると、1000個以上あるアイコン一覧から目視で探し出さなければなりません。その手間を省くアイコン検索アプリが必要だったので、このアイコンを特徴で検索できるLet's search for Iconアプリを作成しました。

誰に向けて作ったか

アプリやウェブサイトを作るエンジニアやデザイナーに向けてつくりました。このアプリを使って時短してください。

技術

フロントエンド

react + hooks + redux + typescriptの構成で組ました。
flutterと違って、react + jsだったり、hooksを使わなかったり、様々なパターンのサンプルがあり苦労しました。

サーバーサイド

firebaseのhostingとfirestore、analysisを使用
やはりfirebaseは簡単でいいですね。
analyticsは一行で使えちゃいますし、firestoreもたった３行です。

const firebaseConfig = {
  apiKey: '',
  authDomain: '',
  databaseURL: '',
  projectId: '',
  storageBucket: ',
  messagingSenderId: '',
  appId: '',
  measurementId: '',
};

export default firebaseConfig;

firebase.initializeApp(firebaseConfig);
firebase.analytics();

const db = firebase.firestore();
const dbPath = db.collection(path);
dbPath.add({ word, timeStamp });

最後に

検索すればするほど情報が蓄積されて、特徴検索の精度が高くなっていきます。どんどん検索してください。