charlieargue/multi-cart

This is a full-stack React serverless web application built for demo & study purposes.

🛍 Multi-Cart — a fake fancy shopping cart

• multicart.app

This is a full-stack React serverless web application built for demo and study purposes while I was learning React, GraphQL, and other tech.

NOTE: In April 2023, I upgraded most of the shopping cart code, guided by React principles and best practices learned over the past couple years, detailed in the section below.

📐 2023: Guiding Principles and Best Practices

Where applicable, I've linked to relevant code samples:

• component composition (eg. drawerHeader={<SearchBar...) eg. 1 2 3
• minimal state management
• minimal useEffects, and encapsulation into custom hooks where appropriate, eg. 1 2
• strongly-typed auto-generated React hooks from graphql schema (by codegen), eg. 1
• Typescript, eg. 1
• clear componentization and hierarchy, eg. 1 (in react-shared-components library)
• simple, short functions, components, and files (under 200 lines) that are D.R.Y. and S.R.P.
• Clean and no unnecessary comments
• Avoided Hasty Abstractions and Rule of Threes
• performant data-fetching (no unnecessary API calls)
• testable components, with minimal dependencies and allowing easy-mocking with msw
• "Smart" container vs "Dumb" component (loosely, not strictly)

👾 2023: Front-end Code Samples

Please see this "Component Guide" easily reference what components make-up what UI/UX:

React Code Samples:

• A user can make a new cart (via the NavBar > CartMenu dropdown)

• They can then edit that cart:

  • EditCartPage
    • EditCartContainer
      • EditCartTable
        • CartLineContainer
          • CartLineForm
          • LineAccountsContainer
          • DrawerContainer
          • LineAccount
          • AutoSave

• Other code samples (not React):

  • Custom incoming webhook (devops glue between Terraform Cloud and GitHub Actions)
  • Custom urql Graphcache and GlobalFetching exchanges

Table of Contents

1. ✈️ 10,000 Foot View
2. ▶️ Demo Reels
3. 🎯 Purpose
4. 🚀 Technologies Used
5. 👨🏻‍💻 Installation and Quick Start
6. 🗂 Repo Overview
7. 👩‍🔬 Testing Pyramid
8. ⛅️ CI/CD
9. 🐞 Known Issues and Future Enhancements
10. ⚙️ Helpful Commands
11. 🔋Backend Code Samples

Other Info:

• ✉️ Contact: my personal website is https://karlgolka.com/ and you can email me at contact@karlgolka.com

• 📝 License: MIT

• 🌥 Cloud Providers:

Vercel deployments	GitHub actions	Terraform Cloud dev runs	Cypress dashboard	AWS console