한 주말에 Next.js와 MongoDB로 검색 엔진을 만든 방법

Source: Dev.to

The Problem 😫

새로운 React 프로젝트를 시작할 때마다 문서 사이트를 오가느라 몇 시간을 허비합니다.

“Material UI에 Mantine보다 나은 Date Picker가 있을까?”
“어떤 라이브러리의 Accordion이 가장 보기 좋을까?”

드롭다운 메뉴를 고르기 위해 탭을 15개나 열어놓게 되었습니다.

The Solution 💡

주말을 이용해 UI Search를 만들었습니다 — 오픈소스 UI 컴포넌트를 위한 중앙 검색 엔진입니다.

상위 15개 라이브러리(MUI, ShadCN, Radix, DaisyUI 등)의 문서를 인덱싱해 한 번에 검색하고 모든 결과를 나란히 볼 수 있습니다.

How it Works 🛠️

전체 스택 앱은 다음으로 구성됩니다:

• Next.js 14 (App Router)
• MongoDB Atlas (컴포넌트 메타데이터 저장)
• Tailwind CSS (UI)

이 문서 사이트들의 사이트맵을 인덱싱해 데이터베이스를 최신 상태로 유지하는 커스텀 스크립트를 작성했습니다.

Try it out 🚀

실시간으로 무료 이용 가능: https://ui-search-engine.vercel.app

여러분의 의견을 듣고 싶습니다! 인덱스에 추가하면 좋을 다른 라이브러리가 있을까요?