- 35
- 315 259
Ali Spittel
United States
เข้าร่วมเมื่อ 26 ส.ค. 2020
Teaches people to code. Senior Developer Advocate @ AWS Amplify. She/her.
Generate Forms in React | Build a Friendsgiving app with AWS Amplify Studio
Hate writing React forms by hand every time? Try out the AWS Amplify form builder! Generate a form for your data, add a UI theme to your app, and more!
Disclaimer: I work on the product team building Amplify - I would always love to hear your feedback as you build with AWS!
👩🏼💻 Links Mentioned 👩🏼💻
AWS Console - console.aws.amazon.com
Docs - docs.amplify.aws/
🌸 My Links 🌸
Blog - welearncode.com
Twitter - aspittel
Twitch - www.twitch.tv/aspittel
Portfolio - alispit.tel
Disclaimer: I work on the product team building Amplify - I would always love to hear your feedback as you build with AWS!
👩🏼💻 Links Mentioned 👩🏼💻
AWS Console - console.aws.amazon.com
Docs - docs.amplify.aws/
🌸 My Links 🌸
Blog - welearncode.com
Twitter - aspittel
Twitch - www.twitch.tv/aspittel
Portfolio - alispit.tel
มุมมอง: 3 866
วีดีโอ
Deploy a Next.js 13 App on AWS Amplify
มุมมอง 18Kปีที่แล้ว
In this tutorial, we'll deploy a Next.js 13 app on AWS using Amplify Hosting. This method will work for SSR and ISR Next.js apps, and can be easily modified for a SSG app. Note: I work on the team building AWS Amplify if you have any feedback about the product, please leave a comment below and I'll forward along to the rest of the team! 👩🏼💻 Links Mentioned 👩🏼💻 Docs - docs.aws.amazon.com/ampli...
Build a Fullstack Next.js App with AWS Amplify Studio | Figma to Code
มุมมอง 6Kปีที่แล้ว
In this tutorial, we'll build a multi-page recipe app with data storage, authentication, and Figma to UI code generation using Next.js and AWS Amplify Studio. We'll also make the site responsive and display nested data with component slots. Note: I work on the team building AWS Amplify if you have any feedback about the product, please leave a comment below and I'll forward along to the rest of...
What is AWS Amplify Studio?
มุมมอง 1.5K2 ปีที่แล้ว
AWS Amplify Studio is an exciting new part of the AWS Amplify set of tools. - Speed up development speed by implementing CRUD actions in clicks, including list views with pagination, search, and filtering - Generate human-readable React components which are similar to what a developer would write and can be extended with code - Simplify the designer/developer handoff by generating the designer'...
Create a Fullstack Map Application on AWS in 10 Steps | Amplify Studio
มุมมอง 3.2K2 ปีที่แล้ว
In this tutorial we'll build out a map application with AWS Amplify Studio, Amplify Geo, Amazon Location Service, and Figma. You'll have interactive components, popups to display data, a map you can zoom in on, and more! Note: I work on the team building AWS Amplify if you have any feedback about the product, please leave a comment below and I'll forward along to the rest of the team! [0:41] Cr...
Create a Social Media Timeline App with Amplify Studio | Figma to React
มุมมอง 4.2K2 ปีที่แล้ว
Build a Twitter-like timeline with AWS Amplify. You'll build an Amazon DynamoDB-backed data model, design in Figma, connect your data to your Figma components, and then export to React code that's extensible and human-readable. Then write React logic to tie it all together! 👩🏼💻 Links Mentioned 👩🏼💻 Blog Post Version of this tutorial - dev.to/aspittel/build-a-social-media-timeline-with-amplify-...
Figma to React to the Cloud: Build a Fullstack App with AWS Amplify Studio
มุมมอง 17K2 ปีที่แล้ว
Use AWS Amplify Studio to generate React code from Figma components which are fully cloud-connected. We'll build a blog app in this tutorial! 👩🏼💻 Links Mentioned 👩🏼💻 Blog Post Version of this tutorial - acloudguru.com/blog/engineering/how-to-create-a-full-stack-app-with-aws-amplify-studio Amplify UI Docs - ui.docs.amplify.aws/ Amplify Console - console.aws.amazon.com/amplify 🌸 My Links 🌸 Blog...
Create a React Authentication Flow with AWS Amplify
มุมมอง 17K2 ปีที่แล้ว
Create a customizable backend and frontend authentication flow with the brand new AWS Amplify Authenticator components. These are launched for Vue, Angular, and React, but in this video we'll use the React components to add sign in, sign out, and display user information. We'll also add a theme and show how to even further customize the information shown to your customers. 👩🏼💻 Links Mentioned ...
Introducing AWS Amplify Studio
มุมมอง 11K2 ปีที่แล้ว
I'm so excited to introduce Amplify Studio! Create components in Figma, then generate them to React code that can be connected to AWS Cloud-backed components. I work on the product team for Amplify, so if you have any feedback on this feature, I'd love to hear it. 👩🏼💻 Links Mentioned 👩🏼💻 Amplify UI Docs - ui.docs.amplify.aws/ Amplify Sandbox - sandbox.amplifyapp.com/ 🌸 My Links 🌸 Blog - welea...
A Beginner's Guide to GraphQL | Build an API using AWS Amplify and AppSync
มุมมอง 22K2 ปีที่แล้ว
What is GraphQL? Why would you use it? Why wouldn't you use it? How do you create an API and query with it in GraphQL? Learn all that and much more in this tutorial. I work as a Developer Advocate for AWS Amplify, please let me know if you have any feedback for us, and join our Discord: discord.gg/amplify to ask questions! 👩🏼💻 Links Mentioned 👩🏼💻 APIs - www.freecodecamp.org/news/what-is-an-ap...
Build a Serverless Subscription Site with Stripe
มุมมอง 10K2 ปีที่แล้ว
How do you create a web app that accepts payments? Better yet, how do you create a site that has paywalled content that users gain access to only when they pay a subscription fee? In this video, we'll build a Serverless Node.js and React app that first uses Stripe to process checkout, then it triggers an account be created. The user gets an email with their brand new account information, which ...
How to Add Sign in with Apple to your React app!
มุมมอง 15K2 ปีที่แล้ว
Use React and AWS Amplify to add SIWA to your app! You'll create an Apple Developer account, then add authentication to your application both in your app and in the cloud. 👩🏼💻 Links Mentioned 👩🏼💻 Blog post version of this tutorial - welearncode.com/siwa/ Feature Announcement - aws.amazon.com/blogs/mobile/enable-sign-in-with-apple-on-your-app-with-aws-amplify/ AWS Amplify Admin UI Tutorial - t...
Authorization and Authentication in React
มุมมอง 6K2 ปีที่แล้ว
In this tutorial, we'll implement authorization and authentication in React using the AWS Amplify Admin UI. We'll build a Medium-style blog that has different permissions for different types of users, including admins and content owners. We'll add auth on both the front and backend of the site. 👩🏼💻 Links Mentioned 👩🏼💻 Blog Post Version of this tutorial - welearncode.com/auth-react/ React Tuto...
How to Host a Next.js App on AWS
มุมมอง 31K2 ปีที่แล้ว
Deploy both a server-side rendered and static site generated Next.js app to AWS using Amplify Hosting! 👩🏼💻 Links Mentioned 👩🏼💻 Blog Post Version of this tutorial - welearncode.com/deploy-nextjs-amplify/ Next.js Tutorial - welearncode.com/beginners-guide-nextjs/ Repo - github.com/aspittel/color-pages 🌸 My Links 🌸 Blog - welearncode.com Twitter - aspittel Twitch - www.twitch....
Create a Fullstack Next.js App on AWS | Amplify Storage, Auth, Hosting, and Data
มุมมอง 9K2 ปีที่แล้ว
Next.js is an awesome framework for creating server-side rendered and static site generated apps. In this video, we'll create a fullstack National Park explorer app with Authentication, Storage, a GraphQL API, and then host the server-side rendered app on AWS. 👩🏼💻 Links Mentioned 👩🏼💻 Blog Post Version of this tutorial - welearncode.com/build-a-fullstack-app-nextjs/ Next.js Tutorial - th-cam.c...
3 Ways to Create Rainbow Text with CSS! Gradients, Colored Letters, and Text Shadows
มุมมอง 3.3K3 ปีที่แล้ว
3 Ways to Create Rainbow Text with CSS! Gradients, Colored Letters, and Text Shadows
Software Engineering Productivity Tips! Tour my setup
มุมมอง 2K3 ปีที่แล้ว
Software Engineering Productivity Tips! Tour my setup
A Beginner's Guide to Next.js | Build a SSG Site with React
มุมมอง 10K3 ปีที่แล้ว
A Beginner's Guide to Next.js | Build a SSG Site with React
How to Create Multiple Files in One Command with Bash!
มุมมอง 10K3 ปีที่แล้ว
How to Create Multiple Files in One Command with Bash!
Create an Offline Web Form with AWS Amplify DataStore
มุมมอง 2K3 ปีที่แล้ว
Create an Offline Web Form with AWS Amplify DataStore
Create a Serverless Python API | AWS Amplify, AWS Lambda, Flask, and Amazon DynamoDB
มุมมอง 17K3 ปีที่แล้ว
Create a Serverless Python API | AWS Amplify, AWS Lambda, Flask, and Amazon DynamoDB
Rebuild Instagram with React! | End to End AWS Amplify Admin UI Tutorial
มุมมอง 3.7K3 ปีที่แล้ว
Rebuild Instagram with React! | End to End AWS Amplify Admin UI Tutorial
Build a Music Sharing App with Amazon S3 and AWS Amplify
มุมมอง 4.9K3 ปีที่แล้ว
Build a Music Sharing App with Amazon S3 and AWS Amplify
Tour my VS Code Setup | My favorite extensions, themes, and shortcuts
มุมมอง 2.6K3 ปีที่แล้ว
Tour my VS Code Setup | My favorite extensions, themes, and shortcuts
Introducing the AWS Amplify Admin UI: Create an Application Backend in Clicks
มุมมอง 12K3 ปีที่แล้ว
Introducing the AWS Amplify Admin UI: Create an Application Backend in Clicks
How I Became a Software Engineer | Quitting College Computer Science
มุมมอง 4K3 ปีที่แล้ว
How I Became a Software Engineer | Quitting College Computer Science
Building a Fullstack GraphQL and JavaScript App: Getting Started with AWS Amplify
มุมมอง 4K3 ปีที่แล้ว
Building a Fullstack GraphQL and JavaScript App: Getting Started with AWS Amplify
The Career Advice I Wish I Had | Job Searching for Software Engineers
มุมมอง 1.9K3 ปีที่แล้ว
The Career Advice I Wish I Had | Job Searching for Software Engineers
Hi Ali, May you teach me how do i amend the background outside the Login Box to become a jpg.
My right ear is thankful for this video
It's just a my impression, or these children work like an inverted prop
There seems to be something missing, as I get this output when I run amplify init: Deploying root stack nationalparks [ ==========------------------------------ ] 1/4 amplify-nationalparks-dev-cbe… AWS::CloudFormation::Stack ROLLBACK_COMPLETE Mon Apr 29 20 DeploymentBucket AWS::S3::Bucket CREATE_FAILED Mon Apr 29 20 UnauthRole AWS::IAM::Role CREATE_FAILED Mon Apr 29 20 AuthRole AWS::IAM::Role CREATE_FAILED Mon Apr 29 20 Perhaps the AWS profile you used had some roles you didn't cover?
You are cool, something is of with your microphone
You're absolutly awesome and so cute. Love your videos. Probably gonna watch this few more times because GraphQL isnt that easy
this is all i needed to grasp the basics lol
now there is Amplify transformer v2 and all your schema code don't work. There is an easy way to migrate?
Hi 👋🏻 could you please advise if you are familiar with building amplify ready components in figma? I need help with styling these components and can’t find any information on the internet for my specific issue. Thanks!
Making rainbow colors in CSS has been my greatest achievement in web development.
Thank you for the Demo! excellent video and still relevant
Great explanation! Helped Alot <3
Cus in English, this sounds like the Bobs burgers voice and is genuinely making me absorb this
Wow Simple Crisp Clear Straight 🔥
i have question can plzz where u get bundle id
Thank you, thank you, thank you. 😘😘😘
kindly provide source code whenever you provide these small concepts it hurts to make a whole project just to run this small code
This video was so helpful! Thank you!
Most useful video in TH-cam thanks so much!
I'm sorry what?!!! this website is super fancy !!!! =) But seriously I prefer the simplicity, it makes the tutorial easier to digest and you delivered flawlessly! Thanks
고마워요
Thanks, nice video. What if I already have Google Identity Services Login and want to start using Stripe for subscritions?
this seems like it's good for static sites only. Seems like I would run into runtime and resource limitation issues for a full stack Nextjs crud app
Reusability of the component nice and easily explained.
Amazing!!
Best video on this topic, thank you!
your voice is so sweet
Easy simple thanks 👍👍👍👍👍👍
thank you! I had to import amplify differently import {Amplify} from 'aws-amplify' works as a charmeleon
Thanks. Just wish it was a bit slower, it's been cut and edited to speed up.
Kind of lost. I ran amplify pull on my project but none of my models loaded nor did any of my graphql to call the models.
api routes give error 500 wtf do i do D:
Just found your page, we just started our CSS module and this was great for understanding color. Appreciate the video.
At the 3 quarter mark do not worry, Ali will tell you that what she has built is not the best way, and she provides a better approach, so don't drop off too early.
PullData would not be a POST
The schema.graphql syntax and setup now seems to be out of date. I create my Data Model in Amplify Studio and then pul it into VSCode with Amplify Pull.
My VSCode does not have the colour scheme yours has (i have just white text) what extension do you use? (My JS and others are fine)
Amplify as a default export is depreacted, import { Amplify } from 'aws-amplify' us this instead, caused me so much headache
Nice
Very nice
tysm
why i create from scrach like you got a 404 error, is your repo root dir of project?
clear, simple video, good job
Short , succint explaination of props.children in React. Thanks. {2023-07-05}
Thanks for this Ali, second time im watching this to add Aws Auth to my project. Great video!
Hi, What's an authenticated User when setting up storage. is it cognito auth'd user, because that too seems like a security risk. So I wonder what this amplify storage command does in the background.
what workbench theme is this
Awesome work!🎉 Not too many tutorials for amplify studio out there. Please keep making these! Thanks
server side rendering also support?
thank you