sheisgoodness / mealpalv2

MealPal

Welcome to MealPal, an innovative online platform that aims to provide users with personalized meal plans tailored to their individual needs or health challenges. Cohort 9 Pro Capstone Project. The app is designed to incentivize user engagement through gamification features such as referral links, point awards, and meal plan points.

Table of contents

• Features

• Team Members

  • Team One
  • Team Two
  • Team Three
  • Team Four
  • Team Five

• Tools

• Resources

• Hosted Project

Team Members

Team One

• Achi Faith IfyFaith24
• Nwachukwu Chinechelum Eucharia Eucharian8

Team Two

• Babatunde Maryam Joyfuol

Team Three

• Michelle Kurgatcheriahkay

  Team Four

• Goodness David Sheisgoodness

Team Five

Team Memebers

• Maduka Favour madukafavour
• Iwuchukwu Divine IwuchukwuDivine

Overview

The app is designed to incentivize user engagement through gamification features such as referral links, point awards, and meal plan points.

Team Contributions

• Profile : [Joyfuol] Worked on the profile input section by changing the dummy text to a placeholder which allows users to input their details without having to delete any text.

• Allergies : [Joyfuol] Added more allergies to ensure users with different ailments can benefit from the app.

• Diet Options : [Joyfuol] Included more diets options to the dietary options. This will enable 70% of individuals to benefit from the app.

• Meal list : [Joyfuol] Updated the recommended meal plans by adding different types of cuisines which includes African dishes, Chinese dishes and Mexican dishes.

• BMI Calculation: [Goodness David] Implemented a feature to calculate the user's BMI and display their status.

• Goal Screen: [Goodness David] Added a goal screen where users can select their health and dietary goals.

• Meal Details : [Joyfuol] Created meal details page which displays details about the meal starting from ingredients, nutritional values and video tutorial on how to make it.

• Search Bar : [Joyfuol] Added a search bar option to the recommended meals which enables easy search instead of scrolling through a long search.

• FAQ : [Joyfuol] FAQ serve as an app guide. I created a FAQ page to solve any problem users might encounter while navigating through the app.

• Bookmark : [Joyfuol] Created bookmark option for users to save favorite meals and learn how to prepare them.

• Meal Plan Points: [sarahlutaaya256] developed the functionality related to meal plan points, including tracking user activities and assigning points accordingly.

• Referral Link: [Eucharian8] Made the referral link redirect the new user to the signup page. Each referral link is generated with the User's ID that is stored in the firebase database, making it unique.

• Copy Link and Share Button: [Eucharian8] Improved the UI of the referral link copy button and added a share button.

• Create Meal Plan Page: [ifyfaith24] a dynamic and user-centric feature within our meal planning application. This page allows users to generate personalized meal plans based on their dietary records and preferences.

• Feedback Form feature: [ifyfaith24] an essential component for collecting user insights and improving our service.

Features

Create Meal Plan

Enhance the ability for users to create customized meal plans based on dietary preferences, health goals, and calorie requirements. Key aspects of this feature include:

 . User Preferences Integration: user-specific dietary information such as allergies, diet type, budget, and dislikes. This ensures that the meal plans generated are tailored to each user's unique needs and restrictions.

 . Preference-based Meal Generation: By considering users' food preferences, the system generates a    comprehensive meal plan schedule. Users can opt for meal plans that span either a week or two weeks.

 . Interactive User Experience: The interface is designed to be intuitive and responsive, allowing users to easily navigate through their personalized meal plans and make adjustments as needed.

Landing Page

The landing page includes the welcoming address, get started function and sign in function.

Get Started

The get started process is the first step to enjoy the full benefits of our meal planning app. Follow these steps:

• Open the app and click on the "Get Started" button.
• Select your goal, dietary preferences, allergies, health conditions, and enter your BMI to calculate your body mass index.
• Enter your email address and create a strong password.
• Fill in your personal details, including your name and contact information.
• Review our Terms and Conditions and Privacy Policy.
• Click the "Sign Up" button to create your account.

Sign In

If you already have an account, log in using these steps:

• Open the app and click on the "Log In" button.
• Enter your registered email address and password.
• Click the "Sign In" button to access your account.

Referral Feature

• Automatically generates a referral link for logged-in users.
• Referral links are unique to each users because it's been generated with the User's ID.
• Users earn points for every successful referral.
• Points can be redeemed for rewards.
• Users can copy their referral link to the clipboard.
• Points are stored in firebase database to add points to any user that refers a new user by successfully signing up.

How It Works

• Upon logging in, users are automatically provided with a referral link.
• Users can copy their referral link to the clipboard by clicking the "Copy" button.
• When a referral signs up using the referral link, the referring user earns points.
• Points are displayed in the UI and stored in local storage.
• Users can redeem their points for rewards by clicking the "Redeem Points" button.

Team Members

Team One

• Achi Faith IfyFaith24
• Chinechelum Eucharia Eucharian8

Team Two

• Babatunde Maryam Joyfuol

Team Three

-Michelle Kurgatcheriahkay

• Ajisegbede Oluwamayowa Priscilla Ashaoluwaseeni

  Overview

  The app is designed to incentivize user engagement through gamification features such as referral links, point awards, and meal plan points.

  Team Contributions

• Profile : [Joyfuol] Worked on the profile input section by changing the dummy text to a placeholder which allows users to input their details without having to delete any text.

• Allergies : [Joyfuol] Added more allergies to ensure users with different ailments can benefit from the app.

• Diet Options : [Joyfuol] Included more diets options to the dietary options. This will enable 70% of individuals to benefit from the app.

• Meal list : [Joyfuol] Updated the recommended meal plans by adding different types of cuisines which includes African dishes, Chinese dishes and Mexican dishes.

• Meal Details : [Joyfuol] Created meal details page which displays details about the meal starting from ingredients, nutritional values and video tutorial on how to make it.

• Search Bar : [Joyfuol] Added a search bar option to the recommended meals which enables easy search instead of scrolling through a long search.

• FAQ : [Joyfuol] FAQ serve as an app guide. I created a FAQ page to solve any problem users might encounter while navigating through the app.

• Bookmark : [Joyfuol] Created bookmark option for users to save favorite meals and learn how to prepare them.

• Contact Us : [Ashaoluwaseeni] Worked on the Contact Us Page and this comprises of the "Reasons For which includes a drop down of (Options of 'Question about the app, Report an issue with the app, Suggestions for the app and Others', Email Address, Full Name, and Note). this section allows users to give their opinions about the MealPalV2 App.

• Success : [Ashaoluwaseeni] I created and worked on the Success Page which allows the users access to download the form filled in Contact Us Page after which, takes the user to the Home Page after a Successful ContactUs form had been filled and sent. This also help users have the assurance that their request has been sent Successfully.

• Bookmark : [Ashaoluwaseeni] I created bookmark work space for my partner in order for her to have fast and easy template.

• FAQ : [Ashaoluwaseeni] FAQ is an app that serve as guide for users. I created a FAQ work space for easy and fast template for my partner to easily work on.

• LogOut : [Ashaoluwaseeni] Created Log Out option for users to easily LogOut and this authormatically take them back to the Home Page.

  • Meal Plan Points: [sarahlutaaya256] developed the functionality related to meal plan points, including tracking user activities and assigning points accordingly.

  • Referral Link, Copy Link and Share Button: [Eucharian8] made the referral link redirect the new user to the signup page. Improved the UI of the referral link copy button and added a share button.

  • Meal list : [cheriahkay] Updated the recommended meal plans by adding additional cusines.The cuisines included:Italian Cuisines,Indian Cuisines and Japanese Cuisines.

  • Nutritional and Ingredients Cards: [cheriahkay] updated the meal detail page

    • The Meal list component now includes cards with a light gray background for nutritional value and ingredients. Each card displays the respective information in a structured format.

  • Full Screen Image Feature: [cheriahkay] added the full screen image feature

    • Users can now click on the meal image to view it in full screen mode, enhancing the viewing experience.

  • Cooking Time, Meal Serving, and Rating: [cheriahkay] integrated these features into the meal detail page

  • Cooking time, meal serving amount, and rating are now displayed horizontally with a gray background below the meal image for quick reference.

  • Dynamic Content Rendering: [cheriahkay] implemented dynamic content rendering

    • The app dynamically updates the meal detail page based on the selected meal from the recommended meals page. Users can seamlessly navigate between different meal details.

  • YouTube Video Embedding: [cheriahkay] created Embedded YouTube video tutorials directly in the meal detail page using the react-youtube component. Ensuring video thumbnails are displayed correctly and play without errors.

  Features

  • Referral System Users can generate unique referral links. Points are awarded to users when someone signs up using their referral link. Detailed analytics and reporting on referral activities.
  • Point System Points are awarded for various in-app actions such as completing tasks, reaching milestones, and engaging with content. Points can be redeemed for rewards or used to unlock premium features.
  • Meal Plan Points Users earn points for following the meal plan provided by the app. Points are awarded based on adherence to the plan, healthy eating choices, and consistency.
  • Create Meal Plan Enhance the ability for users to create customized meal plans based on dietary preferences, health goals, and calorie requirements.

Community Page

Overview

• [IwuchukwuDivine] recreated the overall interface of the community page to give users a more detailed description and use of the page for better use and interaction with other users.

• [madukafavour] implemented the functionalities of the community page to provide accessible features for users.

  Features

• The community page contains routes for various features i.e it has space for internal storage of posts posted by another user and also the ability to remove such posts from the saved post lists.

• It also has user moderation support system, it helps other users to report violent or other issues related to a post for moderation of contents.

• Links can be copied and posted to other users within the platform.

• The search-bar helps users to navigate to the desired post or content of their choice by inputting any keywords that supports the search.

• Create a new post button navigates to the position or location a user wants the post to appear in and displays the corresponding posts there.

  Installation

  • Clone the repository: git clone https://github.com/PrincessMaggy/MealPalV2
  • Install dependencies: npm install
  • Build and run the application: npm run build npm run dev

Tools

• React: Frontend framework for building user interfaces.
• JavaScript: Programming language used for frontend logic.
• HTML/CSS: Markup and styling languages for structuring and styling the UI.
• Local Storage: Used to store and retrieve points for each user.
• API: A food api may analyze recipe costs and nutritional values,classify foods into allergens,compute meal plans, etc. Spoonacular food and recipe api is the only API you will ever need. Its effficient and reliable.
• API: A form api that captures all feedback sent in the feedback section of the app. Each user gets a reply after their feedback has been received.

Languages, Framework and Tools

• Firebase (for data storage)
• React(vite)
• Tailwind CSS
• Github
• API (https://spoonacular.com/food-api)
• API (https://www.emailjs.com/docs/)

Hosted Project

Explore the live version of the MealPal Web App here MealPal. Thank you for choosing MealPal