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.

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.