Build App & Website on Single Code Base: React Native & AWS

Set up the react native environment on windows by installing chocolatey, node.js long term support, and openjdk 11, then verify installations.

Learn to install Android Studio, configure the Android SDK and virtual devices, and set the Android home environment variable for React Native development.

Test your app on a real Android device or an emulator using visor to mirror the device screen to your computer, including downloading and running visor and enabling USB debugging.

Install Expo CLI and set up an Expo project to build a React Native app, then sign up for an AWS account and configure the console for Amplify setup.

Install AWS and Amplify CLI to connect the front end with a scalable backend, configuring backend services and data storage for your app, using Visual Studio Code.

Configure Amplify and create an IAM user to enable AWS access for your project, then copy access keys, set up a local profile, and prepare editor settings.

Set up a React Native project folder with source, screens, navigation, and components using Expo; initialize Git and push to GitHub.

Explore the basics of React Native by building a UI with core components, view, text, image, scroll view, and text input, and learn flexbox layouts, styles, and status bar handling.

Build a stylish post component in a single React Native codebase, applying color schemes, padding, shadow, and safely handling iOS and Android safe areas with responsive layout.

Create a header component for a React Native app, featuring a search input, location and category options, and Expo vector icons, all styled with flexbox for a clean, responsive layout.

Refine the home page design by standardizing the white background, updating icons and margins, and introducing a colors module for dynamic primary and secondary colors across the app.

Explore how to implement navigation in a React Native app using React Navigation, including setting up a navigation container, creating a stack navigator, and routing between home and details screens.

Set up react navigation with gesture handler and safe area context, hide headers, enable bottom tab navigation with background colors, and navigate to post details on press.

Design and customize a React Native bottom tab navigator, applying container background colors, active tab highlighting, and global tab bar options to enhance navigation and UI consistency.

Enable sign up and sign in with AWS Amplify authentication in a React Native app, configure backend and dependencies, and protect the listing screen with an authenticator flow.

Learn to implement sign up and sign in with AWS Cognito user pools and federated identities using Amplify, including confirmation codes and retrieving current authenticated user data.

Create a listing screen in React Native by integrating icons, image upload, category and location inputs, and polished styles, with future steps to add icons and max five photo uploads.

Add an icon to the listing input with vector icons. Align text and icon with spacing for title and value, and apply dynamic color.

Develop multi-image upload on the listing screen using an asset selector, navigate to a select photo screen, and return images on finish with React Native navigation and hook-driven flow.

Complete the image upload flow by passing uploaded images to the listing screen via navigation and retrieving them with useRoute, then display them in a horizontal ScrollView.

Create a category select screen in a React Native app, load categories with useState, render a scrollable list, and navigate to listing with category id and name.

Create a location screen in a React Native app, load location data into listing page, pass location id and name via navigation, and capture title and description with multi-line inputs.

Install and configure a GraphQL API with AWS AppSync using amplify, and push a listing schema to DynamoDB. Enable IAM public access and Cognito user pool for registered users.

Explore database integration with AppSync and DynamoDB. Authenticate users via user pools and perform create, read, update, and delete operations.

Explore processing image data from an input field and storing it in aws, using s3 for image storage and dynamodb for metadata, with uuid-based file naming.

Learn how to store media in an S3 bucket with Amplify storage, save image links in DynamoDB, and configure access for authenticated and guest users.

Store listing data in DynamoDB by iterating images and posting create listing mutation with title, category name and id, description, images, location id, and user id via Amplify.

Post listings to DynamoDB via AppSync and GraphQL in React Native, with category, location, title, and description under user pools authorization. Manage processing state, show success alerts, and navigate home.

Fetch all posts from DynamoDB into the homepage by implementing an async fetch function with try/catch, using GraphQL queries and a useEffect hook.

Solve AWS issues by downgrading GraphQL transformer from version two to version one in Amplify, push changes, verify app synchronization, and render listings with flat list in React Native.

Display posts on the home page with a flat list in React Native, fetch from database, pass data via props, and plan on-the-fly image resizing with AWS S3.

Deploy a serverless image resizer using a cloud formation template to create a stack. Resize images from Dynamo DB and deliver via an S3 bucket, then display in posts.

Learn how to pass post data from home to post details with React Navigation, access route params, and display post images in a horizontal scroll with the post title.

Display the post owner in a React Native and AWS app by storing the owner email and id, updating the GraphQL mutations, and rendering an ownership badge in the details.

Implement post details with three price items for daily, weekly, and monthly rates, duplicating text components and calculating weekly and monthly values.

Create a responsive website by reusing the Android app code in React Native, using window dimensions and platform checks to conditionally render headers and bottom tabs.

Design a website header by dividing it into left and right sections, adding a logo, search by text and location, and a property listing menu, all with flex layout.

Create a responsive header with add property and menu button in a React Native app, style colors, and build a category view with a flat list for desktop and mobile.

Learn to build a mobile menu UI in React Native by implementing a responsive, absolutely positioned menu, dynamic visibility for Android and iOS, with icons, shadows, and navigation.

Create responsive menu functionality by toggling a header menu with controlled state, passing props between home and header components, and using conditional rendering for desktop and mobile.