From Front-end to Full Stack

on YouTube ↗34m

" summary

A static Next.js demo becomes a working full stack blog by wiring up AWS Amplify for authentication and an AppSync GraphQL API backed by DynamoDB the demo runs amplify init add auth add api then amplify push configures clouds resources the app uses SSR mode and withSSRContext to avoid leaking credentials preview mode gates draft content client code uses Amplify UI components Cognito auth and generated GraphQL queries to create read update delete posts and the live demo succeeds end to end

AI-written summary · about

" chapters (16)

1. 0:00Amplify Framework intro
2. 1:47Static Next.js app start
3. 2:30Initialize Amplify
4. 3:53Amplify auth config
5. 6:41Add user auth
6. 7:47Amplify auth events
7. 8:50Login page setup
8. 10:13Test auth flow
9. 10:55Restrict preview mode
10. 14:45GraphQL API replace
11. 17:34SSR live data fetch
12. 20:40Dynamic post display
13. 23:50Edit experience
14. 27:02Mutations for changes
15. 30:34New post preview
16. 33:06Summary

" related talks

• 27mBuilding the full-stack serverless app with AWS AmplifyAleksandr Barmin · Devoxx Ukraine 2021
• 28mLive Coding on AWS AmplifyMarcia Villalba · AWS Summit Online EMEA 2020
• 30mFull Stack Development in the Era of Serverless ComputingNader Dabit · ReactiveConf 2019
• 27mTransforming GraphQL: Infrastructure as Code for Front End DevelopersNader Dabit · JSNation Live 2020
• 21mBuilding Fullstack applications on AWSRudolf Gabrielyan · JavaScript Summit Armenia 2023
• 20mEasy mode for full-stack development with Figma & AWS AmplifyArundeep Nagaraj · Conf42 JavaScript 2023
• 26mBuild, deploy, and host performant server-side appsMike Jerome · AWS Developer Innovation Day 2023
• 42mBuilding Serverless Web Applications with AWSNader Dabit · FrontEnd Con 2018