really good use of inputs here, and i'm curious to see what other options you're planning to put in there. Does everything need to be a choice of pruple / blue / pink? ;)

It might be a good idea to prioritise either fixing this first, or allowing the basket to be viewed when logged out - just for when it's time to demo :)

There are a few cases in your css files where, for example, the same font size is declared multiple times throughout. CSS variables make it really easy to edit values and make the file more readable :)

I'm having to be very picky in all my issues because you've all done an amazing job and I'm super impressed with the end result! I'd say try and get the login functionality fixed as a priority, but either way you all fully deserve to treat yourselves today so go buy a waffle or something <3 Well done :)

• Follow coursebook
• Next-app
• Push to GitHub
• ESLint, Prettier
• Test set up
• Local Database
• Deploy on Vercel

I am signed up, adding an item to the basket, but then cannot access it. I am wondering if there is a different way to access the basket.

If I'm gonna be reeeaaally picky - The smallest screen size in circulation is 320px, the content in your nav bar & promo header starts to wrap at around 358px.
A user-friendly way to accommodate this would be to make title-text and page content a little smaller for phones. This way you can also allow more of your products to fit into a grid for mobile users, rather than one long column :)

• Nav
  • Nav Logo
• Header
• Product List
• Card for each product: img, title, price

I could be completely wrong here because I haven't checked the outputs of each, but if you're stringifying your data when it comes from your database, and then parsing the data you've just stringified inside your component, could you not just skip both steps as they're the inverse of each other?

Good job with implementing the filter on the products page

At the moment you use the product ID for the url. Consider using (e.g.) the product title instead :)

Good use of this, and great to get as much practice with Git as possible!

• Components
• Pages
• Styles

Currently it only allows you to submit numbers, but the user is still able to type in letters. You can make it more user friendly by disallowing non-numeric values to be typed in, have a look at the pattern attribute!

• Text
• Code
• Files

Relates #3

In the bottom left corner of the page - is this a mistake or another easter egg? ;)

• Show basket items
• Delete items
• Show Total £

To do:

• Set up dynamic [id] page
• Link to [id]-page on Home
• Get product details from Database
• Put product details on [id] page

Acceptance Criteria:

• Quantity
• Colour
• Variant?

Closes #13

Currently your div (first child from main) is taking on the width of it's content, so it jumps when you switch between goblin and other products. Try setting a fixed width on the bar or the parent div (maybe as a % of vw)

• Type of Products
• Brand name
• Content
• Page flow
• Design, Layout

Product grid is centred itself but <div>s size are different so it looks like they are not aligned . Would it be better if we can give them fixed width and height? also margin between items?

Relates #19

• Title
• Image
• Description
• Color
• Size
• Type

• passwords, hashing...
• cookies, session
• DB: createUser, getUser
• page
• components
• Bonus: add sth to orders?

Try and stick with one measurement type througout. Preferably rem / em, but even px is fine as long as it's consistent :)

Workshops are short and implementing what you've learned into your projects are a great way to drill them in

• Have a few dynamic products

• database table

It looks like the size picker only has one value on all products.

Made my morning ahaha