Kevin Powell - Community•8mo ago

Fast Food Tracker - Layout & Feature Ideas

Working on a fun portfolio project as well as learning React with this and experimenting a bit with how I build it. I ended up creating a fast food tracker where i'm currently only using a json & chart.js to import some data about price history and show for each category as well as do basic data values on it. Would like feedback or even cool ideas that you'd maybe want to see from a site like this. As its for fun and to learn. Things on the list - More charts & data visualization (e.g., comparing indexed values over chains & items or meats etc) - Other categories I've set up assets for a bunch like fish tenders w/e - Potential user submitted data when I figure out React a bit more. - Maybe learn more about mapping integration and turn it into Fastfood Waze :shrug:

30 Replies

vince•8mo ago

cool site idea! lots of people have been talking about the rising costs of food lol so very opportunistic idea I'd make the slider the same max-width as the other content (it pokes out a tad bit on the sides) and make the drop-shadows a bit softer

QuadOP•8mo ago

good callout! I was going to fix the slider size after I went through connecting the data & charts. Thoughts on something more like the screenshot? where it can overflow to the left and right depending on your drag. I also thought it'd be alright for mobile where I can use scroll snapping there too.

QuadOP•8mo ago

I also have tended to go a bit drop shadow crazy lately. But i'll be sure to tone it down

vince•8mo ago

hmmm all those graphs there feel like a lot of cognitive load... is there a way you can simplify it somehow to make it less busy? maybe by hiding the amount of cards or simplifying the card info?

QuadOP•8mo ago

I was thinking some sort of punchy infographic that shows maybe last 3 years? ( this is a pretty rough sketch in and as I'm editing a lot of stuff)

QuadOP•8mo ago

could easily stylize it a bit more but i think it might get the point across if it had last 3 yr price history similarly to the chart?

QuadOP•8mo ago

this might be a better idea

vince•8mo ago

I think the graph you have before is good (less busy and gets the point across) -- I think it's in combination with everything else its a bit overwhelming I tried to do something quick on Figma but I haven't used Figma in a while so I'm rusty 🫣 I'd see if you can hide the "Updated: May 7th, 2024" portion behind something and then try putting the trending data (last mth, last yr) in 1 row? I also feel like you could do something with the brand (McDonald's, Tim Hortons) too... I feel like it's a bit too in-your-face... maybe just try reducing the image size a bit? Do you have a Figma file I can copy and see if I can tinker with it?

QuadOP•8mo ago

Yeah sure, I had to take a bit since it was in a bit more of a disorganized file with everything. https://www.figma.com/design/SwSFtPa9uxwBjLc1I2BWVU/Card-Example?node-id=0%3A1&t=7tN7yTrsVjBZuRmB-1

Figma

Card Example

Created with Figma

QuadOP•8mo ago

The card above just labels out how everything is placed and the image to the left is put in a bit awkwardly but I ended up just using a different method on the actual. Added a bunch of the images in as well incase you would prefer to tinker with that instead.

vince•8mo ago

What do you think about something like this?

vince•8mo ago

Of course play with proportions (text is a bit small, I was zoomed in 😆) But thinking you can have more data hidden behind a "More" or like "More data" button Just couldn't think of a good place to put it More data eg last updated, maybe like a 12months view idk some ideas Might be an interesting idea too to maybe have the dollar amount be red / green / black depending on its trending status Eg if an item is trending more expensive, make the dollar amount red:

vince•8mo ago

Thinking if it'll help users identify what's going up or down faster

QuadOP•8mo ago

I really like the amount of space and breathing room it gives. Also quite a lot of room to add potential other key items slightly under the $ I can really just pull that other information and hide it between a popover or something as well

vince•8mo ago

ye thats what i was thinking

QuadOP•8mo ago

It also makes it feel a bit more cohesive if I even decide to use icons to even highlight context about something. e.g., maybe an XL maybe even something like a meat type icon etc

vince•8mo ago

yup! i think the icons are good you should just use them a bit more* sparingly imo cause they draw a lot of attn

QuadOP•8mo ago

I appreciate the feedback a lot I'll keep you posted in here every now and then will likely try to see how this looks tomorrow with a few tweaks probably or maybe some mistakes on my end. Still figuring out how to work react to pipe in all the data etc

vince•8mo ago

sounds good! and take everything i say with a grain of salt im not a designer so im sure theres a lot of differing opinions lol react shouldnt be that big of an issue tho basically just put your api calls in a useEffect() and pull in the data into a state been a while since ive coded in react but i think you could get away with something like this (not sure how optimized it would be tho):

// you don't need to do this part, just showing you what you could potentially put in your state
const dummyProduct = {
  "name": name,
  "price": price,
  "trend": "down",
  ...
}

const product = () => {
  const [product, setProduct] = useState(dummyProduct);

  useEffect(() => {
    fetch(endpoint)
      .then((data) => setProduct(data));
  }, []);

  return (
    <article>
      <h3>{{ product.name }}</h3>
      ...
    </article>
  );
};

// you don't need to do this part, just showing you what you could potentially put in your state
const dummyProduct = {
  "name": name,
  "price": price,
  "trend": "down",
  ...
}

const product = () => {
  const [product, setProduct] = useState(dummyProduct);

  useEffect(() => {
    fetch(endpoint)
      .then((data) => setProduct(data));
  }, []);

  return (
    <article>
      <h3>{{ product.name }}</h3>
      ...
    </article>
  );
};

been a while since i've used react lol so prob wrong syntax

QuadOP•8mo ago

No worries, I appreciate the perspective, its always great to get feedback especially when you're willing to go hands on and play with the design. Getting quality feedback like that is hard! On the react part, i'm just taking a bit of time to rework how I did it to better fit in other chart formats for things like popouts. currently fetching the data from a json file via useEffect and then applying it by checking for a specific id#. pretty much denoting a card a specific id # which is also in the json. (e.g., if i marked it card-1 it then fills in the chart & names with data from the id=1). But pretty much thinking about cleaning it up a bit more and making components to better manage the thing.

vince•8mo ago

hm why use the id's at all if I may ask? shouldn't it be enough to just have the cards as objects in the json and then you can order based off category or other property?

QuadOP•8mo ago

To be honest, I primarily programmed in html & css previously and had never worked with jsons so this is a first for me here. Trying to learn as I go so I will look into a bit more about jsons and how to better use them. I have a json structure that looks a bit like the following and thought to myself, hey maybe I can use ids to pair them similarly to how I'd go about it in regular html & css. I also felt it might be easier to keep track of the different items based on IDs for rough analysis. For example, I can just take id [1,3,5,7] and I have all the different mcdonalds items, then compare that against id [2,4,6,8] for like wendys or something similar by using the same file for the charts. This approach felt mentally easier for me, but I'm always open to new ideas or options. I'm at that point where I don't even know what I don't know. 😅

{
  "id": "1",
  "item": "Junior Chicken",
  "restaurant": "McDonald's",
  "category": "Chicken Sandwich",
  "meat_type": "Chicken",
  "value_menu": true,
  "price_history": [
    {"year": 2015, "price": 1.59},
    {"year": 2016, "price": 1.79},
    {"year": 2017, "price": 1.99},
    {"year": 2018, "price": 2.19},
    {"year": 2019, "price": 2.29},
    {"year": 2020, "price": 2.49},
    {"year": 2021, "price": 2.79},
    {"year": 2022, "price": 2.99},
    {"year": 2023, "price": 3.19},
    {"year": 2024, "price": 3.89}
  ],
    "change_1yr": 0.2999999999999998,
    "pct_change_1yr": 5.2724077328646715,
    "change_5yr": 1.1000000000000005,
    "pct_change_5yr": 22.494887525562383,
    "total_calories": 400,
    "calories_per_dollar": 66.78,
    "total_macros": "20g fat, 15g protein, 44g carbs"
}

{
  "id": "1",
  "item": "Junior Chicken",
  "restaurant": "McDonald's",
  "category": "Chicken Sandwich",
  "meat_type": "Chicken",
  "value_menu": true,
  "price_history": [
    {"year": 2015, "price": 1.59},
    {"year": 2016, "price": 1.79},
    {"year": 2017, "price": 1.99},
    {"year": 2018, "price": 2.19},
    {"year": 2019, "price": 2.29},
    {"year": 2020, "price": 2.49},
    {"year": 2021, "price": 2.79},
    {"year": 2022, "price": 2.99},
    {"year": 2023, "price": 3.19},
    {"year": 2024, "price": 3.89}
  ],
    "change_1yr": 0.2999999999999998,
    "pct_change_1yr": 5.2724077328646715,
    "change_5yr": 1.1000000000000005,
    "pct_change_5yr": 22.494887525562383,
    "total_calories": 400,
    "calories_per_dollar": 66.78,
    "total_macros": "20g fat, 15g protein, 44g carbs"
}

So I ended up just being interested and looked into it more, and realized it'd be easier to just use the plain language of it like you're saying and the combinations. I can just use a filter for situations like that with JSON's properties. As well as pipe in the item data more effectively. Definitely going to try this out tomorrow. So I ended up trying it out a bit more.

  useEffect(() => {
    fetch('/data_with_ids.json')
      .then((response) => response.json())
      .then((data) => setData(data))
  }, []);

  const filterByCategory = (category) => {
    return data.filter(item => item.category.toLowerCase() === category.toLowerCase());
  };

....

       <div className="card">
          {coffeeData.map((item, index) => (
            <div key={item.id}>
              <h3>{item.item}</h3>
              <p>{item.restaurant}</p>
              <p>{item.category}</p>
              <p>{item.total_calories}</p>
            </div>
          ))}
        </div>

  useEffect(() => {
    fetch('/data_with_ids.json')
      .then((response) => response.json())
      .then((data) => setData(data))
  }, []);

  const filterByCategory = (category) => {
    return data.filter(item => item.category.toLowerCase() === category.toLowerCase());
  };

....

       <div className="card">
          {coffeeData.map((item, index) => (
            <div key={item.id}>
              <h3>{item.item}</h3>
              <p>{item.restaurant}</p>
              <p>{item.category}</p>
              <p>{item.total_calories}</p>
            </div>
          ))}
        </div>

One of the questions I had was, do you know where to look to read up on maybe getting assets in easily when its in this format after they're loaded? For example, I was currently placing the background images for the cards via sprites in CSS so one file, same proportions (what you saw in the Figma). However, it would likely be more efficient to just have them batched in with the JSON giving the information. I'm assuming that'd require everything to be fleshed out and a bit more thought & preparation.

vince•8mo ago

Let me get back to you after work, nudge me if I don't respond in the next 4 hours haha But just looking very quickly at your code snippet without reading what you wrote that's how I'd do it I've never done filters by category in React (I'm a react noob) but I think you can do it more efficiently I think there's like a million tutorials out there that go over it. But I think the way you have it right now might rerender the filter every time the component rerenders *depending on how it's called Could be wrong on that tho

QuadOP•8mo ago

No worries, I ended up looking it up a bit more and then I think what I found was called something like useMemo? Which would only calculate when data or category changes. I think the problem I'm having is there are just a bunch for things that I'm not looking for in some tutorials, I feel as though I might not even understand the proper terms to look for things as well. But that may just be a problem with how I'm searching for things or processing them if they lack explicit reference to how I'm working on it. But I should probably just find some time over the weekend and read through docs/tutorials on specific features. Was thinking that it'd be better to just learn via building as that ends up sticking the most for me. Essentially plugging in holes in the ship as we go.

vince•8mo ago

yup that's how I learn too! and yup I think you're right I think it is useMemo So the assets thing -- I think you could just include them as a link I know a lot of companies use an external service like AWS to host their images but you could just keep it simple and have it as like a relative path from your root directory For example inside your json you could do something like

{
  id: <id>,
  image: {
    url: "/images/image-1.webp",
    alt: "Alt text.",
    width: <width>,
    height: <height>,
  },
  ...
}

{
  id: <id>,
  image: {
    url: "/images/image-1.webp",
    alt: "Alt text.",
    width: <width>,
    height: <height>,
  },
  ...
}

and then you can call it in your jsx with something like this:

<article>
  <img src={{ product.image.url }}
       alt={{ product.image.alt }}
       width={{ product.image.width }}
       height={{ product.image.height }}
  />
</article>

<article>
  <img src={{ product.image.url }}
       alt={{ product.image.alt }}
       width={{ product.image.width }}
       height={{ product.image.height }}
  />
</article>

I included width / height attributes / properties here because it's a good idea to have them for CLS (Cumulative Layout Shift) -- basically there's a split second where the CSS might not apply and the image will be really large unless you explicitly set it in the html. It helps with performance / user experience

ἔρως•8mo ago

don't forget to add loading="lazy" and decoding="async" if the image will probably be off of the first screen

QuadOP•8mo ago

Do you think it might be a problem if I do something of this sort? or would it just be double work here. Sorry for taking a while to get back ended up getting busy. This would only pass in the class but I ended up setting up the explicit heights in the file itself cause I felt it might be easier to do that than tinker with the JSON if I mess it up over different entries. CSS Example

.jrchicken {background-position: 600px 0;}

.jrchicken {background-position: 600px 0;}

Json Data Example

   "item": "Junior Chicken",
   "other-info-goes-between": "...",
   "sprite_class": "jrchicken"

   "item": "Junior Chicken",
   "other-info-goes-between": "...",
   "sprite_class": "jrchicken"

Code itselff

<div className={`sprite-class ${item.sprite_class}`} style={{ width: 'explicit-height', height: explicit-width }}></div>

<div className={`sprite-class ${item.sprite_class}`} style={{ width: 'explicit-height', height: explicit-width }}></div>

where this sprite would get passed in and apply based on the following things as well as the class traits already made out for it?

vince•8mo ago

I think that's fine but I've never implemented sprites or something like that I'd say if it works you've got that going for you haha then you can worry about optimization

Gaming

Programming

Fast Food Tracker - Layout & Feature Ideas