Create a Fullstack React App with AWS Amplify: Build in Just 1 Hour! 🚀

Опубликовано: 10 Сентябрь 2024
на канале: Cloud Guru

569

This tutorial will show you how to build a Question and Answer app (like a StackOverflow or Quora Clone) using the following tools:

Join WhatsApp: https://www.whatsapp.com/channel/0029...

👉Get CloudWays ➜ https://www.cloudways.com/en/?id=1365224
💥CloudWays COUPON CODE: CLOUDGURU25
☝️☝️ USE THE EXCLUSIVE COUPON CODE ABOVE TO GET 25% OFF FOR 3 MONTHS💥

👉Get Digital Ocean ➜ digitalocean.pxf.io/ZQERvQ
💥Get $200 FREE Credits for signup. So, hurry up!💥

👉Get xCloud Now! ► https://xcloud.host?fpr=cloudguru
╔═╦╗╔╦╗╔═╦═╦╦╦╦╗╔═╗
║╚╣║║║╚╣╚╣╔╣╔╣║╚╣═╣
╠╗║╚╝║║╠╗║╚╣║║║║║═╣
╚═╩══╩═╩═╩═╩╝╚╩═╩═╝

AWS Amplify is a platform that makes it easy to build and deploy apps with React, Redux, and Node.js. We'll show you how to create a simple app with React, Redux, and AWS Amplify, and deploy it to AWS in just 1 hour! After watching this video, you'll have the skills you need to create a fullstack React app with AWS Amplify in just minutes!

AWS Amplify (AWS Amplify is an online tool that lets frontend web and mobile developers easily build, ship, and host full-stack applications on AWS).
Figma to code (we will use Figma to create our components, and import them to AWS Amplify Studio)
React (the app is made with create-react-app) and we will use react-router-dom for routing

Figma template used:
https://www.figma.com/design/8A6usAPu...)

Github code:
https://github.com/abbathaw/amplify-q...

Timestamps:
0:00 intro
1:44 Build a new app
2:05 Tutorial structure
2:45 Open Amplify Studio
3:03 Build data model
4:50 Add sample data in Content Editor
5:27 UI library
6:09 Figma template
6:44 Customize Figma component
7:53 Figma plugin
9:15 Sync with Figma
10:07 Configure components with data
18:15 Create new react app
19:15 install amplify dependencies
19:58 Pull amplify
22:17 Configure index.js
24:08 Add hero layout in app.js
26:01 Add question list
26:32 Configure react-router
30:10 Add theme and Navbar
32:19 Fix question and answer page
35:20 Query single question
37:35 Show answers to the question
41:31 Display create answer form
46:16 Show answers without refreshing
54:50 Deploy app to Amplify Hosting

#awsamplify #react #reactapp #figma #cloudguru