--- # 💀 KSB ⚰️ ### K1 * 🧱 *Principles and uses of relational and non-relational databases* We discussed potentially using a non-relational database but found that we needed to have an entries table that related to our users Auth table. --- ### S15 & S2 💅 *Develop effective user interfaces* We grappled with Figma and conducted testing and analysed what could be the best experience for users. However, we couldn't done more with user feedback on error handling and loading. 📣 *Communicate software solutions and ideas to technical and non-technical stakeholders* We discussed use cases with users during research and testing. We discussed our project with our Mentor. --- ### B9 📚 *Committed to continued professional development.* We really stretched ourselves on this project by trying to use Nextjs 13, supabase, and the spotify API. --- # 🤠 roles QA: CAM Typescript: <iframe src="https://giphy.com/embed/vnOQdGt1ILQEo" width="480" height="270" frameBorder="0" class="giphy-embed" allowFullScreen></iframe> First experience with Jest & Cypress type safety is important but not fun --- <iframe src="https://giphy.com/embed/3oriff4xQ7Oq2TIgTu" width="480" height="368" frameBorder="0" class="giphy-embed" allowFullScreen></iframe><p>quickly abandoned testing and lost my 1 jest test file :( when to test vs. typescript </p> --- UX: ZAK  * it was more of community work than an indvidual job * *quite* happy with how the project turned out **(demo at the end)** * blobs look nice but we should've cut our losses early and focused the energy on more pressing issues --- DO: MRK #### Responsibilities: * Set up repo and file structure :x: * File structure evolved as we gained understanding of Next, Vercel * e.g. public folder had to be moved from src so that Vercel was happy * Make sure separation of concerns is considered :heavy_check_mark:  * Set up linting and check it works for everyone :heavy_check_mark: * Set up eslint, prettier and husky. Conventions agreed at project start * Set up deployment to Vercel and take ongoing responsibility :heavy_check_mark: * Has been quite straightforward. Haven't really had to touch it since initial setup and wrangling to get public folder working * set up environment variables for local and remote databases :heavy_check_mark: * .env and Vercel environment variables --- SF: TOM Expectations helped us realize that our velocity was always slower than expected. As a result, we had to adjust our scope and account for twice as much time to ensure we complete tasks on time. Didnt follow EandA for this sprint as strictly since there were far fewer issues and didnt take much granular time management. code : Removed most useEffects when transitioning to server side routes and async await (previously getServerProps) and passed down as props Would be nice to send props down to routes from middleware with matchers. To reduce fetches but I think next suggests you do the async await in each route and it caches across routes so it is just as efficient as using middleware but not as obvious/readable. --- # 🔥 Sprint Rundown ## Typescript #### F*** NULL It's important to handle nullable values early on, rather than relying on null coalescing down the chain.  ### Making all routes SSR improved performance, authentication, readability, and made them easier to reuse prematurely. ## AuthUI supabase login component ### lessons learned - sometimes easier isnt better (doing the work gives us the control) - things are normally deperacted for a good reason ## other lessons learned - hesitate on new versioning/technologies. (but dont avoid) --- ## Where we really struggled: Cookies, Sessions, and ClientSide vs. ServerSide <iframe src="https://giphy.com/embed/xT0xeMA62E1XIlup68" width="480" height="270" frameBorder="0" class="giphy-embed" allowFullScreen></iframe> --- ### Spotify Auth - not knowing *why* something is not working is not fun  --- ## Code snippets :scissors: <iframe src="https://giphy.com/embed/wGEymBvo6FUlR9bbda" width="480" height="480" frameBorder="0" class="giphy-embed" allowFullScreen></iframe> --- #### Excerpt from getStreaks function: <!-- .slide: style="font-size: 36px;" --> ```typescript!= // Create empty array of streaks const streaks: number[] = []; let streak = 0; // For loop to iterate through dates // from earliest entry date to today for ( let date = earliestDate; date <= today; date.setDate(date.getDate() + 1) ) { if (entryExistsForDate(date, userEntries)) { streak += 1; } else { // No entry today so push current streak if not zero, // then reset for next streak if (streak) streaks.push(streak); streak = 0; } } // Push the last streak even if zero // that will be the current streak streaks.push(streak); return { current: streaks[streaks.length - 1], allTime: Math.max(...streaks), }; ``` --- ## Demo