Fancy Shopping Cart
This is a fake app built for demo purposes with React, GraphQL, Terraform, AppSync, and other tech.Code available on GitHub
Built by Karl Golka in 2021
Technical Details
Production-Ready
Multiple environments, secure secrets management, automated testing pyramid within CICD, performance optimized, and more!
Team-Ready
Effective GIT branching and deployment strategies, actions for creating and merging PRs after tests pass, re-usable nx mono-repo libraries for easier collaboration, automatic preview branches, etc.
FE/BE Automation
CICD workflows on each feature branch commit, utilizing Vercel, Terraform Cloud, and GitHub Actions with tests running in parallel.
Serverless (IAC)
Terraform and AppSync power the back-end, including remote execution, state, and workpaces via Terraform Cloud.
Cloud Native
Utilizing Amazon's "cloud native" tech (VTL AppSync resolvers) as much as possible for performance-at-scale and no cold starts!
Scalable
Built with highly-scalable tech, including Amazon's DynamoDB and Cognito (capable of handling millions of users) on the back-end, as well as the Vercel Edge Network for the front.
Performant
The FE is built with urql, a blazing-fast GraphQL client, and opts-in to Graphcache normalized caching for added power! Lighthouse scores are in the upper-90s for Performance and Best Practices!
Robust Testing Pyramid
Tests of various granularity (UI/integration, service, & unit tests), running in-parallel across multiple machines (via GitHub Actions), using Jest, Storybook, and Cypress — with testing times reduced to a couple minutes!
UI Best Practices
Component-based development, custom design system based on Chakra-ui, a re-usable shared-components library, and stand-alone Storybooks with Cypress tests. Dark mode included as well!
I really 💚 these tools!
All of these are open-source software !
nx - mono-repo build framework
The schematics and code-generation, the one centralized package.json, idempotence and only testing, linting, & building your affected projects, the ability to easily split up my codebase into re-usable libraries used by both the FE & BE, managing all your commands in one place (workspace.json), and so much more!
urql - small, fast, & versatile GraphQL client
I enjoy working with urql's smart & normalized Graphcache. urql integrates very well with Next.js as well as GraphQL's Code Generator for auto-generated mutation hooks, type-safety across the entire stack, and comes with great devtools!