레시피허브

Source: Dev.to

레시피를 손쉽게 요리 걸작으로 변신시키기

레시피허브 방문하기

사용한 도구 및 기술

• HTML
• CSS
• TailwindCSS
• Shadcn UI
• JavaScript
• LocalStorage
• Next.js
• React
• Resend
• Restful API (dummyjson)

왜 RecipeHub인가?

v3

• Firebase SDK 통합 – 실시간 분석, 인증, 데이터베이스, 스토리지 및 향상된 웹 보안.
• 레시피 관리 – 상세 레시피 페이지, 공유, 즐겨찾기, 검색 필터 제공으로 사용자 참여도 상승.
• 이메일 서비스 – 제출된 레시피에 대한 승인 워크플로우; 사용자 회원가입 및 로그인 시 이메일 알림.
• 웹 보안 – 다중 인증(문자, 이메일 코드), JWT, 해시된 비밀번호, .env 환경 변수, Firebase 보안 규칙, 린팅, 타입 안전성.
• AI 기반 – 사용자 선호도에 따라 레시피 상태 업데이트와 레시피 추천을 제공하는 맞춤형 AI 챗봇(이름 미정) – 커스텀 ML 알고리즘 또는 OpenAI SDK 활용.
• WebSocket – Firebase SDK와 WebSocket을 통한 실시간 알림.
• 소셜 미디어 연동 – 플랫폼 내에서 레시피를 공유, 포크, 리믹스.
• 관리자 및 사용자 대시보드 – 실시간 분석, 사용자 관리, 콘텐츠 모더레이션 도구.
• 견고한 오류 처리 및 알림 – 안정성 확보와 명확한 사용자 커뮤니케이션.
• CI/CD 파이프라인 – 자동화된 빌드, 테스트, 배포 워크플로우를 통한 지속적 전달.

v2

• LocalStorage 통합 – 분석, 인증, 데이터베이스, 스토리지 및 보안 강화.
• 레시피 관리 – 상세 레시피 페이지, 공유, 즐겨찾기, 검색 필터.
• 관리자 및 사용자 대시보드 – 분석, 사용자 관리, 콘텐츠 모더레이션 도구.
• 소셜 미디어 연동 (베타) – 레시피 공유, 포크, 리믹스.
• AI 기반 (베타) – 상태 업데이트와 레시피 제안을 위한 맞춤형 AI 챗봇(ML 알고리즘 또는 OpenAI SDK).
• 보안 – .env 환경 변수, Firebase 보안 규칙, 린팅, 타입 안전성, JWT, 해시된 비밀번호, 견고한 인증 로그인 및 회원가입.
• 견고한 오류 처리 및 알림 – 안정성 및 명확한 커뮤니케이션.
• CI/CD 파이프라인 – 자동화된 빌드, 테스트, 배포 워크플로우.

v1

• 기본 HTML & CSS를 사용한 Frontend Mentor 챌린지.
• RecipeHub iOS & Android 앱 – React Native로 구축(곧 출시).

프로젝트 인덱스

Recipe_App/
├── README.md
├── app
│   ├── admin
│   ├── api
│   ├── cicd
│   ├── contact
│   ├── dashboard
│   ├── explore
│   ├── favorites
│   ├── globals.css
│   ├── layout.tsx
│   ├── login
│   ├── not-found.tsx
│   ├── page.tsx
│   ├── recipe
│   └── signup
├── changelog.md
├── components
│   ├── Footer.tsx
│   ├── admin
│   ├── ai-assistant
│   ├── auth
│   ├── comingsoon.tsx
│   ├── contact.tsx
│   ├── dashboard
│   ├── explore-recipes.tsx
│   ├── favorite-button.tsx
│   ├── favorites-list.tsx
│   ├── header.tsx
│   ├── hero-section.tsx
│   ├── recipe-card.tsx
│   ├── recipe-detail.tsx
│   ├── recipe-filters.tsx
│   ├── recipe-grid.tsx
│   ├── recipe-search.tsx
│   ├── share-recipe-button.tsx
│   ├── theme-provider.tsx
│   └── ui
├── components.json
├── contexts
│   ├── admin-context.tsx
│   ├── auth-context.tsx
│   ├── favorites-context.tsx
│   └── user-recipes-context.tsx
├── firebase.ts
├── lib
│   ├── email.ts
│   ├── error-handler.ts
│   ├── recipe.ts
│   └── utils.ts
├── next.config.mjs
├── package-lock.json
├── package.json
├── postcss.config.mjs
├── styles
│   ├── recipehub.jpeg
│   └── globals.css
├── tailwind.config.css
├── tailwind.config.ts
└── tsconfig.json