Giter VIP home page Giter VIP logo

pickyeater's Introduction

PickyEater

commit Issues Fork Watch

Table of Contents

ย 

ย 

๐Ÿ“— About this Application

ย 

PickyEater - A React Native App

ย 

A healthy diet helps to protect against malnutrition in all its forms, as well as non-communicable diseases (NCDs), including diabetes, heart disease, stroke, and cancer. An unhealthy diet and lack of physical activity are leading global risks to health. Nowadays, people are consuming foods with high fat, calories, sodium and many of them do not have enough fruits, vegetables, and other dietary fiber such as whole-grain - World Health Organization(WHO)

ย 

The food you eat can be either the safest and most powerful form of medicine or the slowest form of Poison. - Ann Wigmore

ย 

This application is implemented in React Native (build with expo and Redux). It is designed for both iOS and Android as it is cross-platform application. Apart from this high fidelity mockups are designed in AdobeXD.

ย 

๐Ÿ— Introduction

Why?

The key objective of this application is to raise awareness about how many calories and nutrients are contained by dish. So that one can maintain a healthy diet while simultaneously satisfying cravings for tasty foods. People who cook for themselves may be perplexed sometimes as to how to prepare something different. At some stage, you may become bored with the same old recipes and flavors. So that people can search by item name and get a list of possibilities with nutritional information and the entire recipe for that dish. Apart from this, best way to learn any concept is to implement it in real life. So, to use my basic practical knowledge about React-native from academics, I have decided to implement this project. This project is also a part of my curriculum.

Intended Audience

This application is for anyone who is worried about their health and diet in their everyday lives. Also, for individuals who are weary of the same old recipes and flavours and want to try something new while maintaining their health, this app allows them to search among over 2 million dishes, which is a significant quantity.

ย 

๐Ÿ† Features

  • Splash Screen
  • Search over 2 million+ recipes
  • Can use any keword for search such as apple, salad, soup, cookies, low calories, vegetarian and so on
  • Get health labels like vegan, peanut-free, Egg-free, Sesame Free and so on
  • Get details about nutrition
  • Get list of ingredients
  • Get a full recipe of a dish
  • Get a type such as dessert, soup, salad and so on

ย 

๐ŸŽจ User Interface and design

  • AdobeXD file for high fidelity mockup is in ./UserInterface/PickyEater.xd
  • Source file for logo is in ./UserInterface/Logo.ai

ย 

๐Ÿ“Š Data source

Data used in whole applcation comes from API.

ย 

๐Ÿ“ฆ Getting started

Installation Instruction

First you should install latest version of node.js as per your operating environment.

Clone the Application

[email protected]:krupa15/PickyEater.git

Or you can use below link also:

https://github.com/krupa15/PickyEater
cd PickyEater

Installing Dependencis

npm install -g expo-cli

Other downloads

Top Navigation Bar

npm install @react-navigation/material-top-tabs react-native-tab-view
expo install react-native-pager-view

Table Component

npm install react-native-table-component

Redux

npm install redux

expo-linking (Give a web link to button)

expo install expo-linking

axios (HTTP client for the browser and node.js - used to call API in this project)

npm install axios

Troubleshooting with dependencies and version

expo doctor --fix-dependencies

Run Application

expo start

After expo start run it on browser with localhost server. You will see screen on browser as below. On bottom left corner there are three options Tunnel, LAN and local. Default option is LAN but to run an application we need to switch to Tunnel mode. After successful connection of tunnel scan the QR code to run it on your device.

ย 

Localhost Server Image

ย 

Screenshots of User Interface

ย 

ย 

๐Ÿš€ References

ย 

Future Ideas

  • Implementation of share button to share any recipe
  • Implement login and signup functionalities to add recipes to wishlist
  • User can upload their own recipes which should be verified by admin first
  • Recommandation based on previous search
  • Provide like and comments section in each recipes so that users can like and comment each other's recipe
  • Open forum to ask general question

ย 

How to Contribute

This is a free and open-sourcesource initiative. Anyone can make a contribution based on future ideas. If there are any suggestions that are not included in future ideas, they can be made. Also, if the future ideas presented are not applicable to this application and are not beneficial to the user, one can make a proposal. If you want to help with development, you can look at the manifest of files listed below to get an understanding of what each file is about.

Manifest

  • README.md ---> This markdown file which you are currently reading with all relevant description related to application
  • App.js ---> Main file from where execution starts
  • components ---> Folder which contains all screens of application, components and images
    • SplashScreen.js ---> A splash screen for 6 seconds which helps to load data
    • HomeScreen.js ---> First screen from where you can search about any recipe
    • DetailScreen.js ---> Screen with all health label, nutririon facts and ingredients
    • SearchComponent ---> It is the top bar in every screens for search by keywords
    • HealthLabels.js ---> Component for health label in DetailScreen.js
    • Nutririons.js ---> Component for health label in DetailScreen.js
    • Ingredients.js ---> Component for health label in DetailScreen.js
    • listItem.js ---> To bind data in flatlit in HomeScreen.js
    • img ---> folder which contains images used in application

ย 

Issues and Bugs

You can find bugs, enhancements and issues in Issues section of this repository

ย 

Contact Information

Portfolio | Github | Behance

Connect with me : LinkedIn

Email : [email protected]

ย 

ยฉ๏ธ Copyright Information

This is a free and open source project. Anyone can use it or anyone can contribute in it.

PS ๐Ÿค—

This project is part of my portfolio and academics. So, any feedback will be appreciated which helps me to improve my technical skills as well as to grow it as a business idea. Thank you for your valuable time. โค๏ธ

pickyeater's People

Contributors

krupa15 avatar

Watchers

 avatar

pickyeater's Issues

Responsiveness

Make all screens and components responsive. You can check design under ./UserInterface/PickyEater.xd. Or you can also check images of the screen in the same folder.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.