--- # [Bookbrooch](https://bookbrooch-c63z1ls62-samymasy.vercel.app/) - Y+M --- ## What we used - A - Nextjs (v12) - React, Reactform-hook - Firebase - Chakra-UI/CSS Modules - Cypress - dotenv - goodquotesapi - pos `[ 'Happiness', 'NN' ], [ 'intelligent', 'JJ' ]` - wordsapi (rapidapi) --- ## How we worked - M ----  ----  --- ## Code examples - M  ---- Step by step - get all quotes: ```javascript [ {}, {}, {}] ``` ---- Each quote object ```javascript { tags: ["Happiness", "Inspirational"] }, { tags: ["Motivational", "Happiness"] }, { tags: ["Funny", "Happiness"] } ``` ---- - extract their tags into an array ```javascript userQuotes.forEach(quote => tags.push(quote.tags)) // Log: [ "Happiness", "Happiness", "Funny", "Inspirational", "Funny" ] ``` ---- - Create new object containing tag: how many times used ```javascript tags.forEach(element => { countKeysUsed[element] = (countKeysUsed[element] || 0) + 1; }); // Log: `{Wisdom: 3, Inspirational: 2, Life: 1}` ``` ---- - Find highest number of used - If tie - add all to an array ```javascript Object.keys(object).forEach(tag => { let freq = object[tag] if (!same[freq]) same[freq] = [] same[freq].push(tag) }) return same[maxPointsForTag] // Log `[Wisdom, Inspirational]` ``` ----  --- ### Users can tag quotes -A ```javascript {user && home && ( <form onSubmit={handleSubmit(onSubmit)}> <input name="quote" value={quote} hidden {...register("quote")} /> <input name="author" value={author} hidden {...register("author")} /> <input name="source" value={source} hidden {...register("source")} /> <Select id="tagToChoseFrom" name="tags" {...register("tags")}> <option value="Inspirational">Inspirational</option> <option value="Happiness">Happiness</option> <option value="Wisdom">Wisdom</option> <option value="Funny">Funny</option> <option value="Career/professional">Career/professional</option> </Select> <Button type="submit" minH="30px"> Save </Button> </form> )} ``` --- ## What we're proud of ---- ### UI -A Previously  ---- Currently  ---- ### Dark Mode using Chakra-UI -S ```javascript import { useColorMode, IconButton } from "@chakra-ui/react"; import { MoonIcon, SunIcon } from "@chakra-ui/icons"; const DarkModeSwitch = () => { const { colorMode, toggleColorMode } = useColorMode(); return ( <IconButton aria-label="Toggle Dark Switch" icon={colorMode === "dark" ? <SunIcon /> : <MoonIcon />} onClick={toggleColorMode} /> ); }; export default DarkModeSwitch; ``` ---- ### Cypress custom commands to test Firebase auth - S ```javascript Cypress.Commands.add( "login", (email = "test@test.com", password = "password") => { // programmatically log in without needing the UI return signInWithEmailAndPassword(auth, email, password); } ); // We can call this fn anywhere in our test like: cy.login(); or cy.login(email, password); ``` --- ## What we struggled with ---- ### Vercel depolyment -Y One letter!!!  --- ## Estimated vs Actual - S ---  --- |Issue |Estimated Velocity|Actual Velocity |-----|--------|------ |Search|E8 |A8 |Games|E5 |A18 |Tags|E1|A1 |Badges|E13|A5 |Styling|E5|A13 |mode |E2 |A1 Total | E34 | A46 ---  --- ### Thank you!!!!!!!!!!!!