FrontEnd: Separate food data and render it in separate list.

[drex44]

we have data for various diseases. check out the site, http://good-food-guide.netlify.com

currently, it shows verg and non veg food combined but some people are vegan so we want to separate the data in json and show the same separately in components/FoodCard.js and pages/foodDetails.js

The website is in React/ NextJs. comment for more information!

[kcoulsy]

Hey, I could give this one a go. Have you got a design in mind with this? Are they in separate lists on the cards etc..

[drex44]

I was thinking about a simple design like,
Veg Foods (style: thick green underline): [list]
Non veg Foods (style: thich red underline) : [list]

You can also try other style or design you feel good. this just a mere suggestion.

The goal is to create an MVP. so a simple and elegant user design will look great and will save efforts.

[drex44]

@kcoulsy I saw your schema for the dataList.js (you commented in #6 ). it's great!
you can start working on this and submit PR.

divide this issue into two PRs.
PR 1: Change the dataList and FoodCard.js to render lists separately. make changes in the foodDetails.js just so that it does not break.
PR 2: Improve foodDetails.js page.

[kcoulsy]

@drex44 Sure thing!

How about something like this for the food types

With a tooltip for any extra description or stating the food type. Tooltip needs a bit of styling but didn't get around to that yet.

[drex44]

It's okay if it's simple. it's good.
don't need to reinvent the wheel. use the material-UI tooltip.
demo,
https://material-ui.com/demos/tooltips

[kcoulsy]

Yeah, it's all part of the Material UI set

[drex44]

@kcoulsy
Refactored data and new component work amazing! 👍
Now you can submit PR for the improved UI as well!