cd tea
npm install
vite (or npm run dev)
ProductPage.jsx
- Make individual product pages
- Make
ProductInfo()look nicer and functional- Component: things which depend on options
- Add return
LinktoProducts.jsx
- Make
Shopping cart
Web responsiveness
Nicer Products.jsx
- Shopping cart
- Dropdown filter (e.g. by date-added, price)
- Search
Back button on product page -> Products.jsx instead of hash links
Responsive design
- Add media queries to adjust for image spacing in
Products.jsx
Look into Cloudfare Images CDN
🔗 Bitterleaf teas
🔗 Three bears tea
🔗 Yunomi
🔗 Liquid Proust
👥 Dan Abramov's answers about async inside useEffect()
📝 React beta docs: props in child component
👥 Filter list SE answer
🔗 React router tutorial
🔗 React router deep-dive
📝 Replace white space inside string
👥 Set title in react page
👥 Check if object has property
👥 Cross fading images
👥 Cross fade images inside flexbox
👥 CSS-only carousel (CSS tricks)
👥 Adaptive image size with flexbox (SO)
👥 Reimagining atomic CSS
👥 Irfanview
General requirements
Initializing Repository, Readme.md
Create wireframe in something like draw.io to get a concept of what the group wants to create
use props
use state
demonstrate reusable components
user-friendly (is this easy to use for the user? Hint: you have classmates who are excellent testers for your project.)
written from scratch (i.e. do not repurpose other people’s code)
mobile-friendly (i.e. you want to eventually pull this app up on your phone to show a potential recruiter or someone in the tech community if you are out at an event.)
responsiveness
Unique and readable design - Be Creative!
Understand the project enough to be able to present it
E-Commerce:
must have at least 5 different products
each product should have a different title, description, and price
the ability to click on a product to view details only for that one product