GRUBHUB speed run with Vue.js
Hi, there. You're not logged in. So, you must be a visitor. Welcome!
What is this? You are viewing one of our supplemental "Stories." In addition to our core design curriculum, we are constantly building out additional resources. Stories are a collection of real work tasks, design history, UX explorations, and work-throughs. Stories are often off-the-cuff and less concerned with production value.
Introduction
Let’s break down how to build the GRUBHUB front-end.
It’s partially about Vue – but really more about how to break down the tasks.
You could follow this video journey with any setup.
Overview
Going over things with Ivy to see what we can figure out as far as a plan of attack.
[1 hour on the quick research from the doc above + 1 hour chat with ivy = 2 hours so far]
What we gathered
Resources
- user
- restaurant
- item (options) (categories?)
- category (for the restaurant in general?)
Routes
- Home page
- Sign up
- Sign up as a business specifically
- Login
- Catering
- Profile
- my account (username and stuff profile image)
- payments (billing)
- past orders
- favorites (saved)
- Offers
- Reviews
- Admin for super admins (see all the data and users)
- Admin for businesses
Components
- Restaurant card
- Restaurant list (the little grids)
- Categories filter list
- Restaurant profile detail
- menu item categories lists
- menu sidebar quick menu
Roles
- Admin (access to delete anything)
- Business owner (access to create items / build restaurant page)
- Visitor (have their own favorites and cart / history etc)
Routing
It makes sense to get all the view/pages/screens – (whatever you want to call them) – “Routes” – in place early so we can get feedback and ensure we’re on the right track.
Here’s a snapshot of the state after this 1.5 hours: https://vue-fast-food-routing.surge.sh
[we can round this out to 2 hours + the previous 2 == 4 hours so far]
The first reusable components
We build the restaurant cards and the grids they live in.
[up to about 5 hours]
Derek breaks down an installs Sass
+ Ivy breaks down because our food isn’t here yet.
Business signup form
The businesses themselves need to sign up and actually add their businesses – or there wont be any restaurants for the regular users to look at!
[We can round this up to 7 hours]
Restaurant detail routes
A little bit of a side-step here – to help some students with accessing the sub-collections.
(Also note that when Derek is talking about how retrieving all restaurant documents might also force the read of all associated sub-collection menu items… that’s actually not the case! They are actually shallow reads. So, safe on that front.)
Reusable signIn form component and sign up, out, in etc - for both roles
Router guards, 404, sign-out route, bye-bye page, and ?
…
Scrolling and trying to connect the userAuth to the userDoc
Change username + toggle with transition + route transition
User auth + doc refactor
Refactoring how we get the associated user document so it will all “just work”
Getting the business admin ready to add restaurants
The second half of this explores how to get user.roles type route guards in place. Derek looks at docs and tries some things and talks about them – but there’s no conclusion on how to do it properly. It’s still a useful conversation and experience… but feel free to skip it! The real solution will appear at some point later.
Allowing a business to add a restaurant
Still a few race condition issues at this point in the story… but moving along!
Race condition issues and creating indexes
The video editing software just deleted the first half of the video! What!? But it’s OK. Here are the links I talked about.
The problem? Well, we need some data … but we needed some other data … and we needed that first bit of data to know which second data…. and well, it wasn’t ready yet. So – we couldn’t get the second set of data! That’s an example of a race condition.
Here are some tools we could use to make sure that first piece of data is gathered before we try and use it to gather the second one.
firebase/onAuthStateChanged, VueFire/getCurrentUser, VueFire/promise from useDocument/Collection,
user refactor overview ?
Derek goes over a bit of cleanup he did off screen / and clarifies a bit of how the useDocument type promises can be used to ensure your data is ready before you use it
Adding images with cloud storage
You can probably skip this one – and watch the next one instead!
Actually – you probably need to watch the first part setting up the storage maybe –