# Where's Whippy - Sprint 3 :ice_cream: ###### tags: student-project --- ## Demo :bear:  --- ## How our product evolved ### Miro - key points we wanted on our app  * Heatmap * Dashboard for vendors ---  * Separate users/logging in * Simple map for customers --- ### Figma  [Prototype](https://www.figma.com/proto/f0sE0BrQhChujnQJwxKpAz/Ice-Cream?node-id=2%3A9&scaling=scale-down) --- [Our app](http://localhost:3000/) --- ## Tech stack ### Backend * PostgreSQL * Express.js ### Frontend * Google Map React * React * Styled components ### Testing - Jest FE & BE `- test --watch` was helpful (like nodemon but for testing) - Supertest --- ## What did we achieve at the end of the sprint * Managed to generate a heatmap of potential customers * Finished setting up the backend * Connected the backend and frontend * Implemented most of the design principles outlined in style guide --- ## If we had more time we would * Generate a map for customers to see all the nearby ice cream vendors * Let the vendor see historical data on the heatmap (between two dates for example) * Let the vendor switch on/off availability and choose the updates he wanted to receive * Create a better user experience * login & signup flow * Clearer error handling for user --- * Ensure the app is accessible for everyone * Provide a 5km radius for users on the map. * Improve security of app by adding protected routes on the FE and auth on the BE * Greater test coverage. Especially on the FE --- ## Hettie - Scrum Master Points: 4 per day for 4 people (26pts) | Expected | Actual | Difference | | -------- | ------ | ---------- | | 29.5 - 16.5 | 20.5 | 4 | * Lost half of monday to setting up - further planning of backend routes, set up, documentation * Lots of other half finished elements * Team retrospective - Front End vs Back End * Reprioritising --- ## Lizzy - UI/UX Design > The best-laid plans of mice and men often go awry * Run accessibility audits more frequently #### Accessibility audit | Page| Rating| What can be improved further? | -------- | -------- | -------- | | Landing |100 | Overall design | | Login and sign up page |100 | Clearer signposting | | Sign up page |100| Error handling on the page | Login page |100 | Similar to the above | Overall design | | Maps (heatmap and customer) | 92 | Missing alt tags, exploring what features are available in the Google Map api to ensure the map is accessible to all | --- ## Joe - Quality Assurance ### Listen!  --- ### Useful takeaways - listen() In our `server.js` files we used to have both - `const server = express()` & `server.listen(PORT, () => console.log(`Listening on...`))` - The first DEFINES the server. The second STARTS the server - `.listen()` is asynchronous which causes problems with Jest testing - Solution: create an `index.js` file where you start running your server --- ### Abstraction and mixing paradigms ```jsx= return ( <FormContainer onSubmit={handleSubmit} /> {loggedInStatusCheckerAndRedirect()} <Label htmlFor="email">Email</Label> <Input type="email" id="email" name="email" required onChange={handleChange} value={inputValueEmail} /><FormContainer onSubmit={handleSubmit}> {loggedInStatusCheckerAndRedirect()} ) ``` --- ### Async Testing 3 ways ```javascript= test("1) Using promises: Can GET...", () => { return model .getAllCustomerLocations() .then((locations) => {...funky tests) }) test("2) Using .resolves: Can GET...", () => { return expect(model.getAllCustomerLocations()).resolves.toHaveLength(5) }) test("3) Using Async/Await: Can GET...", async () => { const locations = await model.getAllCustomerLocations() expect(locations.length).toBe(5) }) ``` --- ## Ina - DevOps What it felt like to seperate our FE and BE within a monorepo..  ``` heroku git:remote -a where-is-whippy ``` ```jsonld= "deploy": "git subtree push --prefix server-api heroku master" ``` ---  --- Thank you! any questions? ---