Designing the Cardstack Builder

C14f6f7b7ce45e286106e7e7d5421f40?s=47 Chris Tse
October 24, 2019

Designing the Cardstack Builder

Full Talk: https://www.youtube.com/watch?v=PkpVR2U554k
Blog Post: https://medium.com/cardstack/the-ultimate-card-building-tool-25c442e22bed

Cardstack’s Founding Director Chris Tse introduces the Cardstack Builder: the product that makes the complete full-stack Cardstack Experience possible. All the work done by back-end engineers, front-end engineers, and Web developers now empowers the users—the people who don’t know how to code, but who are comfortable using Excel and SaaS software like Salesforce or Airtable.

As a user, you will never need to ask a developer to build you an entire app from scratch again! The Cardstack Builder enables you to create apps yourself, by choosing cards and fields from the Card Catalog and assembling them to your heart’s content with simple drag-and-drop tools, and finally editing the content of your cards. You end up with a real working app that you have configured yourself, and quickly too! But it doesn’t end there. If you want additional customization for certain parts of your app, you can always hire a developer to help you adjust, extend, or theme your card to your exact specifications.

C14f6f7b7ce45e286106e7e7d5421f40?s=128

Chris Tse

October 24, 2019
Tweet

Transcript

  1. CARDSTACK CHRIS TSE Founding Director Cardstack Project chris.tse@cardstack.com Designing Cardstack

    Builder OCTOBER 2019 - PRODUCT TALK V6
  2. Power Users Web Developers 1,000,000+ 100,000+ Front-end Engineers 10,000+ Product

    Team 100+ Back-end Engineers 1,000+ Framework Team 10+ PREVIOUSLY… CARDSTACK CARD MAKERS: INVERSE PYRAMID MODEL NUMBER OF POTENTIAL CONTRIBUTORS Requires coding skills
  3. Power Users Web Developers 1,000,000+ 100,000+ Front-end Engineers 10,000+ Product

    Team 100+ Back-end Engineers 1,000+ Framework Team 10+ CARDSTACK NUMBER OF POTENTIAL CARD MAKERS Coding skills NOT required!
  4. Account Card BUILT-IN : FIELDS : VIEW Accou BUILT-I EDIT

    > < SAVE Add CUSTO Send Invoice Provision Services VIEW CARD FIELD FIELD FIELD ACTIONS CARD TYPE
  5. Account Card BUILT-IN : FIELDS : VIEW EDIT > <

    SAVE Send Invoice Provision Services VIEW CARD “Everything is a card.” FIELD FIELD FIELD ACTIONS CARD TYPE
  6. Account Card BUILT-IN : FIELDS : VIEW Account Card BUILT-IN

    : FIELDS : EDIT EDIT > < SAVE CONFIGU < DONE Address Card CUSTOM : WIDGET : EDIT : INLINE PA < FUSE Send Invoice Provision Services EDIT CARD
  7. Account Card BUILT-IN : FIELDS : CONFIGURE CONFIGURE > <

    DONE Address Card CUSTOM : WIDGET : EDIT POP > < PACK CARD CATALOG QUICK BROWSE PART > < FUSE CONFIGURE CARD CONFIGURE CARD
  8. BUILT-IN : FIELDS : CONFIGURE Address Card CUSTOM : WIDGET

    : EDIT POP > < PACK CONFIGURE CARD CONFIGURE FIELD
  9. nt Card : FIELDS : CONFIGURE Card IDGET : EDIT

    POP > < PACK Address Card BUILT-IN : FIELDS : EDIT PROPERTIES SCHEMA | LAYOUT CONFIGURE CARD FIELDS AS CARDS
  10. Account Card BUILT-IN : FIELDS : CONFIGURE Address Card CUSTOM

    : WIDGET : EDIT POP > < PACK Address Card BUILT-IN : FIELDS : EDIT CARD CATALOG QUICK BROWSE PROPERTIES SCHEMA | LAYOUT SEQUENTIAL FLOW FOR INITIATION CHRONOLOGICAL FLOW FOR COORDINATION Configure CARDSTACK BUILDER
  11. Account Card BUILT-IN : FIELDS : VIEW Send Invoice ACME

    Inc Address: Account #: Account Card BUILT-IN : FIELDS : EDIT Account Card BUILT-IN : FIELDS : CONFIGURE EDIT > < SAVE CONFIGURE > < DONE CUSTOM LAYOUT 2 - LAYOUT 1 FIELDS > > Address Card CUSTOM : WIDGET : EDIT CUSTOM FIELDS DISMISS OVERLAY > > Address Card CUSTOM : WIDGET : EDIT : INLINE Address Card CUSTOM : WIDGET : EDIT POP PACK > > POP > < PACK Address Card BUILT-IN : FIELDS : EDIT Address: Account #: ACME Inc Address Card CUSTOM : WIDGET : EDIT < SAVE CARD CATALOG QUICK BROWSE PROPERTIES SCHEMA | LAYOUT PART > < FUSE Send Invoice Provision Services CUSTOM : LAYOUT 1 : VIEW Send Invoice ACME Inc Address: Account #: START FLOW > ACTION: STEP 1 : FILL ACME Inc Next: Payment Progress: 25% ACTION: STEP 2 : FILL Drag accepted payment methods here Progress: 100% Complete & Send ACME Inc << SLIDING VIEWPORT >> SEQUENTIAL FLOW FOR INITIATION CHRONOLOGICAL FLOW FOR COORDINATION INVOICE CARD WE ACCEPT MESSAGE 1 ACME Inc. joined. LIFT & PLACE > MESSAGE 2 PAYMENT CARD Tue 7:23 am DUE UPON RECEIPT TO: FROM: AMOUNT: View Edit Configure EVERY CARD HAS 3 MODES
  12. Account Card BUILT-IN : FIELDS : VIEW Account Card BUILT-IN

    : FIELDS : EDIT Account C BUILT-IN : FIE EDIT > < SAVE CONFIGURE > < DONE CUSTOM LAYOUT 2 - LAYOUT 1 FIELDS > > Address Card CUSTOM : WIDGET : EDIT FIELDS OVERLAY > Address Card CUSTOM : WIDGET : EDIT : INLINE Address Card CUSTOM : WIDGET : ED POP PACK > > CARD CATALOG QUICK BROWSE PART > < FUSE Send Invoice Provision Services Send Invoice SEQUENTIAL FLOW FOR INITIATION BUILT-IN FIELD LAYOUT
  13. Account Card BUILT-IN : FIELDS : VIEW Send Invoice Address:

    Account Card BUILT-IN : FIELDS : EDIT EDIT > < SAVE CONFIGURE > < DONE CUSTOM LAYOUT 2 - LAYOUT 1 FIELDS > > Address Card CUSTOM : WIDGET : EDIT CUSTOM FIELDS DISMISS OVERLAY > > POP PACK > > Address: Address Card CUSTOM : WIDGET : EDIT CA QU Se AC Add Acco START FLOW > SEQUENTIAL FOR INITIATIO ALTERNATE LAYOUTS
  14. Account Card CUSTOM : LAYOUT 1 : EDIT Account Card

    CUSTOM : LAYOUT 1 : VIEW Send Invoice ACME Inc Address: Account #: CUSTOM LAYOUT 2 - LAYOUT 1 FIELDS > > Address Card CUSTOM : WIDGET : EDIT CUSTOM FIELDS DISMISS OVERLAY > > Address: Account #: ACME Inc Address Card CUSTOM : WIDGET : EDIT EDIT > < SAVE START FLOW > THEME-ABLE TEMPLATES
  15. Account Card CUSTOM : LAYOUT 1 : EDIT Account Card

    CUSTOM : LAYOUT 1 : VIEW Send Invoice ACME Inc Address: Account #: CUSTOM LAYOUT 2 - LAYOUT 1 FIELDS > > Address Card CUSTOM : WIDGET : EDIT CUSTOM FIELDS DISMISS OVERLAY > > POP > Address: Account #: ACME Inc Address Card CUSTOM : WIDGET : EDIT EDIT > < SAVE Account Card CUSTOM : LAYOUT 1 : VIEW Send Invoice ACME Inc Address: Account #: START FLOW > SEQUENTIAL FLOW FOR INITIATION IN-PLACE EDITING
  16. Account Card BUILT-IN : FIELDS : VIEW Account Card BUILT-IN

    : FIELDS : EDIT Account Ca BUILT-IN : FIELD EDIT > < SAVE CONFIGURE > < DONE CUSTOM LAYOUT 2 - LAYOUT 1 FIELDS > > Address Card CUSTOM : WIDGET : EDIT CUSTOM FIELDS DISMISS OVERLAY > > Address Card CUSTOM : WIDGET : EDIT : INLINE Address Card CUSTOM : WIDGET : EDIT POP PACK > > CARD CATALOG QUICK BROWSE PART > < FUSE Send Invoice Provision Services Send Invoice FLOW << SEQUENTIAL FLOW FOR INITIATION SHARING EDITING VIEWS
  17. Account Card CUSTOM : LAYOUT 1 : EDIT Account Card

    CUSTOM : LAYOUT 1 : VIEW Send Invoice ACME Inc Address: Account #: CUSTOM LAYOUT 2 - LAYOUT 1 FIELDS > > Address Card CUSTOM : WIDGET : EDIT CUSTOM FIELDS DISMISS OVERLAY > > POP > Address: Account #: ACME Inc Address Card CUSTOM : WIDGET : EDIT EDIT > < SAVE Account Card CUSTOM : LAYOUT 1 : VIEW Send Invoice ACME Inc Address: Account #: START FLOW > SEQUENTIAL FLOW FOR INITIATION IN-PLACE EDITING
  18. Account Card CUSTOM : LAYOUT 1 : EDIT Address Card

    CUSTOM : WIDGET : EDIT CUSTOM FIELDS DISMISS OVERLAY > > POP > Address: Account #: ACME Inc Address Card CUSTOM : WIDGET : EDIT EDIT > SAVE Account Card CUSTOM : LAYOUT 1 : VIEW Send Invoice ACME Inc Address: Account #: START FLOW > Create Invoice ACTION: STEP 1 : FILL ACME Inc Next: Payment Progress: 25% Set Up Payment ACTION: STEP 2 : FILL Drag accepted payment methods here Progress: 1 Complete & Sen ACME Inc << SLIDING VIEWPORT >> SEQUENTIAL FLOW FOR INITIATION TRIGGERING ACTIONS
  19. Account Card CUSTOM : LAYOUT 1 : EDIT dress Card

    TOM : WIDGET : EDIT CUSTOM FIELDS DISMISS OVERLAY > > POP > Address: Account #: ACME Inc Address Card CUSTOM : WIDGET : EDIT Account Card CUSTOM : LAYOUT 1 : VIEW Send Invoice ACME Inc Address: Account #: START FLOW > Create Invoice ACTION: STEP 1 : FILL ACME Inc Next: Payment Progress: 25% Set Up Payment ACTION: STEP 2 : FILL Drag accepted payment methods here Progress: 100% Complete & Send ACME Inc << SLIDING VIEWPORT >> SEQUENTIAL FLOW FOR INITIATION LIFT & PLACE CHAINING CARDS
  20. Account Card CUSTOM : LAYOUT 1 : VIEW Send Invoice

    ACME Inc Address: Account #: START FLOW > Create Invoice ACTION: STEP 1 : FILL ACME Inc Next: Payment Progress: 25% Set Up Payment ACTION: STEP 2 : FILL Drag accepted payment methods here Progress: 100% Complete & Send ACME Inc << SLIDING VIEWPORT >> SEQUENTIAL FLOW FOR INITIATION CHRONOLOGICAL FLOW FOR COORDINATION INVOICE CARD WE ACCEPT MESSAGE 1 Thread Global Vendor joined. ACME Inc. joined. LIFT & PLACE > MESSAGE 2 PAYMENT CARD Mon 9:12 am Tue 7:23 am DUE UPON RECEIPT TO: FROM: AMOUNT: ACCEPTING OTHER CARDS
  21. ce FILL rogress: 25% Set Up Payment ACTION: STEP 2

    : FILL Drag accepted payment methods here Progress: 100% ACME Inc INVOICE CARD WE ACCEPT MESSAGE 1 Thread Global Vendor joined. ACME Inc. joined. LIFT & PLACE > Mon 9:12 am Tue 7:23 am DUE UPON RECEIPT CARD INSIDE THREADS
  22. Payment Drag accepted payment methods here Complete & Send ACME

    Inc VIEWPORT >> CHRONOLOGICAL FLOW FOR COORDINATION WE ACCEPT ACME Inc. joined. PLACE > MESSAGE 2 PAYMENT CARD Tue 7:23 am TO: FROM: AMOUNT: CARD INSIDE THREADS
  23. Account Card CUSTOM : LAYOUT 1 : VIEW Send Invoice

    ACME Inc Address: Account #: START FLOW > Create Invoice ACTION: STEP 1 : FILL ACME Inc Next: Payment Progress: 25% Set Up Payment ACTION: STEP 2 : FILL Drag accepted payment methods here Progress: 100% Complete & Send ACME Inc << SLIDING VIEWPORT >> SEQUENTIAL FLOW FOR INITIATION CHRONOLOGICAL FLOW FOR COORDINATION INVOICE CARD WE ACCEPT MESSAGE 1 Thread Global Vendor joined. ACME Inc. joined. LIFT & PLACE > MESSAGE 2 PAYMENT CARD Mon 9:12 am Tue 7:23 am DUE UPON RECEIPT TO: FROM: AMOUNT: CARDSTACK WORKFLOW
  24. Account Card CUSTOM : LAYOUT 1 : EDIT Account Card

    BUILT-IN : FIELDS : VIEW Account Card CUSTOM : LAYOUT 1 : VIEW Send Invoice ACME Inc Address: Account #: Account Card BUILT-IN : FIELDS : EDIT Account Card BUILT-IN : FIELDS : CONFIGURE EDIT > < SAVE CONFIGURE > < DONE CUSTOM LAYOUT 2 - LAYOUT 1 FIELDS > > Address Card CUSTOM : WIDGET : EDIT CUSTOM FIELDS DISMISS OVERLAY > > Address Card CUSTOM : WIDGET : EDIT : INLINE Address Card CUSTOM : WIDGET : EDIT POP PACK > > POP > < PACK Address Card BUILT-IN : FIELDS : EDIT Address: Account #: ACME Inc Address Card CUSTOM : WIDGET : EDIT EDIT > < SAVE CARD CATALOG QUICK BROWSE PROPERTIES SCHEMA | LAYOUT PART > < FUSE Send Invoice Provision Services Account Card CUSTOM : LAYOUT 1 : VIEW Send Invoice ACME Inc Address: Account #: START FLOW > Create Invoice ACTION: STEP 1 : FILL ACME Inc Next: Payment Progress: 25% Set Up Payment ACTION: STEP 2 : FILL Drag accepted payment methods here Progress: 100% Complete & Send ACME Inc << SLIDING VIEWPORT >> SEQUENTIAL FLOW FOR INITIATION CHRONOLOGICAL FLOW FOR COORDINATION INVOICE CARD WE ACCEPT MESSAGE 1 Thread Global Vendor joined. ACME Inc. joined. LIFT & PLACE > MESSAGE 2 PAYMENT CARD Mon 9:12 am Tue 7:23 am DUE UPON RECEIPT TO: FROM: AMOUNT: OVERALL MAP OF CARDSTACK BUILDER + WORKFLOW CA
  25. CARDSTACK • Track 1: Card Schema (V2) Data Architecture Covered

    in a previous talk. Follow along the work on Card Host in our main Github repository. • Track 2: Boxel Design System A new composable user interaction system for making real apps with cards. Demo in a few weeks. • Track 3: Catalog of Pre-built Cards for Common Use Cases Unify and publish common cards needed for data collection, content management, asset encapsulation, workflow orchestration, etc. WORK-IN-PROGRESS FOR CARD BUILDER
  26. CARDSTACK © 2019 CARDSTACK FOUNDATION. CARDSTACK® IS A REGISTERED TRADEMARK.