Ali Spittel
Ali Spittel
  • 35
  • 315 259
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​​​
มุมมอง: 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!
How to use Props.Children in React
มุมมอง 39K3 ปีที่แล้ว
How to use Props.Children in React
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
Getting Started with Amplify Plugins!
มุมมอง 9403 ปีที่แล้ว
Getting Started with Amplify Plugins!
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

ความคิดเห็น

  • @Billyxiao
    @Billyxiao 22 วันที่ผ่านมา

    Hi Ali, May you teach me how do i amend the background outside the Login Box to become a jpg.

  • @Ownagin
    @Ownagin หลายเดือนก่อน

    My right ear is thankful for this video

  • @user-qd2gk3oz1n
    @user-qd2gk3oz1n หลายเดือนก่อน

    It's just a my impression, or these children work like an inverted prop

  • @gsandell
    @gsandell หลายเดือนก่อน

    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?

  • @Kyrtap192
    @Kyrtap192 หลายเดือนก่อน

    You are cool, something is of with your microphone

  • @youcancallmejoker340
    @youcancallmejoker340 หลายเดือนก่อน

    You're absolutly awesome and so cute. Love your videos. Probably gonna watch this few more times because GraphQL isnt that easy

  • @tirasjeffrey2002
    @tirasjeffrey2002 หลายเดือนก่อน

    this is all i needed to grasp the basics lol

  • @samyip
    @samyip หลายเดือนก่อน

    now there is Amplify transformer v2 and all your schema code don't work. There is an easy way to migrate?

  • @anastasia.kornieva
    @anastasia.kornieva หลายเดือนก่อน

    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!

  • @Retrofire-47
    @Retrofire-47 3 หลายเดือนก่อน

    Making rainbow colors in CSS has been my greatest achievement in web development.

  • @ahmadhalak1457
    @ahmadhalak1457 3 หลายเดือนก่อน

    Thank you for the Demo! excellent video and still relevant

  • @raja_zain2k
    @raja_zain2k 4 หลายเดือนก่อน

    Great explanation! Helped Alot <3

  • @alexanderhemming6148
    @alexanderhemming6148 4 หลายเดือนก่อน

    Cus in English, this sounds like the Bobs burgers voice and is genuinely making me absorb this

  • @rajput_Vikas_1
    @rajput_Vikas_1 4 หลายเดือนก่อน

    Wow Simple Crisp Clear Straight 🔥

  • @AqibKhan-ul9yp
    @AqibKhan-ul9yp 4 หลายเดือนก่อน

    i have question can plzz where u get bundle id

  • @asif.biswas
    @asif.biswas 4 หลายเดือนก่อน

    Thank you, thank you, thank you. 😘😘😘

  • @GoogleUser-nx3wp
    @GoogleUser-nx3wp 5 หลายเดือนก่อน

    kindly provide source code whenever you provide these small concepts it hurts to make a whole project just to run this small code

  • @g.alarcon9011
    @g.alarcon9011 5 หลายเดือนก่อน

    This video was so helpful! Thank you!

  • @mosokosmo5687
    @mosokosmo5687 5 หลายเดือนก่อน

    Most useful video in TH-cam thanks so much!

  • @yarapolana
    @yarapolana 5 หลายเดือนก่อน

    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

  • @user-ub8yn3kc6e
    @user-ub8yn3kc6e 5 หลายเดือนก่อน

    고마워요

  • @magnusrosell9944
    @magnusrosell9944 6 หลายเดือนก่อน

    Thanks, nice video. What if I already have Google Identity Services Login and want to start using Stripe for subscritions?

  • @siosaiafonua9286
    @siosaiafonua9286 6 หลายเดือนก่อน

    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

  • @mazdysoraya6121
    @mazdysoraya6121 6 หลายเดือนก่อน

    Reusability of the component nice and easily explained.

  • @danieltermann1983
    @danieltermann1983 6 หลายเดือนก่อน

    Amazing!!

  • @Munk-tt6tz
    @Munk-tt6tz 6 หลายเดือนก่อน

    Best video on this topic, thank you!

  • @Amitkumar-cj2wp
    @Amitkumar-cj2wp 6 หลายเดือนก่อน

    your voice is so sweet

  • @VinayTandale
    @VinayTandale 7 หลายเดือนก่อน

    Easy simple thanks 👍👍👍👍👍👍

  • @cortxk6508
    @cortxk6508 8 หลายเดือนก่อน

    thank you! I had to import amplify differently import {Amplify} from 'aws-amplify' works as a charmeleon

  • @jonnyhako
    @jonnyhako 8 หลายเดือนก่อน

    Thanks. Just wish it was a bit slower, it's been cut and edited to speed up.

  • @user-zw6ue1pf9z
    @user-zw6ue1pf9z 8 หลายเดือนก่อน

    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.

  • @syedmraza99
    @syedmraza99 9 หลายเดือนก่อน

    api routes give error 500 wtf do i do D:

  • @ThePsychicGamer1
    @ThePsychicGamer1 9 หลายเดือนก่อน

    Just found your page, we just started our CSS module and this was great for understanding color. Appreciate the video.

  • @NZTechArc
    @NZTechArc 9 หลายเดือนก่อน

    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.

  • @NZTechArc
    @NZTechArc 9 หลายเดือนก่อน

    PullData would not be a POST

  • @NZTechArc
    @NZTechArc 9 หลายเดือนก่อน

    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.

  • @NZTechArc
    @NZTechArc 9 หลายเดือนก่อน

    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)

  • @TwoTechnicGamers
    @TwoTechnicGamers 10 หลายเดือนก่อน

    Amplify as a default export is depreacted, import { Amplify } from 'aws-amplify' us this instead, caused me so much headache

  • @mitotv6376
    @mitotv6376 10 หลายเดือนก่อน

    Nice

  • @mitotv6376
    @mitotv6376 10 หลายเดือนก่อน

    Very nice

  • @navjotsingh2457
    @navjotsingh2457 10 หลายเดือนก่อน

    tysm

  • @SnowdenFu-jh6bx
    @SnowdenFu-jh6bx 10 หลายเดือนก่อน

    why i create from scrach like you got a 404 error, is your repo root dir of project?

  • @user-zb4ev2mq4j
    @user-zb4ev2mq4j 11 หลายเดือนก่อน

    clear, simple video, good job

  • @Pareshbpatel
    @Pareshbpatel 11 หลายเดือนก่อน

    Short , succint explaination of props.children in React. Thanks. {2023-07-05}

  • @PawelMisiura
    @PawelMisiura 11 หลายเดือนก่อน

    Thanks for this Ali, second time im watching this to add Aws Auth to my project. Great video!

  • @NZTechArc
    @NZTechArc 11 หลายเดือนก่อน

    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.

  • @masonmilkins273
    @masonmilkins273 11 หลายเดือนก่อน

    what workbench theme is this

  • @TastyGrub
    @TastyGrub 11 หลายเดือนก่อน

    Awesome work!🎉 Not too many tutorials for amplify studio out there. Please keep making these! Thanks

  • @yangdongjun
    @yangdongjun ปีที่แล้ว

    server side rendering also support?

  • @PeriklesPeriklesoglu
    @PeriklesPeriklesoglu ปีที่แล้ว

    thank you