# Presentation --- ## :banana::crown::lemon: ## Fruit King <style> .reveal { font-size: 24px; } </style> [Georgia](https://github.com/rockyrelay), [Natalia](https://github.com/nataliarusu), [Iman](https://github.com/ighellache), [Karol](https://github.com/Kr33l) *Fruit King* sells fruits, categorised by citrus and berry fruits. (week6 fullstack) :heavy_dollar_sign: KING :heavy_dollar_sign: --- ## G: Applied Learning > Learn new technology from external resources/documentation - [x] Server-rendered with Next.js > Use the Next.js framework to make server-rendered React apps - [x] Homepage with product listings - [x] Individual product pages - [x] Data stored in a SQLite database > Create real-world projects with complex requirements - [x] “Add to basket” button on product pages - [x] Basket page showing all saved items --- ## K: Discoveries - useReducer - useContext ```javascript const fruits = [ {...fruits} ] ``` (use array instead of database to simulate a database 🤔) --- ```jsx function Component({children}) { return <div>{children}</div> } function Component(props) { return <div>{props.children}</div> } ``` --- ## K: Dev-Ops - Eslint, - Prettier, - Clean code + base, --- ```js export default function Button({ children, onClick, className }) { return ( <button onClick={onClick} className={className}> {children} </button> ); } ``` --- ## K: File structure  ---  ---  --- ## I: KSBs :notebook: - **K7:** Identify reusable solutions to common problems, - **S1:** Create logical and maintainable code, - **B2:** Applies logical thinking. - **K11** Software designs and functional or technical specifications - **S7:** Apply structured techniques to problem solving, debug code and understand the structure of programmes in order to identify and resolve issues - **B9:** Committed to continued professional development. --- ## G: Scrum Facilitator :female-construction-worker: - sprint planning, prioritise issues > challenge when working on new techstack - break down larger issues into manageable chunks > missing breaks - lead standups and Sprint Planning and clearing blockers > easy to get stuck --- ### G: Code ```model/fruits.js```  --- ## N: What hooks we used useState() useReducer() useContext() ``` export default React.createContext({ items: [], totalAmount: 0, addItem: (item) => {}, deleteItem: (id) => {}, }); ``` ---  ---  ---  --- ## KanBan Board  --- ## Demonstration http://localhost:3000 --- ## Questions --- ---