프론트엔드 개발자 면접 준비를 위한 플래시카드 웹앱입니다. 출퇴근 시간에 스와이프하며 핵심 개념을 빠르게 복습하고, 앱을 벗어나지 않고 AI에게 바로 질문할 수 있습니다.
- 스와이프 / 버튼으로 카드 넘기기
- 답변 슬라이드 애니메이션으로 공개
- 7개 카테고리 필터 (CS, HTML/CSS, JavaScript, TypeScript, React, 자료구조, 알고리즘)
- 랜덤 셔플 모드
- AI 문답 기능 (Gemini 3.1 Flash Lite 기반, 현재 카드 컨텍스트 연동)
- 다크모드 / 라이트모드
- 글자 크기 조절 (소 / 중 / 대)
- 키보드 단축키 (← →, Space / Enter)
- PWA 지원 (홈 화면 추가, 오프라인 접속)
| 항목 | 기술 |
|---|---|
| 프레임워크 | Next.js 16 (App Router) |
| 스타일링 | Tailwind CSS v4 |
| 애니메이션 | motion |
| 스와이프 | react-swipeable |
| 테마 | next-themes |
| PWA | @serwist/next |
| 아이콘 | lucide-react |
| 상태관리 | React Context + useReducer |
| AI | Google Gemini API (Gemini 3.1 Flash Lite) |
pnpm install
pnpm dev로컬 환경에서 AI 문답 기능을 사용하려면 루트에 .env.local을 생성하고 Gemini API 키를 설정하세요.
API 키는 Google AI Studio에서 발급받을 수 있습니다.
GEMINI_API_KEY=your_api_key_herehttp://localhost:3000에서 확인할 수 있습니다.
pnpm build
pnpm start질문 목록은 prepare_frontend_interview 저장소를 기반으로 작성되었습니다.