fac20/sp-bghm

student project

sp-bghm's Issues

.env file shouldn't be in the repository

.env file shouldn't be in the repository.

Loading site locally

There seems to be an error when trying to run the project locally.

Cannot read property 'toLowerCase' of null

This is located line 19 in navbar.js

The map

I was under the impression the map was a background image until I looked in App.tsx. Perhaps you could format it a bit more/provide some instructions. The only instructions on the page say 'Enter your postcode'.

LocationCheck and className in Location.JSX

Generally it's best not to mix paradigms when you can avoid it - using both vanilla CSS classes and CSS-in-JS is an example of that. The beautiful thing about styled components is that they let you do what you're doing with vanilla CSS even better. You can give them props to dynamically set CSS with JS. Something like this

const LocationCheck = styled.span`
    display: ${props => props.hidden ? 'none' : 'initial'};
`;

Then you can call it in your markup like this:

<LocationCheck hidden> // this should interpret hidden as true
<LocationCheck hidden={!userLocation}>

Maybe try to even up your insights ✨

you can add coauthor in your commits in commitizen when it asks to provide a description. just copy-paste the coauthor thingy in there ✨ ❤️

Title bar

I like the left aligned titlebar but I think it should have some horizontal margin

Optional chaining will make you beautiful, intelligent and rich

You have an error in MoreInfo because you're trying to look up a property of undefined, like this:

myObj = {
    hello: 'world',
}
myObj.goodbye // undefined
myObj.goodbye.helloAgain // error

There's a new feature in JavaScript called optional chaining. It looks like this

myObj?.goodbye?.helloAgain // no error

Basically it causes the expression to short-circuit, like && would.

0 && false // 0

You can use it to safely go deep into objects that are uncertain, without generating runtime errors like the one in the master branch. I'd recommend it. One thing to be aware of, though, is that not all environments support it, including Node and the Browser. Create React App transpiles it down, so if you use it CRA will replace it with ES5 or ES6 code that does the same thing less concisely.

The examples I've provided show how to do optional chaining with dot lookup, but in your case you'll need to use mainly square-bracket lookup. For this, you still need a dot, so your code could look like this

    {content ? content?.[material]?.[location]?.how_to_recycle : "no info"}
    // maybe you could simplify further by removing the ternary and using || but since I don't know the shape of your data I'm not sure

p.s. the colons in ternaries should have spaces on both sides. Are you using Prettier?

Card flipping!

Smart trick with the card flipping by using 2 divs and hiding the top one after the flip with backface-visibility!
I was so confused initially how it was done 👍

Accessibility - above 94%! WOOOOO

Did the lighthouse check
Main landing page - 94% 🥳
Categories (with all your lovely cards) - 95% 🎆
Plastics page - 94% 🍾

lovely updated readme

💘 🧁 ✨ 🍰 💓

Really nice hooks

Great modularising and really clear code!

Good focus on testing!

Found the page not found

Nice that you customized it - I could only see this on my local machine, I presume this hasn't been updated on Netlify?
🐱 👍 😹

Lighthouse accessibility - contrast ratio 💥 🐰

Background and foreground colors do not have a sufficient contrast ratio.
Failing Elements:
#label #input #postcode (all on first page)

useLocation and getPostcode

At first I saw getPostcode and I was like 'huh, they didn't follow my suggestion, I wonder if they made it work anyway'. And then I saw you were using a hook called useLocation, but I couldn't find the file. Suffice to say I was very confused for a second there - now imagine how confusing that could have been if you were in a professional codebase, where there are hundreds of different files.

A pattern I generally follow is to put hooks into a folder called hooks, and to name each hook the same thing as the file. The hooks folder is a nice purple colour, so there's that.

Neat and organised file structure

Responsiveness

Looking bomb for most of the app pages! 🎆 💣

The map is huge on the mobile ver, a suggestion would be to keep the postcode input on the home page but remove the map and use it only for desktop vers? Unless you find a way to keep the map responsive on mobile then that would be so cool!!

Either way is great! A lovely idea on the map regardless 😻 💋 💟

Nicely done on the css (づ｡◕‿‿◕｡)づ ♡♡♡♡

🎉 🍰 🎉 🍰 🎉 🍰 🎉 🍰 🎉 🍰 🎉 🍰 🎉 🍰 🎉 🍰 🎉 🍰 🎉 🍰 🎉 🍰 🎉 🍰 🎉 🍰 🎉 🍰 🎉 🍰 🎉 🍰 🎉 🍰 🎉 🍰 🎉 🍰

Love the file structure!

❤️

The cards

I love the cards - I've never used CSS rotate, backface or any of those properties before. The students have become the master :) I've really learnt something interesting from you here.

I noticed a bug and I googled fixing it. The bug is that, while the card is flipping, the cursor isn't over it, so the rotate effect stops unless you hover from the middle. The solution turned out to be very doable. There might be a better way to do it, this is just what I came up with in five minutes. You can wrap the element you want to flip inside a parent, and listen for hovers on the parent. When the mouse hovers over the parent, flip the child. The CSS ended up looking like this:

const InnerContainer = styled.article`
  background-color: transparent;
  box-shadow: 0 0 1rem;
  height: 22rem;
  position: relative;
  transform-style: preserve-3d;
  transition: transform 0.3s;
  width: 100%;
  /* &:hover {
    transform: rotateY(180deg);
  } */
`;

const OuterContainer = styled.div`
  &:hover ${InnerContainer} {
    transform: rotateY(180deg);
  }
`;

and the markup ended up looking like this:

     <OuterContainer tabIndex="0">
      <InnerContainer>
        <Front>
          <Title>
            <h2>{material}</h2>
          </Title>
          <CategoryIcon src={src} alt={material} />
        </Front>
        <Back>
          <Title>
            Put {material} in {wasteOrganisation}
          </Title>
          <CategoryBinImage src={blueBin} alt="bin-type" />
          <Button onClick={handleClick}>click for more information</Button>
        </Back>
      </InnerContainer>
    </OuterContainer>

By the way, if you're applying an effect on hover, and you've set tabindex to 0, the final step is to also apply the effect on focus (when tabbed on). So then your CSS rule would end up looking like this:

const OuterContainer = styled.div`
  &:hover ${InnerContainer}, &:focus ${InnerContainer} {
    transform: rotateY(180deg);
  }
`;

Site looks great!

love the hover effect on the different map zones. I have a small bug. From my Chrome my netlify link doesn't seem to load on my page or Aishah but loads on Jen's comp.

Can't go back once we are in the specific recycling category

The back button doesn't take us back to the homepage or the previous page (once we've clicked on the respective recycling category), it just shows a blank page when we go back (but the URL changes to its respective endpoints).
(by back button I mean the standard browser back button) 😺