RecipeHub

Source: Dev.to

轻松将食谱转化为烹饪杰作

访问 RecipeHub

使用的工具与技术

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

为什么选择 RecipeHub？

v3

• Firebase SDK 集成 – 实时分析、身份验证、数据库、存储以及增强的网页安全。
• 食谱管理 – 详细的食谱页面、分享、收藏和搜索过滤器，提高用户参与度。
• 邮件服务 – 提交食谱的审批工作流；用户注册和登录时的邮件通知。
• 网页安全 – 多因素身份验证（短信、邮件验证码）、JWT、密码哈希、通过 .env 管理环境变量、Firebase 安全规则、代码检查（lint）和类型安全。
• AI 驱动 – 自定义 AI 聊天框（名称待定），提供提交食谱的状态更新，并基于用户偏好使用自定义机器学习算法或 OpenAI SDK 推荐食谱。
• WebSocket – 通过 Firebase SDK 和 WebSocket 实现实时通知。
• 社交媒体集成 – 在集成平台上分享、分叉和 remix 食谱。
• 管理员与用户仪表盘 – 实时分析、用户管理和内容审核工具。
• 完善的错误处理与通知 – 确保系统稳定并提供清晰的用户沟通。
• CI/CD 流水线 – 自动化构建、测试和部署工作流，实现持续交付。

v2

• LocalStorage 集成 – 分析、身份验证、数据库、存储以及增强的安全性。
• 食谱管理 – 详细的食谱页面、分享、收藏和搜索过滤器。
• 管理员与用户仪表盘 – 分析、用户管理和内容审核工具。
• 社交媒体集成（Beta） – 分享、分叉和 remix 食谱。
• AI 驱动（Beta） – 自定义 AI 聊天框用于状态更新和食谱推荐（机器学习算法或 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