CARWORLD.LOVE
Table of Contents:
- Frontend - React SPA
- Demo (staging environment)
- Navigation
- Helpful Errors
- Backend - AWS Serverless
- System overview
- Transaction Handling
- Authentication
- CDK: Structure and Deployment
- License
Frontend: React SPA
Desktop
Mobile (collapsed and expanded nav menu)
Demo
Want to test out a purchase? All credit card info is just "42" repeated as needed.
I encourage you to test this out so you can see the emails we send for order confirmation!
Navigation
Navigation in Car World functions similarly on Mobile and Desktop! Merely click on any option to route there, and see your current location highlighted in the UI. For mobile, first tap the Car World Logo to open the menu.
Helpful Errors
Run into any issues in the app? No worries! carworld.love has some handy stylized Toasts to deliver error messages.
Backend: AWS Serverless
One of the core features of Car World is the Merch marketplace. This marketplace is handled by the Commerce Controller. There are two main flows that run through this controller:
- Initate PaymentIntent
- Handle Transaction
The nature of our integration with the Stripe API dictates these flows. In the first flow, Initate PaymentIntent, a call is made from the client to begin a transaction. The Commerce Controller initializes Stripe's transaction concept, the PaymentIntent, and returns to the client both the PaymentIntent ID as well as Stripe's Client Secret.
The above flow leads directly into the next flow; Handle Transaction. Here, the client first sends the email associated with the transaction to the Commerce Controller, which then caches it. After this the client communicates all transaction details (card, billing) directly to Stripe via the previously obtained secret. Stripe processes the payment on their end, and passes the result of the transaction to the Commerce Controller. The Commerce Controller fetches the email using the PaymentIntent ID, and records the transaction. After, the Commerce Controller sends transaction details to SES (simple email service), which emits an order confirmation email to both the user and the admins (physical store administrators).
carworld.love is not just a marketplace; it is also a community. Car World caters to it's audience by providing them the ability to make accounts, track their Digital Devotion Points (DDP), and more. The security and api operations created to support these features are handled by the Auth Controller. Key controller actions are highlighted below:
All of Car World's infrastructure is automatically generated through AWS CDK (Infrastructure as Code). The following diagram shows the file hierarchy, as it pertains to the CDK and infra.
```sh |--infra |---+ infrastructure as code | |--lambda |---+ api endpoints as lambda functions | |--infra |---+ cloudformation to build and deploy the infrastructure stored here | |--CWCore Stack |---+ CWAPIGW, Controllers (Profile, Commerce, Auth), Databases, Secret fetching | |--tests |---+ unit ``` The `cdk.json` file tells the CDK Toolkit how to execute your app. This project is set up like a standard Python project. The initialization process also creates a virtualenv within this project, stored under the `.venv` directory. To create the virtualenv it assumes that there is a `python3` (or `python` for Windows) executable in your path with access to the `venv` package. If for any reason the automatic creation of the virtualenv fails, you can create the virtualenv manually. To manually create a virtualenv on MacOS and Linux: ``` $ python3 -m venv .venv ``` After the init process completes and the virtualenv is created, you can use the following step to activate your virtualenv. ``` $ source .venv/bin/activate ``` If you are a Windows platform, you would activate the virtualenv like this: ``` % .venv\Scripts\activate.bat ``` Once the virtualenv is activated, you can install the required dependencies. ``` $ pip install -r requirements.txt ``` At this point you can now synthesize the CloudFormation template for this code. ``` $ cdk synth ``` Need to add dependencies to lambda? ``` $ mkdir zip $ zip -r zip/function.zip index.js node_modules/ package.json package-lock.json ``` To add additional dependencies, for example other CDK libraries, just add them to your `setup.py` file and rerun the `pip install -r requirements.txt` command. #### Useful commands * `cdk ls` list all stacks in the app * `cdk synth` emits the synthesized CloudFormation template * `cdk deploy` deploy this stack to your default AWS account/region * `cdk diff` compare deployed stack with current state * `cdk docs` open CDK documentation Enjoy! ## License All code contained in this repository is licensed under the GNU General Public License v3.0.