Real-time Orders

A real-time orders dashboard for a local restaurant in Seattle.

Status: Work in progress

Client

1. Orders Dashboard (dynamic)
2. Customer-Facing Website (static)

Stack: Next.js, Typescript, Apollo Client

Server

Stack: Node.js, Typescript, Apollo Server, Postgresql, Prisma, Express

Deployment

1. Server is deployed on Heroku using the Heroku Monorepo buildpack with a Postgres database attached.

• Deploy the server to production using: git push heroku master

2. Both dashboard and main customer website are deployed on Vercel using sub-directories.

Running locally

Navigate to the following subdirectories and run the following commands for each:

1. Orders Dashboard / Customer Website (ports 3001 and 3000):

yarn dev

2. Server (on port 4000):

npm run dev

If you're testing out Stripe webhooks, be sure to also run:

stripe listen --forward-to localhost:4000/v1/payment/complete

Migration, Reseeding, and ad-hoc changes

1. To reseed the database: npx prisma db seed
2. To run the ad-hoc script: npx ts-node ad-hoc.ts
3. Migrations are auto-applied during production deployment

• To run migrations locally, npx prisma migrate dev

Version 0 (Skateboard)

Accept and view orders from the restaurant site and receive payments online.

• DB Seeding
• Nodemon, Typescript, dev setup
• Apollo Server
• Schema + Resolvers
• Prisma and Sqlite3 setup
• Schema / DB Migration (multiple item orders)
• N+1 Queries (Dataloader)
• DB cascading deletes (one to many)
• Jest Installation
  • Cascading Deletes testing
• title field for order (and migration)
• createOrder mutation
• Stripe /checkout endpoint
• Pricing Migration
• Centralized Menu (server-sided)
• Most recent order sorting default
• Menu Item mismatch (gyro vs. shawarma)
• Frontends
  • Orders Dashboard
    • Apollo Client
    • HTTP Polling
    • OrdersList Component
    • Basic Retry
  • Checkout flow (customer-facing)
    • Stripe Checkout
    • Multiple Quantity Cart
    • 5 menu items
    • 1 pager
    • Basic styling for fulfillment page
      • Loading and Error displays
    • Basic styling for menu selection
    • Client fetches from server (getStaticProps)
    • Remove HTTP route for /checkout
    • Connect checkout with Prisma
      • Add createCheckoutSession -> sends back sessionId for web client
      • On confirmation, get order details with sessionId
      • Fulfill order on the backend
      • Order Fulfilled Page
  • Order component refactor
  • Paid status interface
  • Basic date display on orders (Note: for now, and not a permanent solution)
• Switch to local Postgres db
• Heroku Deployment (server)
• Vercel (frontends)
• Set actual development webhook URL (update env variable)
• Client website switchover (add menu page)
• Google Analytics (Client)
• Ignore Builds Setting (Client and Dashboard)
• Update menu work flow on production (add items, update prices)
  • Ad-hoc script / upsert seeding
  • Reseed with new menu (with fixed itemId matching)
  • Dataloader Fix (proper batch ordering)
• Final Actions:
  • Connect Stripe to bank account
  • Add production webhook
  • Basic tests
  • Version push to Heroku
  • Add logging
  • Seed production database + clear out existing orders
  • Switch over to production keys
    • Heroku Stripe Keys
    • Vercel Client Environment variables
  • Run first transaction (wahoo! 🎉)
  • Publish client domain officially (and remove Netlify connection)

Version 1 (Bicycle)

Update order statuses, order filtering, fine-grained order information, sidebar and main order focus UI, more menu selection, fast static order site

• Event notifications on Checkout
• Prices in Dashboard
  • totalPrice column migration
  • Non-null migration revert
  • Setup totalPrice integration on order creation
• New order notification
• "Most Popular" items
• Workflow for ad-hoc database updates (eg. updating item descriptions or adding new items)
• Menu Interface
  • Prices & Tax update
  • Dietary labels
  • Section Shortcuts
  • Quantity Selection Buttons
  • Large item orders handling status
  • Item Categories Migration
  • Dietary Field Migration
  • Item descriptions
    • Description Migration
    • Update existing items
• Update Prisma
• Ad-hoc scripts re-organize
• Email Receipt
• Yelp Reviews on Order page (?)
• Shared types between server and frontend (?)
• Align Postgres db to table structure of Stripe
• Specify acceptable domains (cross-origin)
• checkoutSessionId field to Order (match orderId with checkoutSessionId)
• Menu item pictures (served through CloudFront?)
  • Column addition (migration)
  • File serving
• Timestamped orders sorting (per-day orders)
• Server-sent Events (SSE) for app-wide notifications
• Fix orderId in schema to required instead of nullable
• Filtering by status, time, and order titles
• updateOrder mutation
  • Enum for order status: READY, WAITING, FINISHED
• Frontends
  • Orders Dashboard
    • Sidebar interface and main view
    • Update Order status
  • Checkout flow (customer-facing)
    • Include all menu items
    • 5 - 10 pictures included

Version 2 (Car)

End-of-day transaction summary, dev and production environments, speedy and efficient data fetching, service observability

• Item search
• Pricing for Menu Items Migration
• Stripe Product/Prices Integration (backend-aligned item IDs)
• Websockets Integration (?)
• UUID schema migration
• Production / Dev environments
• End-of-day Transactional Summary (email)
• Migrate schema/DB from integer IDs to hashes

And beyond...

Miscellaneous

• .gitignore for all node_modules

If dealing with simultaneous client-server changes:

1. Deploy server first (git commit and git push heroku)
2. Update core seeds after migration is applied
3. Verify server changes
4. Deploy client (git push master)
5. Verify client changes

If working on a non-nullable column migration:

1. Add the column as optional or set a default value to it (migration)
2. Modify the ad-hoc script to update values
3. Run it locally
4. Confirm changes and then deploy to server
5. Run script on production
6. Revert the column back with another migration
7. Run it locally
8. Deploy after verification

To address

1. Multi-restaurant integration
2. Next.js API in-house routes vs. separate server-client architecture

• Related: hefty, opaque Apollo client implementation for client-side fetching

3. Stripe and Prisma model misalignment (eg. line items and StripeLineItemResponse type)

Answered

1. How should a restaurant owner update their menu?

• Manual in-line updates through a reseeding procedure (soon to be on Stripe)