Introduction

Now that you’ve reviewed all 8 modules of our 'front-end developer guide for building on AWS' series, you probably have a good sense of why AWS, specifically a core selection of tools and services, increases full stack velocity, and how this benefit affects end users as an application scales.

Now, let’s build something!

We’re prepared a sample app (front-end, backend) for you that utilizes the same AWS service stack mentioned in this guide. It is a Recipe App - a Next.js project that is setup to work with an AWS CDK backend. The frontend components are made with Tailwind UI, Daisy UI, and AWS Amplify UI Connected components. The application is written fully in TypeScript and connects to the backend using the AWS Amplify JavaScript libraries.
 

Getting Started Instructions

Front-End

Here's a link to the Front-End portion of the sample app.

First, run the development server:

npm run dev# or
yarn dev# or
pnpm dev

Open http://localhost:3000 with your browser to see the result.

You can start editing the page by modifying pages/index.tsx. The page auto-updates as you edit the file.

API routes can be accessed on http://localhost:3000/api/hello. This endpoint can be edited in pages/api/hello.ts.

The pages/api directory is mapped to /api/*. Files in this directory are treated as API routes instead of React pages.

This project uses next/font to automatically optimize and load Inter, a custom Google Font.
 

Back-End

Here's a link to the backend portion of the sample app.

Checkout the package.json file for additional scripts and commands.

* npm run build compile typescript to js
* npm run watch watch for changes and compile
* npm run test perform the jest unit tests
* cdk deploy deploy this stack to your default AWS account/region
* cdk diff compare deployed stack with current state
* cdk synth emits the synthesized CloudFormation template

We cannot wait to see what you build!