{"componentChunkName":"component---src-templates-page-js","path":"/projects/2020/apick","result":{"data":{"markdownRemark":{"frontmatter":{"title":"Apick - EdTech startup","path":"/projects/2020/apick","excerpt":null,"tags":null,"liveUrl":"https://www.apick.com.br","sampleCode":"true","sourceCode":null,"coverImage":{"childImageSharp":{"fluid":{"base64":"data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAMABQDASIAAhEBAxEB/8QAFwAAAwEAAAAAAAAAAAAAAAAAAAMEBf/EABQBAQAAAAAAAAAAAAAAAAAAAAD/2gAMAwEAAhADEAAAAd2SsEjQ/8QAGRAAAwEBAQAAAAAAAAAAAAAAAAEDAhEh/9oACAEBAAEFAvSrqtQenMZ0/8QAFBEBAAAAAAAAAAAAAAAAAAAAEP/aAAgBAwEBPwE//8QAFBEBAAAAAAAAAAAAAAAAAAAAEP/aAAgBAgEBPwE//8QAGBAAAwEBAAAAAAAAAAAAAAAAACIxESD/2gAIAQEABj8CEmD3j//EABkQAAIDAQAAAAAAAAAAAAAAAAABESFBMf/aAAgBAQABPyHqhcaVk60VWkTeGycCY//aAAwDAQACAAMAAAAQMO//xAAVEQEBAAAAAAAAAAAAAAAAAAAAEf/aAAgBAwEBPxBX/8QAFREBAQAAAAAAAAAAAAAAAAAAABH/2gAIAQIBAT8QR//EABoQAAMBAAMAAAAAAAAAAAAAAAERIQAxUWH/2gAIAQEAAT8QNEj7GH6BIULbhny4TYjgAEfmgNKcXLrKKTf/2Q==","aspectRatio":1.6666666666666667,"src":"/static/79f2f6bec98e30e092f03f19c27f7da2/ac25c/apick.jpg","srcSet":"/static/79f2f6bec98e30e092f03f19c27f7da2/f836f/apick.jpg 200w,\n/static/79f2f6bec98e30e092f03f19c27f7da2/2244e/apick.jpg 400w,\n/static/79f2f6bec98e30e092f03f19c27f7da2/ac25c/apick.jpg 777w","sizes":"(max-width: 777px) 100vw, 777px"}}}},"id":"da9cacbf-652a-54a3-ba53-a96002322b89","html":"
\n

Hired as the one and only dev to build a marketplace for courses aimed for young adults in our dynamic economy.\nThe solution was to create a React App, with Google's Firebase Auth & Firestore as the database.\nThe company is within the top 10 regional survivors of Founder's Intitute seed program.

\n
\n
\n

Stack: React.js, Firebase, Firestore, Redux, Bootstrap, Scss, Node/Express.js

\n
\n

Sample Code:

\n
SearchResult.js\n\nimport React, { useState, useEffect } from "react"\nimport { Link, useParams } from "react-router-dom"\nimport { connect } from "react-redux"\nimport { Alert } from "react-bootstrap"\n\n//context\nimport { useAuth } from "../../contexts/AuthContext"\n\n//components\nimport MetaDecorator from "../MetaDecorator"\nimport SuspenseFallback from "../SuspenseFallback"\nimport Pagination from "./Pagination"\nimport useMediaQuery from "../useMediaQuery"\n\n//icons\nimport { RiArrowGoBackLine } from "react-icons/ri"\nimport { CgClose } from "react-icons/cg"\n\n// styles\nimport styles from "./SearchResult.module.scss"\n\nconst SearchResult = ({ subjects, courses, isMobile }) => {\n\tconst params = useParams()\n\tconst _query = params.query\n\n\tconst { currentUser } = useAuth()\n\n\tconst [query, setQuery] = useState()\n\tconst [isProcessing, setIsProcessing] = useState(false)\n\tconst [isLoadingProps, setIsLoadingProps] = useState(true)\n\tconst [categoryParam, setCategoryParam] = useState(null)\n\tconst [subcategoryParam, setSubcategoryParam] = useState(null)\n\tconst [currentSubject, setCurrentSubject] = useState(null)\n\tconst [currentCourses, setCurrentCourses] = useState([])\n\tconst [matchCourses, setMatchCourses] = useState(null)\n\tconst [alert, setAlert] = useState(false)\n\n\tuseEffect(() => {\n\t\tif (!currentSubject) {\n\t\t\tsetIsProcessing(true)\n\t\t\tsetQuery(_query)\n\t\t} else if (_query.toLowerCase() !== currentSubject.toLowerCase()) {\n\t\t\tsetIsProcessing(true)\n\t\t\tsetQuery(_query)\n\t\t}\n\t}, [_query])\n\n\tuseEffect(() => {\n\t\tif (subjects.length > 0 && courses.length > 0) {\n\t\t\tsetIsProcessing(true)\n\t\t\tsetIsLoadingProps(false)\n\t\t}\n\t}, [subjects, courses])\n\n\tconst isKeyWord = word => {\n\t\tconst filterCategoryParam = subjects.find(subject => {\n\t\t\treturn subject.category.toLowerCase() === word.toLowerCase()\n\t\t})\n\t\tif (filterCategoryParam) {\n\t\t\tsetCategoryParam(filterCategoryParam.category)\n\t\t\tsetSubcategoryParam(null)\n\t\t} else {\n\t\t\tconst subcategoriesArrays = subjects.map(subject => {\n\t\t\t\treturn subject.subcategories\n\t\t\t})\n\t\t\tconst subcategoriesDirty = subcategoriesArrays.flat(1)\n\n\t\t\tconst subcategories = subcategoriesDirty.filter(subcategoryDirty => {\n\t\t\t\treturn subcategoryDirty !== undefined\n\t\t\t})\n\n\t\t\tconst _subcategoryParam = subcategories.find(v => {\n\t\t\t\treturn v.toLowerCase() === word.toLowerCase()\n\t\t\t})\n\t\t\tif (_subcategoryParam) {\n\t\t\t\tsetSubcategoryParam(_subcategoryParam)\n\t\t\t\tsetCategoryParam(null)\n\t\t\t} else {\n\t\t\t\tsetSubcategoryParam(null)\n\t\t\t\tsetCategoryParam(null)\n\t\t\t\tsetCurrentSubject(`"${query}"`)\n\t\t\t}\n\t\t}\n\t}\n\tuseEffect(() => {\n\t\tif (courses && courses.length > 0 && subjects && subjects.length > 0) {\n\t\t\t!isLoadingProps && isKeyWord(query)\n\t\t}\n\t}, [isLoadingProps, query])\n\n\tuseEffect(() => {\n\t\tif (categoryParam) {\n\t\t\tsetCurrentSubject(categoryParam)\n\t\t\treturn\n\t\t}\n\t\tif (subcategoryParam) {\n\t\t\tsetCurrentSubject(subcategoryParam)\n\t\t\treturn\n\t\t}\n\t}, [categoryParam, subcategoryParam])\n\n\tconst searchQuery = query => {\n\t\tconst titles = []\n\t\tcourses.forEach(course => {\n\t\t\tif (course.title !== undefined) {\n\t\t\t\ttitles.push(course.title)\n\t\t\t}\n\t\t})\n\t\tconst matchTitles = titles.filter(title => title.toLowerCase().includes(query.toLowerCase()))\n\t\t// if part of any course title matched the query, return course(s)\n\t\tconst _matchCourses = courses.filter(course => matchTitles.includes(course.title))\n\t\t_matchCourses.push()\n\t\tif (_matchCourses) {\n\t\t\tsetMatchCourses(_matchCourses)\n\t\t\tconsole.log("matchCourses: ", _matchCourses)\n\t\t} else {\n\t\t\tsetIsProcessing(false)\n\t\t}\n\t}\n\n\tuseEffect(() => {\n\t\tif (currentSubject === `"${query}"` && !categoryParam && !subcategoryParam && courses && courses.length > 0) {\n\t\t\tsearchQuery(query)\n\t\t}\n\t}, [currentSubject])\n\n\tuseEffect(() => {\n\t\tif (categoryParam) {\n\t\t\tsetCurrentCourses(\n\t\t\t\tcourses.filter(course => {\n\t\t\t\t\treturn course.category === currentSubject\n\t\t\t\t})\n\t\t\t)\n\t\t}\n\t\tif (subcategoryParam) {\n\t\t\tsetCurrentCourses(\n\t\t\t\tcourses.filter(course => {\n\t\t\t\t\treturn course.subcategory === currentSubject\n\t\t\t\t})\n\t\t\t)\n\t\t}\n\t\tif (matchCourses) {\n\t\t\tsetCurrentCourses(matchCourses)\n\t\t}\n\t}, [currentSubject, matchCourses])\n\n\tuseEffect(() => {\n\t\tsetIsProcessing(false)\n\t}, [currentCourses])\n\n\tuseEffect(() => {\n\t\tif (isLoadingProps || isProcessing || currentUser) {\n\t\t\treturn\n\t\t}\n\t\tsetTimeout(() => {\n\t\t\tsetAlert(true)\n\t\t}, 2000)\n\t\tsetTimeout(() => {\n\t\t\tsetAlert(false)\n\t\t}, 8000)\n\t}, [isLoadingProps, isProcessing, currentUser])\n\n\tconst handleCloseIcon = () => {\n\t\tsetAlert(false)\n\t}\n\n\tconst abbreviateLongWords = sentence => {\n\t\t//check if letter is vowel\n\t\tconst isVowel = letter => {\n\t\t\tlet result = Boolean\n\t\t\tif (letter == "A" || letter == "E" || letter == "I" || letter == "O" || letter == "U") {\n\t\t\t\tresult = true\n\t\t\t} else {\n\t\t\t\tresult = false\n\t\t\t}\n\t\t\treturn result\n\t\t}\n\t\t// conditions to reduce words or keep them original\n\t\tif (sentence.length < 12) {\n\t\t\treturn sentence\n\t\t} else {\n\t\t\tconst sentenceWords = sentence.split(" ")\n\t\t\tconst reduceLongWords = sentenceWords.map(word => {\n\t\t\t\tif (word.length > 14) {\n\t\t\t\t\tif (!isVowel(word[6])) {\n\t\t\t\t\t\treturn `${word.substring(0, 6)}.`\n\t\t\t\t\t} else if (!isVowel(word[7])) {\n\t\t\t\t\t\treturn `${word.substring(0, 7)}.`\n\t\t\t\t\t} else {\n\t\t\t\t\t\treturn `${word.substring(0, 8)}.`\n\t\t\t\t\t}\n\t\t\t\t} else if (word.length > 10) {\n\t\t\t\t\tif (!isVowel(word[3])) {\n\t\t\t\t\t\treturn `${word.substring(0, 3)}.`\n\t\t\t\t\t} else if (!isVowel(word[4])) {\n\t\t\t\t\t\treturn `${word.substring(0, 4)}.`\n\t\t\t\t\t} else if (!isVowel(word[5])) {\n\t\t\t\t\t\treturn `${word.substring(0, 5)}.`\n\t\t\t\t\t} else {\n\t\t\t\t\t\treturn `${word.substring(0, 6)}.`\n\t\t\t\t\t}\n\t\t\t\t} else {\n\t\t\t\t\treturn word\n\t\t\t\t}\n\t\t\t})\n\t\t\tconst reassembleWords = reduceLongWords.join(" ")\n\t\t\treturn reassembleWords\n\t\t}\n\t}\n\n\t// Pagination Starts\n\tconst isDesktop = useMediaQuery("(min-width: 1350px)")\n\tconst isLaptop = useMediaQuery("(min-width: 1000px)")\n\tconst isIpad = useMediaQuery("(min-width: 800px)")\n\tconst isTablet = useMediaQuery("(min-width: 600px)")\n\n\tconst [pageNumber, setPageNumber] = useState(1)\n\tconst [itemsPerPage, setItemsPerPage] = useState(10)\n\n\t// change how many cards will render depending on the size of the screen\n\tuseEffect(() => {\n\t\tif (isDesktop) {\n\t\t\tsetItemsPerPage(10)\n\t\t\treturn\n\t\t} else if (isLaptop) {\n\t\t\tsetItemsPerPage(8)\n\t\t\treturn\n\t\t} else if (isIpad) {\n\t\t\tsetItemsPerPage(9)\n\t\t\treturn\n\t\t} else if (isTablet) {\n\t\t\tsetItemsPerPage(8)\n\t\t\treturn\n\t\t} else {\n\t\t\t// isMobile\n\t\t\tsetItemsPerPage(10)\n\t\t}\n\t}, [isLaptop, isTablet, isIpad, isDesktop])\n\n\tconst paginate = page => {\n\t\tsetPageNumber(page)\n\t\twindow.scrollTo(0, 0)\n\t}\n\t// Paginations Ends\n\n\treturn (\n\t\t<div>\n\t\t\t<MetaDecorator title={currentSubject ? `Cursos de ${currentSubject}` : "Buscador de Cursos"} description={"A Apick ajuda você a encontrar o seu curso ideal!"} />\n\t\t\t<section className={styles.main_container}>\n\t\t\t\t<div className="back-and-save">\n\t\t\t\t\t<Link to="/">\n\t\t\t\t\t\t<div className="back">\n\t\t\t\t\t\t\t{" "}\n\t\t\t\t\t\t\t<RiArrowGoBackLine />\n\t\t\t\t\t\t\t<p>Voltar</p>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</Link>\n\t\t\t\t\t<div className={styles.alertContainer}>\n\t\t\t\t\t\t{alert && (\n\t\t\t\t\t\t\t<Alert variant="primary" className={styles.alert}>\n\t\t\t\t\t\t\t\t<Link to="/criar-conta">Crie uma conta para salvar seus cursos preferidos!</Link>\n\t\t\t\t\t\t\t\t<CgClose className={styles.closeIcon} onClick={handleCloseIcon} />\n\t\t\t\t\t\t\t</Alert>\n\t\t\t\t\t\t)}\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\n\t\t\t\t{!isLoadingProps && !isProcessing && currentCourses ? (\n\t\t\t\t\t<>\n\t\t\t\t\t\t<div className={styles.title}>\n\t\t\t\t\t\t\t<p style={{ marginRight: "5px" }}>\n\t\t\t\t\t\t\t\tEncontramos {currentCourses.length} curso(s)\n\t\t\t\t\t\t\t\t{currentSubject && (\n\t\t\t\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t\t\t\t{" "}\n\t\t\t\t\t\t\t\t\t\tsobre\n\t\t\t\t\t\t\t\t\t\t<strong> {!isMobile ? currentSubject : abbreviateLongWords(currentSubject)}</strong>\n\t\t\t\t\t\t\t\t\t</>\n\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t:\n\t\t\t\t\t\t\t</p>\n\t\t\t\t\t\t</div>\n\n\t\t\t\t\t\t<div>{currentCourses && currentCourses.length > 0 ? <Pagination currentCourses={currentCourses} pageNumber={pageNumber} itemsPerPage={itemsPerPage} paginate={paginate} /> : "Desculpe, não encontramos nenhum curso."}</div>\n\n\t\t\t\t\t</>\n\t\t\t\t) : (\n\t\t\t\t\t<SuspenseFallback />\n\t\t\t\t)}\n\t\t\t</section>\n\t\t</div>\n\t)\n}\n\nconst mapStateToProps = state => {\n\treturn {\n\t\tcurrentSubject: state.currentSubject || [],\n\t}\n}\n\nexport default connect(mapStateToProps)(SearchResult)
","excerpt":"Hired as the one and only dev to build a marketplace for courses aimed for young adults in our dynamic economy.\nThe solution was to create a…"}},"pageContext":{"type":"posts","next":{"frontmatter":{"path":"/projects/2021/empbank","title":"Empbank - FinTech startup","tags":null},"fileAbsolutePath":"/Users/felipesmaniotto/my-real-portfolio/src/posts/empbank.md"},"previous":null}},"staticQueryHashes":["1425477374","3128451518"]}