Adding Commerce to Course Builder

Course Builder now has the basics of comemrce that have been proted over from skill stack and are being actively used to sell a live workshop tickets for ProAWS.

Thinking about next steps and work that we might consider.

Commerce Integration and Component Extraction

commerce-next: We recently integrated commerce into the course builder by extracting commerce functionalities into the course-builder-turbo repository within the packages folder. This is referred to as commerce-next because it still depends on Next.js. Our midterm goal is to remove any Next.js dependencies, making the commerce package framework-agnostic.

Components and Behaviors: The commerce-next package includes components and behaviors for the complete e-commerce workflow, from pricing components to post-purchase screens. Major components include:

• Pricing Component: Handles various aspects like coupons, sale countdowns, and purchase power parity.
• Invoices: Essential for user demands.
• Team Aspects: Manage seats, invitations, and team ownership.

Design System: We aim to develop a comprehensive design system starting with these components, transitioning to Radix style composability to improve maintainability and customization.

Component Breakdown and Customization

Granular Composability: Each component (e.g., purchase transfer forms) will be broken down into smaller parts (headers, forms, buttons) to allow detailed customization while also offering a default configuration for rapid deployment.

Styling: Transitioning from global scope CSS to a token-based variable style system to manage colors, fonts, sizes, and spacing.

Pricing Component State Management

Current State: The pricing component has been ported quickly, leaving some functionalities like sale countdowns and waitlists incomplete.

Future Approach: Implement a state machine using xState to manage the various states and flows, ensuring a more organized and maintainable structure.

Framework-Agnostic Commerce Package

Framework Independence: Decouple from Next.js and make the commerce package usable with any framework. Framework-specific functionalities will be contained within their respective packages (e.g., Next.js, React).

End-to-End Testing

Playwright Integration: Inspired by OrbitKit's setup, we plan to integrate Playwright for end-to-end testing, including GitHub actions to automate tests. This setup will simulate real transactions and interactions, providing comprehensive test coverage.

Database Migration

Product Table Migration: Consolidate the product table into a generic content resource table in the database. This change aims to simplify the structure and reduce confusion by treating products as a type of content resource.

Additional Tasks and Ideas

Basic Next.js Template: Develop a simple Next.js template for a blog. Course Builder Template for Astro: Create a template to run Course Builder inside Astro, making it more framework-agnostic. Migration to Course Builder: Gradually migrating ProNextJS and Total TypeScript to Course Builder. Epic Web Project: Consider migrating to Remix for the Epic Web project.

Next Steps and Considerations

Dependency Removal: Identify and remove Next.js dependencies in the commerce-next package. Configuration Management: Ensure environmental variables and configuration options are framework-agnostic. Component Flexibility: Enhance component flexibility to support both detailed customization and default usage.