## Guessing Game 🎮 (Ji(Jihye) and Mohamed) --- <iframe src="https://giphy.com/embed/xUPGGDNsLvqsBOhuU0" width="480" height="360" frameBorder="0" class="giphy-embed" allowFullScreen></iframe> ## [Demo](https://reverent-varahamihira-23e4de.netlify.app/) 📽 --- ## Plan (Jihye) ### App structure  --- ### Project board  --- ### Style  --- ## bugs🐛🐞 (Jihye) <iframe src="https://giphy.com/embed/l46CwEYnbFtFfjZNS" width="480" height="472" frameBorder="0" class="giphy-embed" allowFullScreen></iframe> --- ### Small mistakes eat time!  🙅‍♀️ ```return {}``` 🙅‍♀️ 🙆‍♀️ ```return ()``` 🙆‍♀️ We spent a long time to figure out when our components didn't return anything. It was because we used {} after return with React we should use () to return. --- ### Still working on it ``` function checkFollower(val) { return followersList.includes(val); } if (checkFollower(value)) { setScore(score + 10); return ( <div className="flex-row"> <p>Points</p> <div className="round">{score}</div> </div> ); } else { return ( <div className="flex-row"> <p>Points</p> <div className="round">{score}</div> </div> ); } ``` --- ### File structure matters  When we depoloyed our app on Netlify, it didn't render our components properly. I could be we didn't have out package.josn on the top level or we had a nested directory. After relocating everything we were able to deploy out app 🥳 --- ``` "scripts": { "dev": "vite", "build": "vite build", "serve": "vite preview" }, ``` --- ### Running effects ``` React.useEffect(() => { fetch(url + props.name) .then((res) => res.json()) .then((data) => setUserName(data)); }, []); ``` When we used reactEffect() to update state, we put an empty array as a second argument or put some values inside of the array. It caused a lot of problems (e.g exceeding API limit, state is not being updated). We now know when to use empty/non empty array or just leave it empty --- ### Learnings - [ ] useEffect - [ ] Getting kicked🦵 out Github API  - [ ] learning new syntax - [ ] Netlify deployment - [ ] false sense of confidence 🤫 --- ## Future Improvements <iframe src="https://giphy.com/embed/13FrpeVH09Zrb2" width="480" height="262" frameBorder="0" class="giphy-embed" allowFullScreen></iframe> - [ ] css - [ ] Time limits removing you from the game⏰ - [ ] maintaining user sessions. - [ ] more instructions about the inputs (aria-label) --- ## Future Improvements <iframe src="https://giphy.com/embed/3o6MbokumzM4Vo8QRW" width="280" height="366" frameBorder="0" class="giphy-embed" allowFullScreen></iframe><p> - [ ] scoring board 📝 - [ ] scoring counter --- ## Any Questions <iframe src="https://giphy.com/embed/lCN6LF3S1fQWc" width="417" height="480" frameBorder="0" class="giphy-embed" allowFullScreen></iframe>