Plantifull Recipes
Front-End Developer
A vegan/vegetarian recipe sharing app
What is Plantifull?
In an attempt to create a web-app to help solve a world problem, we created Plantifull Recipes. Plantifull is a recipe app that provides users with vegan/vegetarian recipes after a simple and intuitive quiz led by our friendly mascot, Sprout. Our goal with this web app was to bring a friendly and smooth way to reduce meat consumption by setting Plantifull on a mission to attempt to introduce users to vegan recipes and other delicious vegetarian alternatives whilst providing education on the effects of the meat and animal agriculture industry on the climate.
The Problem
The meat industry is one of the prime factors for the increase in global warming and climate change due to the amount of resources needed for the maintenance of the agricultural industry. The growth of the animal agriculture industry comes at a huge cost of mass deforestation, and the increase in demand for meat incentivises these damages on the environment. As of this year, the meat agriculture industry is responsible for 24% of greenhouse gas emissions.
Our Solution
In an attempt to help mitigate this issue, our team decided to produce a playful and friendly way to introduce users to a vegan/vegetarian lifestyle through an app that introduces them to delicious alternatives in an effort to reduce the demand of meat and meat by-products in order to reduce the need for animal agriculture.
My Role in Plantifull
Throughout the creation of Plantifull Recipes, I was fully involved in the design and development process and acted as both a UI/UX Designer and Front-end Developer. I have conducted user research and competitive analysis to establish Plantifull’s viability. I was also involved in creating a comprehensive style guide for the app, creating the app’s logo and its UI elements and graphical assets
Furthermore, I was also in charge of bringing the designs to life through the development process, coding Plantifull’s interface design and app functionalities through the use of the React NextJS framework and various other React libraries to make Plantifull’s mission a reality.
The Design Process
Our goal with designing Plantifull was to create an easy and light hearted experience for our users and provide an easy way for them to transition to the vegetarian lifestyle.
Research
In order to determine the viability and authenticity of our ideas for Plantifull Recipes, initial user research was required to be conducted through a user questionnaire. This allowed us to identify our target demographic and get a framework of who we would be creating this app for.
Through the use of Google Forms, our team crafted a comprehensive questionnaire and we sent it to the public to be filled out. The questionnaire we crafted inquired about the following information about our users:
- Their demographic information (Age, gender, etc.)
- Their dietary habits
- Their interests in our app idea
The questionnaire yielded a considerable amount of responses. We were able to gather and visualize the data collected from user responses using Google Sheets. After reviewing the collected data, we were able to establish a vision and direction for Plantifull.
User Persona
The data collected from the questionnaire gave us insight about who our target demographic would be. However, a user persona allowed us to envision the type of person Plantifull would be made for and can be used as a reference during the design and development process.
Our team decided to create 3 user personas as reference. When creating a persona, I wanted to envision a possible user who would not be immediately thought of as a target demographic. I decided to create a Persona of a chef who owns a vegan restaurant and hopes to introduce others to vegetarian alternatives and dispel the stigma around the dietary practice.
Colour Palette
As a vegetarian recipe app, our team wanted Plantifull to have vibrant, green, and earthy colour tones as they would greatly fit the theme of the app and their vibrancy would help catch the attention of our users. The green tones are used as the app’s primary colours and the brown tones are used as a secondary to provide contrast for better app clarity.
Typography
When discussing Plantifull’s visual style and typography, we wanted to capture a playful and welcoming look for our app. Therefore, we chose Grandstander as the type mainly used for headings and titles. However, we also chose Anybody as the main typeface for body typography due to its better legibility and clarity.
Low-Fidelity Prototype
After completing our initial user research and establishing Plantifull’s visual style and identity, we began collaboratively sprinting the app’s layout in an effort to ensure an intuitive, insightful, and welcoming experience for our users. With our goals and results from our research in mind, we designed a LoFi prototype to allow for preliminary usability testing.
High-Fidelity Prototype
Through initial testing of our LoFi prototype, we found insight on the web-app’s UI design that would make the user journey more smooth and enjoyable. Furthermore, we found the need for additional app features for a more streamlined experience. These results allowed for an easier production of the UI components and high fidelity prototype.
The Development Process
Preliminary Considerations
After designing a high fidelity prototype, further usability testing allowed for other additional necessary features and higher presence of Sprout (Plantifull’s mascot), which granted us a smooth transition to the development phase. I then took charge as the lead front-end developer for Plantifull Recipes. As a recipe app, Plantifull will require a large database of recipes to work with. Therefore, an efficient and organized coding process is required to successfully bring Plantilfull to life.
Development Tools and Frameworks
- Visual Studio Code
- Figma
- React NextJS
The Quiz
The quiz section of Plantifull is the app’s main functionality and therefore, I recognized it as our MVP. I wanted to make sure that this quiz is developed to be intuitive and insightful.In an attempt to develop a more user friendly interface, I developed the quiz in a way where users would need to choose an answer and confirm their selections. This was done but using the radio type HTML input tag. These input tags were placed within label tags to differentiate different choices in the quiz.
<h1 className={styles.question}>[QUESTION]</h1>
<label>
<input
type="radio"
value="answer1"
/>
</label>
<label>
<input
type="radio"
value="answer2"
/>
</label>
<label>
<input
type="radio"
value="answer3"
/>
</label>
<label>
<input
type="radio"
value="answer4"
/>
</label>import { useState } from 'react';
const [answer, setAnswer] = useState('');
const handleAnswer = (event) => {
setAnswer(event.target.value);
}
// Answer code sample
<label>
<Image src={'[IMAGE LINK]'} width={125} height={125}/>
<input type="radio" name="answer" value="vegan" onChange={handleAnswer}/>
</label>In order to present the user with the recipe they desire, our team came up with three questions to ask them.
- Their dietary practice
- The type of cuisine
- Their meal type (breakfast, lunch, and dinner)
In order to store the answers inputted by the users, I used a combination of a custom handler function and the React hook useState in order to change the value stored in the useState variable based on which input the user presses.
Since each quiz layout was developed using separate React components, I used the React child to parent method in order to transfer the stored data from the component onto the page it is being displayed on. The data stored is then transferred into other useState variables on the page.
import { useState } from 'react';
import QuestionBoxOne from "../components/QuestionBoxOne";
import QuestionBoxTwo from "../components/QuestionBoxTwo";
import QuestionBoxThree from "../components/QuestionBoxThree";
const [type, setType] = useState('');
const [cuisine, setCuisine] = useState('');
const [time, setTime] = useState('');
const typetoResult = (data) => {
setType(data);
}
const cuisinetoResult = (data) => {
setCuisine(data);
}
const timetoResult = (data) => {
setTime(data);
}
//Custom question components
<QuestionBoxThree timeData={timetoResult}/>
<QuestionBoxTwo cuisineData={cuisinetoResult}/>
<QuestionBoxOne typeData={typetoResult}/>import Router from 'next/router'
import { useState } from 'react'
const [type, setType] = useState('');
const [cuisine, setCuisine] = useState('');
const [time, setTime] = useState('');
const sendData = () => {
Router.push({
pathname: '/results',
query: {
type,
cuisine,
time
}
})
}
// Calling sendData() function through a button after quiz is complete
<button onClick={() => sendData()}>Results</button>In order for the user to get their results from the quiz on a different page, I needed to transfer the data entered by the user. I did this by using the React NextJS library Router, allowing me to transfer data stored in the useState variables to a results page to be used to generate a recipe for the user.
The Recipe Database
Our vision for Plantifull was to provide our users a multitude of recipes they can find based on their answers from the quiz. However, in order to efficiently provide these recipes, they needed to be placed in a database to be pulled from and displayed on the page. I decided to locally create this database, which can be imported and used in any page in our web-app.
export const recipes = [
{
type: "Vegan",
cuisine: "Western",
mealType: "Breakfast",
name: "Vegan Banana Bread Pancakes
with Chocolate Chunks",
ingredients: ["INGRENDIENT ONE", "INGRENDIENT TWO", "INGRENDIENT THREE", "INGRENDIENT FOUR", "INGRENDIENT FIVE"],
instructions: ["STEP ONE", "STEP TWO", "STEP THREE", "STEP FOUR", "STEP FIVE"],
},
{
...
}
]The Recipe Results
In order to provide a recipe based on what answers the users chose, data that was transferred from the quiz page needs to be captured and stored in the results page. This was done through the use of React's useRouter hook.
import { useRouter } from 'next/router';
const router = useRouter();
const {
query: {type, cuisine, time}
} = router;
const answers = {
type,
cuisine,
time
}import { recipes } from '@/data/recipes.js'
const [data, setData] = useState (recipes);
<div>
{
data && data.map((info, index) => {
if (info.type.toLowerCase() === answers.type
&& info.cuisine.toLowerCase() === answers.cuisine
&& info.mealType.toLowerCase() === answers.time) {
return (
// Custom recipe component
<ResultBox
key={index}
name={info.name}
ingredients={info.ingredients}
steps={info.instructions}
/>
)
}
})
}
</div>Once the user inputs are stored in the results page, I then was able to import the database onto the page and store it in a useState variable. In order to display the recipe that aligns with the user's choices. I used the javascript map() function to go through the database and pull the specific recipe using the user’s inputs as a condition. Once the recipe is found, the data within the object is then displayed onto the “ResultBox” component, which lays out the recipe in a clean and clear manner.
Challenges and Key Takeaways
Plantifull Recipes was one of the first apps that we’ve created whilst using the app creation process. We conducted user research and competitive analysis, created personas, and performed usability testing. The usability testing posed a great challenge as they slowed down the development process. However, consistently testing Plantifull was very insightful and necessary to bring Plantifull to its fullest potential.
In regards to development, Plantifull was our introduction to the React NextJS framework. Developing Plantifull gave me the opportunity to learn the React framework and further improve my skills in front-end web development, creating responsive and dynamic interfaces using React states and various other hooks.
Points of Improvements
While reviewing my code, I recognized that certain aspects and features such as the quiz could have been done more efficiently. For example, instead of creating separate components for each question in the quiz, I could create one dynamic component that could change once the user goes through each question using React hooks and states.
In order to create a more personalized experience in the quiz section, an addition of more questions can be helpful to be used as additional filters for a more accurately picked recipe for the user. The addition of new filters such as calorie count and cost in the form of quiz questions would also allow for more additions of recipes to the database.
Conclusion
I designed and developed a vegetarian/vegan recipe app that would give users recipes after a simple and intuitive quiz. I was fully involved in every aspect of the web-app’s creation (research, design, and development). I was involved in the creation of Plantifull’s visual style. I also took charge as the lead developer and had the opportunity to bring Plantifull to life using the React NextJS framework, creating a web-app with a streamlined and dynamic experience using the React states and hooks. Creating Plantifull granted me insight in the design process of applications and has made me a more efficient developer.
Navid Memari
work.nmemari@gmail.com
