RECIPEHUB

Link: https://receipehub.dev

Transforming Recipes Into Culinary Masterpieces Effortlessly

Built with the tools and technologies:

HTML, CSS, Tailwindcss, Shadnui, JavaScript, localstorage, next, react, resend, RestfulAPI (dummyjson)

---

Table of Contents

• RECIPEHUB
  • Table of Contents
  • Overview
  • Features
  • Project Structure
    • Project Index
  • Getting Started
    • Prerequisites
    • Installation
    • Usage
    • Testing

---

Overview

Why RecipeHub?

This project simplifies creating engaing culinary communities by providing seamless localstorage integration, consistent UI design, and comprehensive content managment features.

The core feature includes:

v3

• 🧑‍💻 Firebase SDK integration: Real time analytics, authentication, database, storage, enhanced web security.
• 🍽️ Recipe Management: Real time detailed recipe pages, sharing, favorites, and search filters to enhance user engagement.
• Email service: Approves, decline, pending status for submitted recipes. Recive email when user signs up and login for enhanced security purposes.
• 🛡️ Web Security: Multifactor authenticaion: User can recive real time SMS, email confirmation or email code to authenticate their account. JWT and Hashed password and robust auth login and signup. Environment variables via .env for sensitive data. Firebase security rules (implied). Linting and type safety reduce runtime errors.
• AI Powered: Builing a custom AI chatbox (thinking of a name) to enhance, optimze, and letting the user know the status of the submitted recipe. Chatbox helps with looking for recipes based on the user preference using custom Machine learning algorithm or OPENAI SDK.
• WebSocket: Get real time notification using Firebase SDK and Websocket.
• Social Media Integration: Gain access a integrated social media platform to share, fork, and remix your recipes on recipeHub.
• 📊 Admin & User Dashboards: Real time Analytics, user management, and content moderation tools for platform oversight.
• ⚙️ 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: Setup for analytics, authentication, database, storage and ensuring enhanced security.
• 🍽️ Recipe Management: Detailed recipe pages, sharing, favorites, and search filters to enhance user engagement.
• 📊 Admin & User Dashboards: Analytics, user management, and content moderation tools for platform oversight.
• Social Media Integration (beta): Gain access a integrated social media platform to share, fork, and remix your recipes on recipeHub.
• AI Powered (beta): Builing a custom AI chatbox (thinking of a name) to enhance, optimze, and letting the user know the status of the submitted recipe. Chatbox helps with looking for recipes based on the user preference using custom Machine learning algorithm or OPENAI SDK.
• 🛡️ Security: Environment variables via .env for sensitive data. Firebase security rules (implied). Linting and type safety reduce runtime errors. JWT and Hashed password and robust auth login and signup
• ⚙️ Robust Error Handling & Notifications: Ensures stability and clear user communication.
• 🚀 CI/CD Pipeline: Automated build, test, and deployment workflows for continuous delivery.

v1

• Frontend Mentor Challenges using basic HTML, CSS.

---

v1 ReceipHub: IOS and Android App using React Native (Coming Soon)

- Dont want to expose secrets

Features

---

Project Structure

└── 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

⬆ Return

---