RecipeHub

Source: Dev.to

Transforming Recipes Into Culinary Masterpieces Effortlessly

Visit RecipeHub

Built with the tools and technologies

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

Why RecipeHub?

v3

• Firebase SDK integration – real‑time analytics, authentication, database, storage, and enhanced web security.
• Recipe Management – detailed recipe pages, sharing, favorites, and search filters for higher user engagement.
• Email service – approval workflow for submitted recipes; email notifications on user sign‑up and login.
• Web Security – multi‑factor authentication (SMS, email code), JWT, hashed passwords, environment variables via .env, Firebase security rules, linting, and type safety.
• AI Powered – custom AI chatbox (name TBD) to provide status updates on submitted recipes and suggest recipes based on user preferences using a custom ML algorithm or OpenAI SDK.
• WebSocket – real‑time notifications via Firebase SDK and WebSocket.
• Social Media Integration – share, fork, and remix recipes on an integrated platform.
• Admin & User Dashboards – real‑time analytics, user management, and content moderation tools.
• Robust Error Handling & Notifications – ensures stability and clear user communication.
• CI/CD Pipeline – automated build, test, and deployment workflows for continuous delivery.

v2

• LocalStorage integration – analytics, authentication, database, storage, and enhanced security.
• Recipe Management – detailed recipe pages, sharing, favorites, and search filters.
• Admin & User Dashboards – analytics, user management, and content moderation tools.
• Social Media Integration (beta) – share, fork, and remix recipes.
• AI Powered (beta) – custom AI chatbox for status updates and recipe suggestions (ML algorithm or OpenAI SDK).
• Security – environment variables via .env, Firebase security rules, linting, type safety, JWT, hashed passwords, robust auth login and signup.
• Robust Error Handling & Notifications – stability and clear communication.
• CI/CD Pipeline – automated build, test, and deployment workflows.

v1

• Frontend Mentor challenges using basic HTML & CSS.
• RecipeHub iOS & Android App – built with React Native (coming soon).

Project Index

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