Scalable Cloud-native Product Development with Serverless, DynamoDB, GraphQL, React, and More

We discuss the overview of the MFS401 course. We also talk about the principles for lean product development and the tech stack used in the course.

As part of the MFS401 course, we develop a large, hands-on project called SweetumsCenter. We discuss the product specifications as well as the development process we follow.

In this lesson, we set up the development environments, including the editor, showcasing minimal Git commands.

We introduce type systems and why they matter. We also discuss type inferences, and then how to install TypeScript to a project.

We discuss the core types in TypeScript. We also discuss how to handle unknown types with any and unknown. We then discuss structural typing and generics.

We introduce React — one of the most in-demand frontend frameworks. We also peek under the hood and discuss how React works with virtual DOMs. Then, we discuss how to set up Create React App.

We provide an opinionated view on how to structure a React project in a codebase.

We introduce functional components — the modern way to build React apps.

We describe different ways to style React applications. We provide an opinionated recommendation for styling mid-sized React apps.

We introduce modern React principles, starting with React hooks and side effects.

We define the two most important rules for React hooks.

In this lesson, we describe — with examples — how to define custom hooks.

For sharing states across components, the Context API is key in React. We detail how to implement context with unstated-next, a lightweight library.

We introduce GraphQL — a modern take on building APIs. We also discuss why GraphQL can be appropriate for a project.

Schema and resolvers are at the heart of GraphQL development. We describe how to define typed schema and resolvers in a GraphQL API.

We introduce Serverless — a new paradigm of computing with function-as-a-service.

In this lesson, we take a slight detour going deep into a vital subject in JavaScript: asynchronous programming. We detail how the event loop works with JavaScript and Node.js runtime.

We introduce AWS Lambda, arguably the most popular managed service for deploying Serverless functions. We describe how to create a Lambda, the anatomy of a Lambda function, and some core concepts of Lambda.

In this lesson, we introduce the Serverless Framework, a popular tool facilitating deploying Serverless functions a breeze.

TThe Serverless Framework enables infrastructure-as-code — the serverless.yml file is at the heart of it. We describe how to read and structure a serverless.yml file.

The Serverless paradigm and GraphQL play nice together. In this lesson, we describe how to build a GraphQL API with the Serverless framework.

We discuss pagination in API development, focusing on cursor-based pagination. Then, we discuss how to implmenent pagination with GraphQL.

In this lesson, we discuss semantic versioning for APIs. We also discuss how GraphQL APIs can be versionless and yet support use cases for version control.

Queuing is a crucial tool in cloud development. In this lesson, we discuss how to design, develop, and deploy queues with Amazon Simple Queue Service (SQS).

In this lesson, we describe how NoSQL is different and useful for hyper-scalable and user-facing applications.

As a prime example of a managed, NoSQL database, we introduce Amazon DynamoDB.

We start with the core concepts of DynamoDB as a database.

The AWS SDK can be used as a tool to interact with a DynamoDB database within JavaScript.

To model data in DynamoDB, a crucial design philosophy is called access patterns-first design. We discuss how we can use a single table and carefully orchestrated access pattern implementations to model complex data relationships in DynamoDB.

We discuss two key operators in DynamoDB — begins_with and between.

DynamoDB allows different ways to sort data lexiographically. We discuss how to leverage them for different use cases.

DynamoDB has a hard limit for the size of returned data. We discuss the pagination mechanism for the query results in DynamoDB.

Like other NoSQL databases, optimizing storage is important in DynamoDB. We discuss a key trick for achieving optimal storage utilization from early on in the design and development.

We detail what role authorization and authentication play in application development.

In this lesson, we discuss different strategies for authorization and authentication, including session-based and token-based authN/Z. We then discuss how to implement token-based authN/Z.

We start with why performance matters, the key metrics to watch out for, and the performance tools to use for profiling performance.

We discuss how to profile performance for React apps with the React Developer Tools.

We start with introducing the development process for SweetumsCenter — the hands-on project we build as part of the MFS401 course.

In this lesson, we design the low-fidelity prototype for all screens in the SweetumsCenter application.

We design the GraphQL API for the SweetumsCenter backend. Note that we use dummy content for the API.

In this lesson, we define the data model for the SweetumsCenter application.

We start setting up for the SweetumsCenter backend with Create React App and SASS. We set up the basic routs for the application. In next lessons, we implement each route one by one.

We implement the machines route for the SweetumsCenter application.

We implement the individual machine route for the SweetumsCenter application.

We implement the products route for the SweetumsCenter application.

We implement the individual product route for the SweetumsCenter application.

We implement the cities route for the SweetumsCenter application.

We implement the individual city route for the SweetumsCenter application.

We implement the individual zone route for the SweetumsCenter application.

We start implementing the SweetumsCenter backend by initiating the project and then setting up the Serverless Framework, and GraphQL server.

We implement the corresponding queries and mutations designed for the machines component. Note that this is implemented with dummy data.

We implement the custom scalars needed for the backend, starting with a custom DateTime implementation in the GraphQL schema.

We implement the corresponding queries and mutations designed for the products component. Note that this is implemented with dummy data.

We implement the corresponding queries and mutations designed for the cities component. Note that this is implemented with dummy data.

We implement the corresponding queries and mutations designed for the zones component. Note that this is implemented with dummy data.

In this lesson, we connect the frontend with the backend that we developed in the last two chapters. We use urql as the GraphQL client.

We use Amazon Cognito for user management and securing the SweetumsCenter application.

We now set up the Serverless Framework with details of the DynamoDB table and add some dummy data to test the whole flow.

In this lesson, we implement the database access patterns designed earlier for the machines component.

In this lesson, we implement the database access patterns designed earlier for the products component.

In this lesson, we implement the database access patterns designed earlier for the cities and zones components.

We set up the development stages for the SweetumsCenter application and gear towards Quality Assurance (QA) and testing.

In this lesson, we go through how to do thorough Quality Assurance (QA) tests for the GraphQL API backend for the SweetumsCenter.

We start with the basic usage assumptions for the cost analysis of the entire SweetumsCenter product.