# Trip Planner Sprint 2  --- ### How we worked as a team * Daily stand-ups * Split work evenly * Worked more individually - we felt that we had a strong foundation to build on from previous sprint * Joined together for pull request code review and to tackle the harder tasks --- ### Kanban Board - end of sprint 2  Estimate 38 points  Actual 31 points --- ### What we have learned From APIs to PWAs... --- - Performance: Using IndexedDB required using incognito mode in Chrome when running a Lighthouse Report :shushing_face:  - You'll need to `npm install` when trying anything new with React - Testing a pdf file is uploaded in Cypress... [Cypress-downloadfile](https://www.npmjs.com/package/cypress-downloadfile) --- - Included Font Awesome Icons... [React Font Awesome](https://fontawesome.com/v5/docs/web/use-with/react) - Rendering PDF files... [pdfjs-dist](pdfjs-dist) --- ### APIs - [Open Weather](https://openweathermap.org/) - [World Weather Online Time Zone](https://www.worldweatheronline.com/developer/api/docs/time-zone-api.aspx) - [Unsplash](https://unsplash.com/developers) --- ### Progressive Web Apps (PWA)  --- ### Key features of a PWA: * Installable and works as a standalone app * Integrates with the operating system * Can be used offline (at least partially)  --- ### Key concepts to understand PWAs * Service Workers * Caching * Web App Manifest --- ### Service Workers scripts that run in the background and allow some action to be performed  --- ### registering a Service Worker  * Check if browser supports the service Worker API * Register the Service Worker and start using it --- ### Checking if the Service Worker is active  --- ### Caching downloading, storing, deleting or updating assets locally  --- ### How the Service Worker interacts with the Cache API  --- ### To Cache or not to Cache? What to cache:  * HTML pages * CSS Style Sheets * Images served statically * JavaScript files used to render the UI * Web fonts * Data like JSON files --- ### Checking what has been cached  --- ### Web App Manifest a JSON file you create that tells the browser how you want your web content to display as an app in the operating system  --- ### Useful tools to develop a PWA * [Workbox](https://developers.google.com/web/tools/workbox/) a set of libraries that make maintaining Service Workers and Cache storage logic easier More about Workbox 👉🏻 [Web.dev Workbox](https://web.dev/learn/pwa/workbox/) * [VitePlugin PWA](https://vite-plugin-pwa.netlify.app/) A plugin for Vite to generate Progressive Web Apps --- #### Resources [Web.dev - Learn PWA](https://web.dev/learn/pwa/) - Thanks Reuben! ✨ --- ### UX / UI Styling a components and its children elements using a Styled Component  --- Style the children inside the Styled Component  --- ### React `useRef` --- Some more react hooks fun! 🪝 Focusing an input on button click   --- Call the focus function on the `current` prop of the referenced variable  --- ### Main challenges of the project - Keeping local database and React state in sync - PWA (?!?! :scream:) --- ### With more time we would implement... - Food Api :yum: [Spoonacular](https://spoonacular.com/food-api) - Local events / news API - Utilising [Cities.json](https://github.com/lutangar/cities.json) for error handling user input :city_sunrise: - Finish PWA implementation 😏 - Push notifications on trip day - Fix To do list bugs - Make document names editable and allow re-uploading an existing doc --- ### We are proud of... - Covering our main user stories! - Narrowing scope to a few core features and making them (mostly) work! - Teaching and learning from each other - being consistent with code reads/reviews on pull requests! --- ### Thoughts for the next project - Dedicate more time to planning Database schema - even if local or non-relational. Consider all data being collected and how to organize it before writing the code - Delivering an MVP, no matter how minimal: have at least one feature that works really well --- ### [DEMO](https://trip-planner-five.vercel.app/)