Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/panacloud/bootcamp-2020
Learn to Build Modern Full Stack Serverless Multi-Tenant SaaS Apps and APIs
https://github.com/panacloud/bootcamp-2020
aws aws-lambda cdk gatsbyjs graphql netlify react redux serverless-apps serverless-saas storybook
Last synced: 11 days ago
JSON representation
Learn to Build Modern Full Stack Serverless Multi-Tenant SaaS Apps and APIs
- Host: GitHub
- URL: https://github.com/panacloud/bootcamp-2020
- Owner: panacloud
- Created: 2020-06-03T07:49:30.000Z (about 4 years ago)
- Default Branch: master
- Last Pushed: 2022-03-29T08:42:12.000Z (about 2 years ago)
- Last Synced: 2024-02-27T18:36:06.973Z (4 months ago)
- Topics: aws, aws-lambda, cdk, gatsbyjs, graphql, netlify, react, redux, serverless-apps, serverless-saas, storybook
- Homepage:
- Size: 2.07 MB
- Stars: 480
- Watchers: 87
- Forks: 182
- Open Issues: 82
-
Metadata Files:
- Readme: README.md
Lists
- awesome-stars - bootcamp-2020 - Tenant SaaS Apps and APIs | panacloud | 483 | (Others)
- my-awesome-stars - panacloud/bootcamp-2020 - Learn to Build Modern Full Stack Serverless Multi-Tenant SaaS Apps and APIs (Others)
README
# Bootcamp 2020: Learn to Build Modern Full Stack Serverless Multi-Tenant SaaS Apps and APIs in Baby Steps and Build Your SaaS Startup
We will teach you online to Build Modern Full Stack Serverless Mobile Web Apps and Websites including e-commerce apps using React, Gatsby.js, Redux, GraphQL, RESTful OpenAPI, Serverless, AWS Lambda Functions, AWS Lambda Containers, AWS Aruora Serverless, AWS Neptune, AWS EventBridge, MongoDB, FaunaDB, Git, GitHub, GitHub Actions, Netlify, Contentful, Stripe, SnipCart, Shopify, etc.
We have to understand humanity is facing a COVID-19 induced global economic recession and only the high-tech and software companies have grown and their stock prices and business have risen in this environment. We need to immediately get ready to face the upcoming economic crises boldly.
[Pakistan Digital Gig Economy Surged 69% Amid COVID19 Pandemic](http://www.pakalumni.com/m/blogpost?id=1119293%3ABlogPost%3A312758)
Difference Between Bootcamp 2020 and Bootcamp 2021
The objective of Bootcamp 2020 is to train developers to develop cloud based SaaS Apps and general serverless APIs for these apps. It includes developing graphic user interfaces (GUIs) development using React, Gatsby, and React Native.
[Bootcamp 2020](https://panacloud.github.io/bootcamp-2020/)
The objective of Bootcamp 2021 to to train developers to develop cloud based AI and IoT powered serverless APIs. We will not cover graphic user interfaces (GUIs) in Bootcamp 2021 but only voice based conversational interfaces. A conversational interface (CUI) is a user interface for computers that emulates a conversation with a real human. The course of this bootcamp is designed in such a way that Bootcamp 2020 is not a prerequisite to Bootcamp 2021.
[Bootcamp 2021](https://panacloud.github.io/bootcamp-2021/)
The recording of Bootcamp 2021 will start after the recording of Bootcamp 2020 is complete. After the recording in Bootcamp 2020 is complete, it does not mean that the Bootcamp is closed. Admissions and project acceptance will remain open in both the Bootcamps at atleast till December 2023. We are also developing a platform for developers which will adopt both these bootcamps. Our upcoming Operation Unicorn Startups will also require participations in these bootcamps.
[Cloud’s trillion-dollar prize is up for grabs](https://www.mckinsey.com/business-functions/mckinsey-digital/our-insights/clouds-trillion-dollar-prize-is-up-for-grabs)
The objective of both Bootcamp 2020 and Bootcamp 2021 is to train people to go after this prize.
How many of these questions can you answer?
Note: Bootcamp 2020 and 2021 cover these topics.
Questions a Modern Application and API Developer must be able to answer:
1. What is Cloud Computing?
2. What is Serverless?
3. What is SaaS and Serverless SaaS?
4. What is Event-Driven Architecture?
5. What are APIs?
6. What are RESTful OpenAPIs?
7. What are GraphQL APIs?
8. What is IaC and Cloud Development Kit (CDK)?
9. What is Typescript and why do use it as our default web programming language?
10. What is Node.js?
11. What is Web Assembly?
12. What are Lambda Functions?
13. What are Containers?
14. What are Relational Databases and SQL?
15. What is AWS Aurora Serverless?
16. What are Graph Databases and Gremlin?
17. What is AWS Neptune and Azure Cosmos DB?
18. Why do we now advise developers to use Relational or Graph Databases for developing their APIs?
19. What is an AWS Event Bridge?
20. What is real-time data streaming? e.g. Kinesis and Kafka
21. What is Edge Computing?
22. What is AWS Greengrass and Azure IoT Edge?
23. What is FreeRTOS?
24. What is Rust and what is it best used for?
25. What is AI as a Service (AIaaS)?
26. What is Tensorflow and why do we prefer Python for AI development?
27. What is Amazon SageMaker?
28. What is Amazon Neptune Machine Learning?
29. What is Amazon Aurora Machine Learning?
30. What are Smart Contracts?
31. What is Ethereum 2.0?
32. What is Ewasm?
33. What is Diem?
Overview of the concepts by the Students:
[Modern Full Stack Serverless Multi-Tenant SaaS Apps and APIs Presentation by Hamza Farooq in Urdu](https://www.facebook.com/hamza.farooq.923519/videos/1048319272275012)
# Table of Contents
1. [Introduction to English and Urdu Sections](#introduction-to-english-and-urdu-sections)
2. [Prerequisites](#prerequisites-html-css-and-javascript)
3. [Part I: Front-End Fundamentals with React](#part-i-front-end-fundamentals-with-react)
4. [Class 1: Development Setup](#class-1-development-setup)
5. [Class 2: Starting React](#class-2-starting-react)
6. [Class 3 and 4: Learn React](#class-3-and-4--learn-react)
7. [Class 5 and 6: Hooks](#class-5-and-6-hooks)
* [Bootcamp 2020 Project 1: Build an Expense Tracker App using React Hooks and Context API](#bootcamp-2020-project-1-build-an-expense-tracker-app-using-react-hooks-and-context-api)
8. [Class 7: Asynchronous JavaScript](#class-7-asynchronous-javascript)
9. [Class 8: Fetch Data](#class-8-fetch-data)
10. [Class 9 and 10: Material UI](#class-9-and-10--material-ui)
* [Bootcamp 2020 Project 2: COVID-19 Tracker App](#bootcamp-2020-project-2--covid-19-tracker-app)
11. [Class 11 React Router v6](#class-11-react-router-v6)
* [Bootcamp 2020 Project 3: Shoe Store](#bootcamp-2020-project-3-shoe-store)
12. [Class 12 Web Animations API](#class-12-web-animations-api)
13. [Class 13 Web Animations API with React](#class-13-web-animations-api-with-react)
* [Bootcamp 2020 Project 4A: Red Queen's Race with Web Animation API and React Hooks](#bootcamp-2020-project-4a--red-queen-s-race-with-web-animation-api-and-react-hooks)
* [Bootcamp 2020 Project 4B: Develop Tiny Short Animation with React Hooks](#bootcamp-2020-project-4b-develop-tiny-short-animation-with-react-hooks)
* [Bootcamp 2020 Bonus/Extra Project 5: Build an Animated React Website which follows the Latest Trends like Animated Illustrations](#bootcamp-2020-bonus-extra-project-5-build-an-animated-react-website-which-follows-the-latest-trends-like-animated-illustrations)
14. [Part II: Programming with TypeScript](#part-ii-programming-with-typescript)
* [Bootcamp 2020 Project 6: Quiz App with React and TypeScript](#bootcamp-2020-project-6--quiz-app-with-react-and-typescript)
15. [Part III: Progressive Web Apps (PWA)](#part-iii-progressive-web-apps-pwa)
16. [Class 17 Progressive Web Apps (PWA) and Offline Availability](#class-17-progressive-web-apps-pwa-and-offline-availability)
17. [Class 18 Progressive Web App (PWA) and Service Push Notification](#class-18-progressive-web-app-pwa-and-service-push-notification)
* [Bootcamp 2020 Project 7A: Rebuild the Expense Tracker App and Quiz Part IV: Testing React in TypeScriptApp with React/TypeScript it should be a Progressive Web App (PWA) with Offline Capability and Push Notifications](#bootcamp-2020-project-7a--rebuild-the-expense-tracker-app-and-quiz-app-with-react-typescript-it-should-be-a-progressive-web-app--pwa--with-offline-capability-and-push-notifications)
18. [Part IV: Testing React in TypeScript](#part-iv-testing-react-in-typeScript)
* [Bootcamp 2020 Project 7B: Build a React Timer App using TypeScript with Test Driven Development](#bootcamp-2020-project-7b--build-a-react-timer-app-using-typescript-with-test-driven-development)
19. [Part V: Client Side GraphQL in React Apps](#part-v-client-side-graphql-in-react-apps)
* [Bootcamp 2020 Project 8: Build a Build a Space X Client Application with React, TypeScript, Appllo Client 3, and SpaceX API using Test-Driven Development (TDD) and deployed as a PWA](#bootcamp-2020-project-8--build-a-build-a-space-x-client-application-with-react-typescript-appllo-client-3-and-spacex-api-using-test-driven-development-tdd-and-deployed-as-a-pwa)
20. [Part VI: Managing State with Redux](#part-vi-managing-state-with-redux)
* [Bootcamp 2020 Project 9A: Create a Shopping Basket using React and Redux Toolkit with TypeScript](#bootcamp-2020-project-9a-create-a-shopping-basket-using-react-and-redux-toolkit-with-typescript)
* [Bootcamp 2020 Project 9B: Building Diaries App using React and Redux Toolkit with TypeScript](#bootcamp-2020-project-9b-building-diaries-app-using-react-and-redux-toolkit-with-typescript)
21. [Part VII: API Mocking Servers with Mirage](#part-vii-api-mocking-servers-with-mirage)
22. [Part VIII: Forms with Formik and Yup](#part-viii-forms-with-formik-and-yup)
* [Bootcamp Project 10: Build a Signup Form and Multi-Step Form with Formik, Yup, and Material UI using TypeScript](#bootcamp-project-10-build-a-signup-form-and-multi-step-form-with-formik-yup-and-material-ui-using-typescript)
22. [Part IX: Component Driven Development with Storybook and Bit](#part-ix-component-driven-development-with-storybook-and-bit)
* [Bootcamp Project 11: Build a Taskbox React Component in TypeScript using Storybook and Publishing it on Bit](#bootcamp-project-11--build-a-taskbox-react-component-in-typescript-using-storybook-and-publishing-it-on-bit)
23. [Part X: JAMstack Serverless and Headless CMS](#part-x-jamstack-serverless-and-headless-cms)
* [Bootcamp 2020 Project 12A: Build a Blog site in Gatsby.js and Contentful with TypeScript and Deploy on Netlify](#bootcamp-2020-project-12a-build-a-blog-site-in-gatsbyjs-and-contentful-with-typescript-and-deploy-on-netlify)
* [Bootcamp 2020 Project 12B: Building Serverless CRUD apps with Netlify Functions and FaunaDB](#bootcamp-2020-project-12b-building-serverless-crud-apps-with-netlify-functions-and-faunadb)
* [Bootcamp 2020 Project 12C: Building a Serverless JAMStack Todo app with Netlify, Gatsby, GraphQL, and FaunaDB](#bootcamp-2020-project-12c-building-a-serverless-jamstack-todo-app-with-netlify-gatsby-graphql-and-faunadb)
* [Bootcamp 2020 Project 12D: Create A Bookmarking Application With FaunaDB, Netlify And Gatsby](#bootcamp-2020-project-12d-create-a-bookmarking-application-with-faunadb-netlify-and-gatsby)
* [Bootcamp 2020 Project 12E: Virtual Lolly using Gatsby.js, Netlify, FaunaDB, Formik, and Storybook 6](#bootcamp-2020-project-12e-virtual-lolly-using-gatsby-netlify-faunadb-formik-and-storybook-6)
* [Bootcamp 2020 Extra Project 12F: Build a Macro Compliance Tracker in Next and MongoDB Atlas with TypeScript and Deploy on Vercel](#bootcamp-2020-extra-project-12f-build-a-macro-compliance-tracker-in-next-and-mongodb-atlas-with-typeScript-and-deploy-on-vercel)
24. [Part XI: Jamstack Ecommerce: Stripe, Shopify, and Snipcart](#part-xi-jamstack-ecommerce-stripe-shopify-and-snipcart)
25. [Part XII: Full Stack Serverless with AWS Cloud Development Kit - CDK](#part-xii-full-stack-serverless-with-aws-cloud-development-kit---cdk)
* [Bootcamp 2020 Project 13A: Building a Serverless JAMStack Todo app with AWS CDK, AWS CloudFront, Gatsby, GraphQL/AWS AppSync, and DynamoDB](#bootcamp-2020-project-13a-building-a-serverless-jamstack-todo-app-with-aws-cdk-aws-cloudfront-gatsby-graphqlaws-appsync-and-dynamodb)
* [Bootcamp 2020 Project 13B: Create A Bookmarking Application With AWS CDK, AWS CloudFront, Gatsby, GraphQL/AWS AppSync, and DynamoDB](#bootcamp-2020-project-13b-create-a-bookmarking-application-with-aws-cdk-aws-cloudfront-gatsby-graphqlaws-appsync-and-dynamodb)
* [Bootcamp 2020 Project 13C: Virtual Lolly using AWS CDK, AWS CloudFront, Gatsby, GraphQL/AWS AppSync, DynamoDB, Formik, and Storybook 6](#bootcamp-2020-project-13c-virtual-lolly-using-aws-cdk-aws-cloudfront-gatsby-graphqlaws-appsync-dynamodb-formik-and-storybook-6)
* [Bootcamp 2020 Project 14: Building Serverless Apps with Event-Driven Architecture using AWS Eventbridge](#bootcamp-2020-project-14-building-serverless-apps-with-event-driven-architecture-using-aws-eventbridge)
* [Bootcamp 2020 Project 15A: Build Serverless SaaS APIs for DiningByFriends Social Network Project using Graph Database and GraphQL](#bootcamp-2020-project-15a-build-serverless-saas-apis-for-diningbyfriends-social-network-project-using-graph-database-and-graphql)
* [Bootcamp 2020 Project 15B: Build Serverless SaaS APIs for DiningByFriends Social Network Project using Relational Database and OpenAPI](#bootcamp-2020-project-15b-build-serverless-saas-apis-for-diningbyfriends-social-network-project-using-relational-database-and-openapi)
26. [Part XIII: Android, and iOS Mobile Full Stack Apps using React Native with Expo and Amplify](#part-xiii-android-and-ios-mobile-full-stack-apps-using-react-native-with-expo-and-amplify)
* [Bootcamp 2020 Project 16: Build Serverless Slack App with Expo and AWS Amplify](#bootcamp-2020-project-16-build-serverless-slack-app-with-expo-and-aws-amplify)
27. [Appendices](#appendices)
* [Appendix A: Figma for Developers](#appendix-a-figma-for-developers)
* [Appendix B: Design Patterns in TypeScript](#appendix-b-design-patterns-in-typeScript)
* [Appendix C: Combining Design thinking, Lean Startup, and Agile to Build SaaS Startups](#appendix-c-combining-design-thinking-lean-startup-and-agile-to-build-saaS-startups)
* [Appendix D: Cloud Security](#appendix-d-cloud-security)
* [Appendix E: List of Students who have completed the first 12 Projects and started to work todays becoming a Full Stack Serverless Cloud Developer](#appendix-e-list-of-students-who-have-completed-the-first-12-projects-and-started-to-work-towards-becoming-a-full-stack-serverless-cloud-developer)
## Introduction to English and Urdu Sections
### English Section:
[English Class Facebook Group](https://www.facebook.com/groups/4irug)
[YouTube English Channel](https://www.youtube.com/channel/UCZUgRzBPk8CoYeHhbPL8OWg)
### Urdu Section:
[Urdu Class Facebook Group](https://www.facebook.com/groups/freelance.remote.work/)
[YouTube Urdu Channel](https://www.youtube.com/channel/UCfAX44elSfBV66jU53akpBA)
### Teaching Team:
[Zeeshan Hanif](https://github.com/zeeshanhanif), Hira Khan, Bashir Aziz, Daniyal Nogori, [Moshin Khalid](https://github.com/MuhammadMohsin), Aamir Pinger, Adil Altaf, Ameen Alam, Waris, Huma, and [Zia Khan](https://github.com/ziaukhan).
## Prerequisites: HTML, CSS, and JavaScript
These topics have been released for everyone in Urdu:
[Learn HTML by Hira Khan](https://www.youtube.com/playlist?list=PLKvqnz8z1zWQ3BALy86tIXICkG874wAc6)
[Learn CSS Intro by Hira Khan](https://www.youtube.com/playlist?list=PLKvqnz8z1zWQSWIen_zUSEBmtqzPLuRob)
[Learn JavaScript by Zeeshan Hanif](https://www.youtube.com/playlist?list=PLKvqnz8z1zWQdc0NSLknxmxBch5gLOqyo)
Note: Material in English is already available [extensively on the web](https://css-tricks.com/where-do-you-learn-html-css-in-2020/).
[Microsoft's Beginner's Series to: JavaScript](https://www.youtube.com/playlist?list=PLlrxD0HtieHhW0NCG7M536uHGOtJ95Ut2)
## Part I: Front-End Fundamentals with React
## Class 1: Development Setup
Learning Material for Class 1:
[Assignment Notes](https://github.com/panacloud/Bootcamp-Setup)
[Presentation](https://docs.google.com/presentation/d/1f1AKJIS6WkZ3PjGWG-WVJzurrEb9wNreIgmfftgQSjE/edit#slide=id.g72e8d8e333_0_978)
[Notes](https://docs.google.com/document/d/11D43REjdlsoZgchrhwf8UeuGdtXaFFMnHS9CAkVkXoY/edit)
[Class 1 in English on Facebook : Intro to Bootcamp 2020 and Development Setup](https://www.facebook.com/piaic.main/videos/170335457846407/)
[Class 1 in English on YouTube : Intro to Bootcamp 2020 and Development Setup](https://www.youtube.com/watch?v=pjc441QKJFE)
[Class 1 in Urdu on Facebook : Intro to Bootcamp 2020 and Development Setup](https://www.facebook.com/piaic.main/videos/170952927784660/)
[Class 1 in Urdu on YouTube : Intro to Bootcamp 2020 and Development Setup](https://www.youtube.com/watch?v=OiP7N_ztnik)
## Class 2: Starting React
Learning material
[Assignment](https://github.com/panacloud/Base-React-App)
[Notes](https://docs.google.com/document/d/13GYhCj3Ts8fWQfj35s6Xz9YZ3WhtK0iqugdnFkrtxwQ/edit?usp=sharing)
English Videos:
[Class 2 in English on Facebook : Github Actions And Intro to Learning React Part 1](https://www.facebook.com/piaic.main/videos/171414181071868/?fref=mentions)
[Class 2 in English on YouTube : Github Actions And Intro to Learning React Part 1](https://www.youtube.com/watch?v=G25BM3nPk3s)
[Class 2 in Urdu on Facebook : Github Actions And Intro to Learning React Part 1](https://www.facebook.com/piaic.main/videos/171837241029562/)
[Class 2 in Urdu on YouTube : Github Actions And Intro to Learning React Part 1](https://www.youtube.com/watch?v=mEFq3YGiauM)
## Class 3 and 4: Learn React
[Learn React Tutorial](https://daveceddia.com/react-tutorial/)
Cover the Tutorial Before Fetching Data
[Class 3 Facebook English Video : Learning React Part 2](https://www.facebook.com/piaic.main/videos/173417630871523)
[Class 3 YouTube English Video : Learning React Part 2](https://www.youtube.com/watch?v=AHC-Gas_sok)
[Class 3 Facebook Urdu Video : Learning React Part 2](https://www.facebook.com/piaic.main/videos/173553557524597/)
[Class 3 YouTube Urdu Video : Learning React Part 2](https://www.youtube.com/watch?v=8TQ1i93pRsk)
[Class 4 Facebook English Video : Learning React Part 3](https://www.facebook.com/piaic.main/videos/174431544103465/)
[Class 4 YouTube English Video : Learning React Part 3](https://www.youtube.com/watch?v=ye0yj5WdXg4)
[Class 4 Facebook Urdu Video : Learning React Part 3](https://www.facebook.com/piaic.main/videos/174837927396160/)
[Class 4 YouTube Urdu Video : Learning React Part 3](https://www.youtube.com/watch?v=i-DhkVmlgcI)
## Class 5 and 6: Hooks
After we have learned the useState Hook in class 4 using the [Learn React Tutorial](https://daveceddia.com/react-tutorial/) we will skip the fetch data (we will cover it latter) part of the tutorial and learn useContext and useReducer hooks and build the Expense Tracker App.
First we will learn the hooks:
[An Introduction To React’s Context API](https://www.smashingmagazine.com/2020/01/introduction-react-context-api/)
[Working with the React Context API](https://www.toptal.com/react/react-context-api)
[How to use the useReducer React hook](https://flaviocopes.com/react-hook-usereducer/)
[Understanding the React useReducer Hook](https://alligator.io/react/usereducer/)
[Class 5 YouTube English Video : Learning React Part 4](https://www.youtube.com/watch?v=h27ABSn-27g)
[Class 5 Facebook English Video : Learning React Part 4](https://www.facebook.com/piaic.main/videos/176007070612579/)
[Class 5 YouTube Urdu Video : Learning React Part 4](https://www.youtube.com/watch?v=_UUlRvbJPfQ)
[Class 5 Facebook Urdu Video : Learning React Part 4](https://www.facebook.com/piaic.main/videos/176512327228720/)
### Bootcamp 2020 Project 1: Build an Expense Tracker App using React Hooks and Context API
Follow this Video and build the App: [Expense Tracker](https://www.youtube.com/watch?v=XuFDcZABiDQ)
[Project Submit Form](https://docs.google.com/forms/d/e/1FAIpQLSfnJKOcI5t-IKt7ebmdRgr5llo4PIMXUVMKGAptMjaIeN0Gsg/viewform)
[Class 6 YouTube English Video : Building a React Project](https://www.youtube.com/watch?v=q6GmIxnflfM)
[Class 6 Facebook English Video : Building a React Project](https://www.facebook.com/piaic.main/videos/177715090441777/)
[Class 6 Facebook Urdu Video : Building a React Project](https://www.facebook.com/imran82ali/videos/283949636075779/)
[Class 6 YouTube Urdu Video : Building a React Project](https://www.youtube.com/watch?v=dkMba8oK55w)
Expense Tracker App By Adil Altaf
[Git Repo URL](https://github.com/adil-innovation-lab/react-expense-tracker)
[Surge URL](http://react-expense-tracker-adil.surge.sh/)
[Step by Step Guide](https://docs.google.com/document/d/1f6KBYJQAhwUzS0UtMzrshBWwOeYHH32kMAfuLIfuDgU/edit?usp=sharing)
## Class 7: Asynchronous JavaScript
[JavaScript Promises, Callbacks, and Async/Await for Beginners](https://hackernoon.com/javascript-promises-callbacks-and-asyncawait-pu7432af)
[Asynchronous JavaScript: How Callbacks, Promises, and Async-Await Work](https://www.youtube.com/watch?v=XuFDcZABiDQ)
[Code for Class 7 English](https://github.com/zeeshanhanif/demo-async-programming)
[Class 7 English Facebook Video : Learning Asynchronous JavaScript](https://web.facebook.com/imran82ali/videos/286047259199350/)
[Class 7 English YouTube Video : Learning Asynchronous JavaScript](https://www.youtube.com/watch?v=xSCo1sPk6mg)
[Class 7 Urdu YouTube Video : Learning Asynchronous JavaScript](https://www.youtube.com/watch?v=8a1oq_IjCHE)
[Class 7 Urdu Facebook Video : Learning Asynchronous JavaScript](https://www.facebook.com/imran82ali/videos/286730542464355/)
## Class 8: Fetch Data
Learn JavaScript Fetch
[How to fetch data in JavaScript](https://javascript.info/fetch)
[Fetch API data using useEffect React hook](https://medium.com/thecodefountain/fetch-api-data-using-useeffect-react-hook-465809ca12c6)
Different Options to get data in React
[Different ways to fetch data in React](https://dmitripavlutin.com/react-fetch-lifecycle-methods-hooks-suspense/)
[Class 8 Code](https://github.com/zeeshanhanif/demo-react-useeffect)
[Class 8 English Facebook Video : JavaScript Fetch with React](https://www.facebook.com/zeeshanhanif/videos/10223639700845447/)
[Class 8 English YouTube Video : JavaScript Fetch with React](https://www.youtube.com/watch?v=MoTfMsuexhk)
[Class 8 Urdu Facebook Video : JavaScript Fetch with React](https://www.facebook.com/zeeshanhanif/videos/10223652738571382/)
[Class 8 Urdu YouTube Video : JavaScript Fetch with React](https://www.youtube.com/watch?v=i7iuPKa2A-E)
Data fetching with React Suspense
[React Suspense 1](https://rahmanfadhil.com/fetch-data-with-react-suspense/)
[React Suspense 2](https://blog.logrocket.com/react-suspense-for-data-fetching/)
[React Suspense 3](https://dev.to/andreiduca/practical-implementation-of-data-fetching-with-react-suspense-that-you-can-use-today-273m)
[React Suspense 4](https://medium.com/better-programming/diving-into-react-suspense-render-as-you-fetch-for-rest-apis-bf2d20ea7c59)
References:
[React Suspense Reference 1](https://reactjs.org/docs/concurrent-mode-suspense.html)
[React Suspense Reference 2](https://www.manning.com/books/react-hooks-in-action)
## Class 9 and 10: Material UI
Learn Material UI
[Main Website](https://material-ui.com/)
[Installation](https://material-ui.com/getting-started/installation/)
[Getting Started](https://material-ui.com/getting-started/usage/)
[Details](https://react.school/material-ui)
[Templates](https://material-ui.com/getting-started/templates/)
Learn Chart.js
[Mian Docs](https://www.chartjs.org/docs/latest/)
[Getting Started](https://www.chartjs.org/docs/latest/getting-started/)
[Class 9 English Facebook Video : Learning Material UI and Chart.JS](https://www.facebook.com/zeeshanhanif/videos/10223687587242577/)
[Class 9 English YouTube Video : Learning Material UI and Chart.JS](https://www.youtube.com/watch?v=UVd9YQJ8Ge4)
[Class 9 Urdu Facebook Video : Learning Material UI and Chart.JS](https://www.facebook.com/zeeshanhanif/videos/10223699956751807/)
[Class 9 Urdu YouTube Video : Learning Material UI and Chart.JS](https://www.youtube.com/watch?v=GqRXcnxEZt0)
### Bootcamp 2020 Project 2: COVID-19 Tracker App
[Submit Project here](https://docs.google.com/forms/d/e/1FAIpQLSe73k_rbeFDLdZB_mynUVF8f8AZbcG5MkvCRG_omAZuiMPDGg/viewform)
You will use React, React Material UI, Chart.js, and React Suspense to build this COVID-19 Tracker React App
1. Watch this video as a example for the app but build your own app don't just copy it:
[Example COVID-19 Tracker App Demo](https://www.youtube.com/watch?v=khJlrj3Y6Ls)
2. Choose one or more COVID-19 API's that you are going to use:
[COVID-19 API Listing 1](https://rapidapi.com/collection/coronavirus-covid-19)
[COVID-19 API Listing 2](https://covid-19-apis.postman.com/)
[COVID-19 API Listing 3](https://dataconomy.com/2020/04/apis-to-track-coronavirus-covid-19/)
[COVID-19 Google Map API](https://developers.google.com/maps/covid19)
3. Start building your COVID-19 Tracker App
Your code should be hosted in a GitHub Repo from the beginning with GitHub CI/CD Actions and hosted on Surge.
Adil Altaf builds the COVID-19 Tracker App
[Class 10 English Facebook Video : Building COVID-19 Tracker App](https://www.facebook.com/zeeshanhanif/videos/10223727984452482/)
[Class 10 English YouTube Video : Building COVID-19 Tracker App](https://www.youtube.com/watch?v=_JcQ5ISu2PQ&lc)
[Class 10 Urdu Facebook Video : Building COVID-19 Tracker App](https://www.facebook.com/zeeshanhanif/videos/10223743572722179/)
[Class 10 Urdu YouTube Video : Building COVID-19 Tracker App](https://www.youtube.com/watch?v=hbVAt-44G9Y)
## Class 11 React Router v6
[Setting Started with React Router V6](https://github.com/ReactTraining/react-router/blob/dev/docs/installation/getting-started.md)
[React Router v6 Video Tutorial](https://www.youtube.com/watch?v=Z89iY7xwBSU&feature=emb_logo)
Note: [Use the latest Beta Release of V6](https://github.com/ReactTraining/react-router/releases)
[Class 11 English Facebook Video : Learning Routing With React Router](https://www.facebook.com/zeeshanhanif/videos/10223782839183816/)
[Class 11 English YouTube Video : Learning Routing With React Router](https://www.youtube.com/watch?v=Bj3u0Jm-Mtg)
[Class 11 Urdu Facebook Video : Learning Routing With React Router](https://www.facebook.com/zeeshanhanif/videos/10223796154156682/)
[Class 11 Urdu YouTueb Video : Learning Routing With React Router](https://www.youtube.com/watch?v=IcbIvXY7JCw)
### Bootcamp 2020 Project 3: Shoe Store
Now build a Shoe Store after watching this [video](https://www.youtube.com/watch?v=4NpGzBEySvI)
[Submit Project 3](https://docs.google.com/forms/d/e/1FAIpQLSd1q0mVoS3Ue-qmWlV97cPuMSCzebdPcyMl2MQg1VHNj42plw/viewform)
## Class 12 Web Animations API
[Web Animations API Now Supported in All Evergreen Browsers](https://www.infoq.com/news/2020/06/web-animations-evergreen-browser/?fbclid=IwAR1GBet8ybffQ5Tlcfterc_sq8EledzsTHvWm-eLlSwvrFmwf63ggvM4Z_o)
[Check Browser Support](https://codepen.io/danwilson/pen/xGBKVq)
[Web Animations API Concepts](https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API/Web_Animations_API_Concepts)
[We will use this Shim](https://github.com/web-animations/web-animations-js)
[We will learn from this Tutorial in depth](https://github.com/web-animations/web-animations-codelabs)
[Using the Web Animations API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API/Using_the_Web_Animations_API)
[Additive Animation with the Web Animations API](https://css-tricks.com/additive-animation-web-animations-api/)
[Examples](https://github.com/web-animations/web-animations-js/blob/dev/docs/examples.md)
[Live Demos](https://web-animations.github.io/web-animations-demos/)
[More Web Animations Resources](http://danielcwilson.com/tags/web-animations-api/)
[Class 12 English Facebook Video : Learning Web Animation](https://www.facebook.com/zeeshanhanif/videos/10223819571102091/)
[Class 12 English YouTube Video : Learning Web Animation](https://www.youtube.com/watch?v=DhUveECtjG4)
[Class 12 Urdu Facebook Video : Learning Web Animation](https://www.facebook.com/zeeshanhanif/videos/10223831524160910/)
[Class 12 Urdu YouTube Video : Learning Web Animation](https://www.youtube.com/watch?v=PbXYsgtJAMc)
## Class 13 Web Animations API with React
We will be using the following React hooks useEffect, useLayoutEffect and [useRef](http://wellpaidgeek.com/2020/02/11/reacts-useref-hook-explained/).
[Everything You Need to Know About FLIP Animations in React](https://css-tricks.com/everything-you-need-to-know-about-flip-animations-in-react/)
[Creating Highly-Performant Animations using Web Animations API and React hooks](https://hackernoon.com/creating-highly-performant-animations-using-web-animations-api-and-react-hooks-k92d3utf?source=rss)
[Class 13 English Facebook Video : Web Animation In React](https://www.facebook.com/zeeshanhanif/videos/10223864192297593/)
[Class 13 English YouTube Video : Web Animation In React](https://www.youtube.com/watch?v=Vi7yRwlE4bg)
[Class 13 Urdu Facebook Video : Web Animation In React](https://www.facebook.com/zeeshanhanif/videos/10223876685849924/)
[Class 13 Urdu YouTube Video : Web Animation In React](https://www.youtube.com/watch?v=BQRBFoYhWgE)
### Bootcamp 2020 Project 4A: Red Queen's Race with Web Animation API and React Hooks
[Project Submit Form](https://docs.google.com/forms/d/e/1FAIpQLScAj_NogliczLma_YvlE9r1FbBhamiq6dhJy77SIpbxZPYmvw/viewform)
Review the [code and demo](https://codepen.io/rachelnabors/pen/PNGGaV) and improve and build your own Red Queens Race Animation with React Hooks.
Note the following:
1. When Alice drinks from the bottle, she grows smaller.
2. Because small children tire out easily, unlike automaton chess pieces, Alice is constantly slowing down.
3. But urging them on by clicking or tapping causes them to speed up.
4. The background elements also have playback rates that are impacted when you click or tap.
[Source Article](https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API/Using_the_Web_Animations_API)
### Bootcamp 2020 Project 4B: Develop Tiny Short Animation with React Hooks
[Project Submit Form](https://docs.google.com/forms/d/e/1FAIpQLSex4JsbAK60hhrZkHZs_8HWj54KF2idxZxEaQorNqqhUOxjWQ/viewform)
Read this article: [The Tiny Short Animation Trend in Web Design](https://speckyboy.com/short-animation-web-design/)
Clone the front page animation of one of the companies mentioned in the article, using the latest web animation API.
### Bootcamp 2020 Bonus/Extra Project 5: Build an Animated React Website which follows the Latest Trends like Animated Illustrations
[Project Submit Form](https://docs.google.com/forms/d/e/1FAIpQLSdhHS93c4GCfxTAJYkuIG8nSp9kRp1pYcLW9r-20TNO2P6wIA/viewform)
"Our eyes are hardwired to notice movement. Historically, it’s helped to keep us alive. And, in 2020, web designers are capitalizing on this default human setting.
Animated illustrations are one of the newest trends being used to direct viewer attention within web designs. You’ll see these petite animations on sites all over the web.
Some animated illustrations are merely still graphics that jiggle, while other illustrated animations are more thoughtful and complex. When used to their fullest capacity, animated illustrations can tell stories, explain concepts, or help viewers navigate a website."
[The 8 Biggest Web Design Trends of 2020](https://www.crowdspring.com/blog/web-design-trends-2020/)
[20 Extraordinary Web Design Ideas That Will Get Everyone Clicking](https://www.jeffbullas.com/web-design-ideas/)
Incorporating illustration on a website has been a trend for a few years. However, designers are now focusing to create custom and 3D illustrations to define a brand.
An illustration can empower a brand if blended well with minimalism. See how the brand Neat has rightly executed this trend:
[Neat Website](https://thisisneat.com.au/)
To intrigue viewers, brands like Pitch have introduced 3D illustration design:
[Pitch Website](https://pitch.com/)
In this project you will build a animated React Website, all animations must use the latest Web Animations API and latest trends.
Resources:
[Beautiful, free illustrations](https://www.drawkit.io/)
[free illustrations](https://freellustrations.com/)
[Design Resources for Developers](https://github.com/bradtraversy/design-resources-for-developers)
You can use the ideas form these resourses or develop your own ideas:
[Best websites that use Illustration and Animation](https://madebyshape.co.uk/web-design-blog/best-websites-that-use-illustration-and-animation/)
[22 Websites with Impressive Illustrations and Animations](https://www.thebestdesigns.com/collections/websites-with-bold-colorful-illustrations-and-animations)
[10 Inspiring Websites with Gorgeous Animations](https://1stwebdesigner.com/10-inspiring-websites-with-gorgeous-animations/)
[Animated Sites](https://www.cssdesignawards.com/website-gallery?feature=animated)
[8 Best Animated Websites](https://www.mockplus.com/blog/post/best-animated-websites)
[Best Website examples of designs with animation](https://www.awwwards.com/websites/animation/)
You may use AI to generate graphics:
[Creative Tools to Generate AI Art](https://aiartists.org/ai-generated-art-tools)
[Magenta.js](https://magenta.tensorflow.org/get-started/#magenta-js)
[Web Demo](https://magenta.tensorflow.org/assets/sketch_rnn_demo/index.html)
[Magenta Tool](https://style-transfer.glitch.me/)
[Sketch-RNN-JS: A Generative Model for Vector Drawings](https://github.com/magenta/magenta-demos/blob/master/sketch-rnn-js/README.md)
[Auto Draw: An AI Experiment](https://www.autodraw.com/)
## Part II: Programming with TypeScript
Begin by installing [TypeScript 4.0+](https://www.typescriptlang.org/download):
npm install -g typescript
We will use this book to learn TypeScript:
[Programming TypeScript: Making Your JavaScript Applications Scale by Boris Cherny](https://www.amazon.com/Programming-TypeScript-Making-JavaScript-Applications/dp/1492037656/ref=sr_1_1)
Chapters 1, 2, 3, 4, and 9
Note 1: You can also learn TypeScript 4.0 in detail from this Panacloud [repo](https://github.com/panacloud-modern-global-apps/learn-typescript)
[Class 14 English Facebook Video : Learning TypeScript](https://www.facebook.com/zeeshanhanif/videos/10223895728525979/)
[Class 14 English YouTube Video : Learning TypeScript](https://www.youtube.com/watch?v=dVKnwn44U7w)
[Class 14 Urdu YouTube Video : Learning TypeScript](https://www.youtube.com/watch?v=xMRyGAqnPEU)
[Class 14 Urdu Facebook Video : Learning TypeScript](https://www.facebook.com/zeeshanhanif/videos/10223906321590799)
[Class 15 English Facebook Video : Building A React Quiz App In TypeScript](https://www.facebook.com/zeeshanhanif/videos/10223936688309948/)
[Class 15 English YouTube Video : Building A React Quiz App In TypeScript](https://www.youtube.com/watch?v=kJGlPhiPUjQ)
[Class 15 Urdu Facebook Video : Building A React Quiz App In TypeScript](https://www.facebook.com/zeeshanhanif/videos/10223948565926881/)
[Class 15 Urdu YouTube Video : Building A React Quiz App In TypeScript](https://www.youtube.com/watch?v=H3tQTv2EPcM)
[Class 16 English Facebook Video : Building A React Quiz App And TypeScript Part 2](https://www.facebook.com/zeeshanhanif/videos/10223966186247378/)
[Class 16 English YouTube Video : Building A React Quiz App And TypeScript Part 2](https://www.youtube.com/watch?v=2gYKVaeApzU)
[Class 16 Urdu YouTube Video](https://www.youtube.com/watch?v=R94xDXkvBgM)
[Class 16 English YouTube Video](https://www.facebook.com/zeeshanhanif/videos/10223976398902688/)
### Bootcamp 2020 Project 6: Quiz App with React and TypeScript
[You can submit your project here](https://docs.google.com/forms/d/e/1FAIpQLSepN9QvMMoutFd9FbrK9xg0elIHRmjDDfMriRVQe2bDeHMCUw/viewform)
[Quiz app using React and TypeScript](https://www.freecodecamp.org/news/how-to-build-a-quiz-app-using-react-and-typescript/)
[You can take help from here also: Your First React Typescript Project: a Todo List App](https://typeofnan.dev/your-first-react-typescript-project-todo-app/)
## Part III: Progressive Web Apps (PWA)
## Class 17 Progressive Web Apps (PWA) and Offline Availability
[THE CURRENT STATE OF PROGRESSIVE WEB APPS](https://www2.stardust-testing.com/en/the-current-state-of-progressive-web-apps)
[What’s a PWA, and How Do I Build One?](https://medium.com/better-programming/what-is-a-pwa-and-how-do-i-build-it-e843c247efb5)
[How to Make your React App a Progressive Web App](https://felixgerschau.com/how-to-make-your-react-app-a-progressive-web-app-pwa/)
[Building a Progressive Web Application with Create React App](https://hub.packtpub.com/building-a-progressive-web-application-with-create-react-app-2-tutorial/)
Deploy PWA on All App Stores
[Publishing PWAs to Major App Stores: The Whys and Hows](https://www.simicart.com/blog/pwa-app-stores/)
[Google Play Store now open for Progressive Web Apps](https://medium.com/@firt/google-play-store-now-open-for-progressive-web-apps-ec6f3c6ff3cc)
[How to publish PWA app on Google Play Store – Step by step guide](https://www.vtnetzwelt.com/mobile/publishing-pwa-app-on-google-play-store/)
[Microsoft's PWABuilder makes submitting web apps to the Play Store easier than ever](https://www.androidpolice.com/2020/07/13/microsofts-pwabuilder-makes-submitting-web-apps-to-the-play-store-easier-than-ever/)
[How Progressive Web Apps Will Change Mobile Commerce In 2020](https://customerthink.com/how-progressive-web-apps-will-change-mobile-commerce-in-2020/)
[Make your PWA feel more like an app](https://web.dev/app-like-pwas/)
[Latest News](https://www.neowin.net/news/google-chrome-will-soon-allow-users-to-run-pwas-at-startup/)
[PWA Reference](https://developer.mozilla.org/en-US/docs/Web/Progressive_web_apps)
[Progressive Web Apps and Offline-availability](https://www.simicart.com/blog/pwa-offline/)
[How to Build Modern, Offline Apps With Progressive Web Apps](https://developer.mozilla.org/en-US/docs/Web/Progressive_web_apps/Offline_Service_workers)
[Class 17 English Facebook Video : Learning Progressive Web App](https://www.facebook.com/zeeshanhanif/videos/10224004740651214/)
[Class 17 English YouTube Video : Learning Progressive Web App](https://www.youtube.com/watch?v=S9Jkb61_gac)
[Class 17 Urdu Facebook Video ](https://www.facebook.com/zeeshanhanif/videos/10224016274939564/)
[Class 17 Urdu Facebook Video](https://www.youtube.com/watch?v=N5JHz6TvGnM)
## Class 18 Progressive Web App (PWA) and Service Push Notification
[Firebase Push Notifications in React](https://www.smashingmagazine.com/2020/06/firebase-push-notifications-react/)
[Class 18 English Facebook Video : Progressive Web App And Push Notification](https://www.facebook.com/zeeshanhanif/videos/10224036506845349/)
[Class 18 English YouTube Video : Progressive Web App And Push Notification](https://www.youtube.com/watch?v=4MwPXLcMRns)
[Class 18 Urdu Facebook Video](https://www.facebook.com/zeeshanhanif/videos/10224047034148525/)
[Class 18 Urdu YouTube Video](https://www.youtube.com/watch?v=oFxmMVi6U0U)
### Bootcamp 2020 Project 7A: Rebuild the Expense Tracker App and Quiz App with React/TypeScript it should be a Progressive Web App (PWA) with Offline Capability and Push Notifications
You should deploy them on Surge as well make it an Android App, Apple App and Windows App (If you have a Store account's you may deploy on the stores as well).
Reference:
[Publishing PWAs to Major App Stores: The Whys and Hows](https://www.simicart.com/blog/pwa-app-stores/)
## Part IV: Testing React in TypeScript
[You Can't Do CI/CD Without Automated Testing](https://dzone.com/articles/you-cant-do-cicd-without-automated-testing)
[What is Test Driven Development (TDD)? Tutorial with Example](https://www.guru99.com/test-driven-development.html)
[How to Test React Components in TypeScript](https://www.pluralsight.com/guides/how-to-test-react-components-in-typescript)
[Writing unit tests with React, Typescript, and react-testing-library](https://dev.to/wojciechmatuszewski/writing-unit-tests-with-react-typescript-and-react-testing-library-1nmg)
[The Practical Guide to Start React Testing Library with TypeScript](https://medium.com/javascript-in-plain-english/the-practical-guide-to-start-react-testing-library-with-typescript-d386804a018)
[How to set intellisense for react testing library using typescript](https://stackoverflow.com/questions/62885755/how-to-set-intellisense-for-react-testing-library-using-typescript)
[How To Test Your React Apps With The React Testing Library](https://www.smashingmagazine.com/2020/07/react-apps-testing-library/)
[Class 19 English Facebook Video : Learning Test Driven Development](https://www.facebook.com/zeeshanhanif/videos/10224107545941282/)
[Class 19 English YouTube Video : Learning Test Driven Development](https://www.youtube.com/watch?v=gYYcGCpPA7g)
[Class 19 Urdu Facebook Video](https://www.facebook.com/zeeshanhanif/videos/10224118327250808/)
[Class 19 Urdu YouTube Video](https://www.youtube.com/watch?v=R6S5Vo9aizg)
### Bootcamp 2020 Project 7B: Build a React Timer App using TypeScript with Test Driven Development
[React Test-driven Development: From User Stories to Production](https://www.toptal.com/react/tdd-react-user-stories-to-development)
Follow this for TypeScript config:
[Create react app typescript: testing with jest and enzyme](https://medium.com/@feralamillo/create-react-app-typescript-testing-with-jest-and-enzyme-869fdba1bd3)
Note 1: While Building the CI/CD pipeline make sure the app passes all the automated tests before deployment
Note 2: In the Toptal article above they donot use TypeScipt, but you are required to do so.
[Class 20 English Facebook Video : Building a React Timer App](https://www.facebook.com/zeeshanhanif/videos/10224150277569546/)
[Class 20 English YouTube Video : Building a React Timer App](https://www.youtube.com/watch?v=xsf_NhEkQII)
[Class 20 Urdu Facebook Video : Building a React Timer App](https://www.facebook.com/zeeshanhanif/videos/10224162457554038/)
[Class 20 Urdu YouTube Video : Building a React Timer App](https://www.youtube.com/watch?v=VxDXySbiqhY)
## Part V: Client Side GraphQL in React Apps
Introduction to GraphQL:
[Introduction to QraphQL](https://www.howtographql.com/basics/0-introduction/)
[Core Concepts](https://www.howtographql.com/basics/2-core-concepts/)
[Big Picture (Architecture)](https://www.howtographql.com/basics/3-big-picture/)
[Queries and Mutations](https://graphql.org/learn/queries/)
What’s your query? Learn GraphQL with React and Contentful
[What’s your query? Learn GraphQL with React and Contentful](https://www.contentful.com/blog/2020/08/03/whats-your-query-learn-graphql-with-react-and-contentful/)
[Watch Video Tutorials](https://www.contentful.com/developers/videos/learn-graphql/)
JavaScript Prerequisites:
[What are Tag Functions?](https://codeburst.io/javascript-what-are-tag-functions-97682f29521b)
[Read about Tagged templates from this page](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals)
Learn high level GraphQL Server Concepts, not in detail now (This will help you to understand client development better):
[How to build full-stack apps with Apollo](https://www.apollographql.com/docs/tutorial/introduction/)
[Build a Schema](https://www.apollographql.com/docs/tutorial/schema/)
[Connect to data sources](https://www.apollographql.com/docs/tutorial/data-source/)
[Write query resolvers](https://www.apollographql.com/docs/tutorial/resolvers/)
Apollo-Client 3.0 Tutorial:
[Introduction to Appllo Client 3 in React](https://www.apollographql.com/docs/react/)
[Get started](https://www.apollographql.com/docs/react/get-started/)
[Fetch data with the useQuery hook](https://www.apollographql.com/docs/react/data/queries/)
[Update data with the useMutation hook](https://www.apollographql.com/docs/react/data/mutations/)
[Using Apollo with TypeScript](https://www.apollographql.com/docs/react/development-testing/static-typing/)
TypeScript Code Generator:
[TypeScript Code Generator](https://hasura.io/learn/graphql/typescript-react-apollo/codegen/)
[Code Generator Page](https://graphql-code-generator.com/)
[How to configure GraphQL-Codegen and React Apollo Client to do work for you](https://medium.com/swlh/how-to-configure-react-apollo-client-and-graphql-codegen-to-do-work-for-you-ecb305d983aa)
[Class 21 English Facebook Video : Learning GraphQL Part 1 And Using Apollo Client With React](https://www.facebook.com/zeeshanhanif/videos/10224181188222293/)
[Class 21 English YouTube Video : Learning GraphQL Part 1 And Using Apollo Client With React](https://www.youtube.com/watch?v=T_kLAkmxUi4)
[Class 21 Urdu Facebook Video](https://www.facebook.com/zeeshanhanif/videos/10224191488999806/)
[Class 21 Urdu YouTube Video](https://www.youtube.com/watch?v=DETgbc4P2AM)
[Class 22 English Facebook Video : Learning GraphQL Part 2](https://www.facebook.com/zeeshanhanif/videos/10224218669319297/)
[Class 22 English YouTube Video : Learning GraphQL Part 2](https://www.youtube.com/watch?v=81d1-zldsoQ)
[Class 22 Urdu Facebook Video](https://www.facebook.com/zeeshanhanif/videos/10224230984267163/)
[Class 22 Urdu YouTube Video](https://www.youtube.com/watch?v=JdOj2yMdEkU)
### Bootcamp 2020 Project 8: Build a Build a Space X Client Application with React, TypeScript, Appllo Client 3, and SpaceX API using Test-Driven Development (TDD) and deployed as a PWA
[Watch first 7 mins of video](https://www.youtube.com/watch?v=7wzR4Ig5pTI)
[Space X API](http://api.spacex.land/graphql/)
[Example of a Demo App](https://github.com/imranhsayed/graphql-react-app/blob/master/GraphQl-SpaceX-Demo.gif)
[Build a GraphQL + React app with TypeScript](https://blog.logrocket.com/build-a-graphql-react-app-with-typescript/)
You are required to build your own App not just copy the Demo Apps.
Note: You can generate the TypeScript code automatically by using the Code Generator.
[Class 23 English Facebook Video : Building A project With React, TypeScript And GraphQL](https://www.facebook.com/zeeshanhanif/videos/10224252222558107/)
[Class 23 English YouTube Video : Building A project With React, TypeScript And GraphQL](https://www.youtube.com/watch?v=gavh9cTxGWI)
[Class 23 Urdu Facebook Video](https://www.facebook.com/zeeshanhanif/videos/10224260317480475/)
[Class 23 English Facebook Video](https://www.youtube.com/watch?v=oVn0oXOdS58)
## Part VI: Managing State with Redux
[Three dots ( … ) in JavaScript](https://dev.to/sagar/three-dots---in-javascript-26ci)
[Using Redux with React Hooks](https://thoughtbot.com/blog/using-redux-with-react-hooks)
[Zeeshan Code for Redux with Hooks](https://github.com/zeeshanhanif/learn-redux-with-react-hooks)
[Zeeshan Code for Redux with Redux Toolkit](https://github.com/zeeshanhanif/learn-redux-with-redux-toolkit.git)
Learn Redux Toolkit
[Quick Start](https://redux-toolkit.js.org/introduction/quick-start)
[Basic Tutorial](https://redux-toolkit.js.org/tutorials/basic-tutorial)
[Class 24 in English on Facebook : Learning Redux](https://www.facebook.com/zeeshanhanif/videos/10224286453093849/)
[Class 24 in English on YouTube : Learning Redux](https://www.youtube.com/watch?v=OO0lhveAZks)
[Redux Presentation by Aamir](https://docs.google.com/presentation/d/1AYPOmQ-5PgoCnasjZ3qMo_LCHp2jo0kxFlLHnP2dkaA/)
[Class 24 in Urdu on Facebook](https://www.facebook.com/zeeshanhanif/videos/10224301420908035/)
[Class 24 in Urdu on Facebook](https://www.youtube.com/watch?v=K7J_Ju1r2fM)
[Intermediate Tutorial: Redux Toolkit in Action](https://redux-toolkit.js.org/tutorials/intermediate-tutorial)
## Part VII: API Mocking Servers with Mirage
[Mirage Tutorial](https://miragejs.com/tutorial/intro/)
[Class 25 in English on Facebook : Learning Redux ToolKit And Mirage Mocking Server](https://www.facebook.com/zeeshanhanif/videos/10224313589932253/)
[Class 25 in English on YouTube : Learning Redux ToolKit And Mirage Mocking Server](https://www.youtube.com/watch?v=cZ5_x0BcJdQ)
[Class 25 in Urdu on Facebook](https://www.facebook.com/zeeshanhanif/videos/10224323086249655/)
[Class 25 in Urdu on YouTube](https://www.youtube.com/watch?v=ShKroZxL89k)
[Thunk API for Async](https://redux-toolkit.js.org/api/createAsyncThunk)
[Zeeshan's Code for Thunk](https://github.com/zeeshanhanif/redux-toolkit-async)
[Class 26 in English on Facebook : Learning Redux Async Thunk](https://www.facebook.com/zeeshanhanif/videos/10224378742081016/)
[Class 26 in English on YouTube : Learning Redux Async Thunk](https://www.youtube.com/watch?v=NxnELWEdh1s)
[Class 26 in Urdu on Facebook](https://www.facebook.com/zeeshanhanif/videos/10224388032073260/)
[Class 26 in Urdu on YouTube](https://www.youtube.com/watch?v=ifSriFrEvQA)
Mirage Notes:
1. Mirage runs in the browser, so there's no new terminal processes to manage
2. Returning data from Mirage is as fast and easy as writing frontend code
3. You never alter your application code to consume data from Mirage – your app thinks it's talking to a real network
### Bootcamp 2020 Project 9A: Create a Shopping Basket using React and Redux Toolkit with TypeScript
[Create a shopping basket using React and Redux Toolkit](https://developerhandbook.com/stripe/create-shopping-basket-using-redux-toolkit/)
[Project Repo](https://github.com/jpreecedev/shopping-basket-tutorial)
### Bootcamp 2020 Project 9B: Building Diaries App using React and Redux Toolkit with TypeScript
In this project we will be learning to use Redux by building an app that lets users create and manage diaries. We will be building our application using React, and we’ll set up Mirage as our API mocking server since we have not yet learned to build API's.
[We will follow this Tutorial: Setting Up Redux For Use In A Real-World Application](https://www.smashingmagazine.com/2020/08/redux-real-world-application/)
[Partial implementation, of only login and signup with react, redux and mirage by Zeeshan](https://github.com/zeeshanhanif/diaries-app-partial)
Note: In the project React Router v5 is being used we recommend that you use v6 in your project.
This Project is very important because up to now we have been doing small projects which focused on only focused limited functionality. Project 9B is the first real-world professional project. In the real-world, we will be doing these kinds of projects. Therefore, give special attention to it.
## Part VIII: Forms with Formik and Yup
[Easy forms with Formik - part I](https://softchris.github.io/books/react/formik-partI/)
[HTML Forms](https://www.w3schools.com/html/html_forms.asp)
[React Formik Playlist](https://www.youtube.com/playlist?list=PLT5Jhb7lgSBM4VCbfJAAch3G6XioJXuFX)
[Formik Installation](https://formik.org/docs/overview#installation)
[Formik Tutorial](https://formik.org/docs/tutorial)
[Formik: React Forms Video Tutorial with Yup and Material](https://www.youtube.com/watch?v=kYyaJyTLjpk&t=40m26s)
[Formik with TypeScript](https://formik.org/docs/guides/typescript)
[Zeeshan's Formik Repo](https://github.com/zeeshanhanif/react-formik)
[Class 27 in English on Facebook: Learning React Formik And Yup Part 1](https://www.facebook.com/zeeshanhanif/videos/10224414911585231/)
[Class 27 in English on YouTube : Learning React Formik And Yup Part 1](https://www.youtube.com/watch?v=v09HCJpOspE)
[Class 27 in Urdu on Facebook](https://www.facebook.com/zeeshanhanif/videos/10224423714485298/)
[Class 27 in Urdu on YouTube](https://www.youtube.com/watch?v=rwEUvkA9a7g)
[Class 28 in English on Facebook : Learning React Formik And Yup Part 2](https://www.facebook.com/zeeshanhanif/videos/10224443277214354/)
[Class 28 in Engish on YouTube : Learning React Formik And Yup Part 2](https://www.youtube.com/watch?v=wi7a9TqQt7E)
[Class 28 in Urdu on Facebook](https://www.facebook.com/zeeshanhanif/videos/10224452812932741/)
[Class 28 in Urdu on YouTube](https://www.youtube.com/watch?v=nDfCBV5Jq-I)
### Bootcamp Project 10: Build a Signup Form and Multi-Step Form with Formik, Yup, and Material UI using TypeScript
[Working With React, Formik and Yup](https://webomnizz.com/working-with-react-formik-and-yup/)
[React Multi-Step Form Tutorial: Using Formik, Yup and material-ui](https://www.youtube.com/watch?v=l3NEC4McW3g)
## Part IX: Component Driven Development with Storybook and Bit
Component Driven Development (CDD)
[A Guide to Component Driven Development (CDD)](https://itnext.io/a-guide-to-component-driven-development-cdd-1516f65d8b55)
[Component Driven Development (CDD) In React](https://whatjackhasmade.co.uk/component-driven-development)
Storybook 6
[Building React Apps With Storybook 6](https://www.smashingmagazine.com/2020/09/building-react-apps-storybook/)
[Introduction to Storybook for React](https://storybook.js.org/docs/react/get-started/introduction)
[Supercharge Storybook 6](https://storybook.js.org/addons)
[Decorators](https://storybook.js.org/docs/react/writing-stories/decorators)
[Storybook 6 Announcement](https://medium.com/storybookjs/storybook-6-0-1e14a2071000)
[TypeScript Config](https://storybook.js.org/docs/configurations/typescript-config/)
[Reference Learning Material](https://www.learnstorybook.com/intro-to-storybook/)
[Class 29 in English on Facebook : Learning Component Driven Development Part 1 With Storybook](https://www.facebook.com/zeeshanhanif/videos/10224477793477239/)
[Class 29 in English on YouTube : Learning Component Driven Development Part 1 With Storybook](https://www.youtube.com/watch?v=ors4hsRJ8uM)
[Class 29 in Urdu on Facebook](https://www.facebook.com/zeeshanhanif/videos/10224486726500559/)
[Class 29 in Urdu on YouTube](https://www.youtube.com/watch?v=aha6zRfEJMs)
Bit.dev
[Bit for React](https://docs.bit.dev/docs/tutorials/bit-react-tutorial)
[How to Use React and Typescript in Bit.dev](https://medium.com/@vagacoder/how-to-use-react-and-typescript-in-bit-dev-89a1260d2d9f)
Using Storybook and Bit.dev Together
[How is bit.dev different from Storybook?](https://blog.bitsrc.io/how-is-bit-dev-different-from-storybook-892b373733bd)
Design Systems for Developers
[Design Systems for Developers](https://www.learnstorybook.com/design-systems-for-developers/)
[Class 30 in English on Facebook : Learning Component Driven Development Part 2 With Bit And Design System](https://www.facebook.com/zeeshanhanif/videos/10224504982876957/)
[Class 30 in English on YouTube: Learning Component Driven Development Part 2 With Bit And Design System](https://www.youtube.com/watch?v=QcKLURv-npc)
[Class 30 in Urdu on Facebook](https://www.facebook.com/zeeshanhanif/videos/10224514496194784/)
[Class 30 in Urdu on YouTube](https://www.youtube.com/watch?v=f6XpLs9hnK0)
### Bootcamp Project 11: Build a Taskbox React Component in TypeScript using Storybook and Publishing it on Bit
Build a Taskbox, a task management UI (similar to Asana), complete with multiple item types and states. We'll go from building simple UI components to assembling screens. Each chapter the the tutorial illustrates a different aspect of developing UIs with Storybook.
[Taskbox with Storybook for React tutorial](https://www.learnstorybook.com/intro-to-storybook/react/en/get-started/)
## Part X: JAMstack Serverless and Headless CMS
[Learn JAMstack Serverless in Baby Steps](https://github.com/panacloud-modern-global-apps/jamstack-serverless)
[Our JAMstack Textbook for Bootcamp 2020 Read Chapter 1](https://www.apress.com/gp/book/9781484261767)
[Class 31 in English on Facebook : Learning Modern Application Development With JAMStack Serverless](https://www.facebook.com/zeeshanhanif/videos/10224537825818010/)
[Class 31 in English on YouTube : Learning Modern Application Development With JAMStack Serverless](https://www.youtube.com/watch?v=deNpUAzAEH0)
[Class 31 in Urdu on Facebook](https://www.facebook.com/zeeshanhanif/videos/10224546245988509/)
[Class 31 in Urdu on YouTube](https://www.youtube.com/watch?v=sP2Amlw44fk)
[Class 32 in English on Facebook : Learning JAMStack Serverless - Gatsby Part 1](https://www.facebook.com/zeeshanhanif/videos/10224565563991447/)
[Class 32 in English on YouTube : Learning JAMStack Serverless - Gatsby Part 1](https://www.youtube.com/watch?v=UP3-m4QigN4)
[Class 32 in Urdu on Facebook](https://www.facebook.com/zeeshanhanif/videos/10224572927375527)
[Class 32 in Urdu on YouTube](https://www.youtube.com/watch?v=r-G-i5spHGg)
[Class 33 in English on Facebook :Learning JAMStack Serverless - Gatsby Part 2](https://www.facebook.com/zeeshanhanif/videos/10224601577451761/)
[Class 33 in English on YouTube :Learning JAMStack Serverless - Gatsby Part 2](https://www.youtube.com/watch?v=21dnsmxRRYM)
[Class 33 in Urdu on Facebook](https://www.facebook.com/zeeshanhanif/videos/10224605671834118)
[Class 33 in Urdu on YouTube](https://www.youtube.com/watch?v=rdcqnWJK2Mk)
[Class 34 in English on Facebook : Learning JAMStack Serverless - Gatsby With Cntentful](https://www.facebook.com/zeeshanhanif/videos/10224621671314095/)
[Class 34 in English on YouTube : Learning JAMStack Serverless - Gatsby With Cntentful](https://www.youtube.com/watch?v=5bjdsQ95Z44)
[Class 34 in Urdu on Facebook](https://www.facebook.com/zeeshanhanif/videos/10224632582426866/)
[Class 34 in Urdu on YouTube](https://www.youtube.com/watch?v=Q-QiqHBKQjQ)
[Class 35 in English on Facebook : Learning JAMStack Serverless - Gatsby With Netlify Serverless Functions Part 1](https://www.facebook.com/zeeshanhanif/videos/10224657363006365/)
[Class 35 in English on YouTube : Learning JAMStack Serverless - Gatsby With Netlify Serverless Functions Part 1](https://www.youtube.com/watch?v=8PxEZjYUKpc)
[Class 35 in Urdu on Facebook](https://www.facebook.com/zeeshanhanif/videos/10224666332310592/)
[Class 35 in Urdu on YouTube](https://www.youtube.com/watch?v=uMDyvor_k9k)
[Class 36 in English on Facebook : Learning JAMStack Serverless - Gatsby With Netlify Serverless Functions Part 2 And Intro to FaunaDB NoSQL database](https://www.facebook.com/zeeshanhanif/videos/10224681883899372/)
[Class 36 in English on YouTube : Learning JAMStack Serverless - Gatsby With Netlify Serverless Functions Part 2 And Intro to FaunaDB NoSQL database](https://www.youtube.com/watch?v=URXA_2HV61s)
[Class 36 in Urdu on Facebook](https://www.facebook.com/zeeshanhanif/videos/10224690706039920/)
[Class 36 in Urdu on YouTube](https://www.youtube.com/watch?v=ysEQiXY9ozM)
[Class 37 in English on Facebook : Learning JAMStack Serverless - Gatsby, Netlify Serverless Functions And FaunaDB](https://www.facebook.com/zeeshanhanif/videos/10224715900029754/)
[Class 37 in English on YouTube : Learning JAMStack Serverless - Gatsby, Netlify Serverless Functions And FaunaDB](https://www.youtube.com/watch?v=3B_vkzD0kRI)
[Class 37 in Urdu on Facebook](https://www.facebook.com/zeeshanhanif/videos/10224726664858868/)
[Class 37 in Urdu on YouTube](https://www.youtube.com/watch?v=2mb2IFVL4Jw)
[Class 38 in English on Facebook : Learning JAMStack Serverless - Gatsby, GraphQL, Netlify Serverless Functions And FaunaDB](https://www.facebook.com/zeeshanhanif/videos/10224741314065089/)
[Class 38 in English on YouTube : Learning JAMStack Serverless - Gatsby, GraphQL, Netlify Serverless Functions And FaunaDB](https://www.youtube.com/watch?v=ZXzxL4LDQs4)
[Class 38 in Urdu on Facebook](https://www.facebook.com/zeeshanhanif/videos/10224750968586446/)
[Class 38 in Urdu on YouTube](https://www.youtube.com/watch?v=tEpOHCrR9Z8)
[Class 39 in English on Facebook - Project 12C Todo App](https://www.facebook.com/zeeshanhanif/videos/10224773799597207/)
[Class 39 in English on YouTube - Project 12C Todo App](https://www.youtube.com/watch?v=jOmFJzafRb8)
[Class 39 in Urdu on Facebook - Project 12C Todo App](https://www.facebook.com/zeeshanhanif/videos/10224784025892858/)
[Class 39 in Urdu on YouTube - Project 12C Todo App](https://www.youtube.com/watch?v=PUYydBwrgC0)
[Project 12C Todo App by Adil](https://github.com/adil-innovation-lab/JAMstackTodo)
[Class 40 in English on Facebook - Project 12D Bookmark App](https://www.facebook.com/zeeshanhanif/videos/10224799074469063/)
[Class 40 in English on YouTube - Project 12D Bookmark App](https://www.youtube.com/watch?v=FPH7NYrdBgY)
[Project 12D Bookmark App by Daniyal](https://github.com/daniyalnagori/bookmarking-app)
[Class 40 in Urdu on Facebook - Project 12D Bookmark App](https://www.facebook.com/zeeshanhanif/videos/10224807488559410/)
[Class 40 in Urdu on YouTube - Project 12D Bookmark App](https://www.youtube.com/watch?v=fAQG0bN5h6s)
[Class 41 in English on Facebook - Project 12E Virtual Lolly App](https://www.facebook.com/zeeshanhanif/videos/10224830783101759/)
[Class 41 in English on YouTube - Project 12E Virtual Lolly App](https://www.youtube.com/watch?v=zlhY7bRYR1A)
[Zeeshan's Virtual Lolly App Code Repo](https://github.com/zeeshanhanif/gatsby-virtual-lolly)
[Class 41 in Urdu on Facebook - Project 12E Virtual Lolly App](https://www.facebook.com/zeeshanhanif/videos/10224839747005851/)
[Class 41 in Urdu on YouTube - Project 12E Virtual Lolly App](https://www.youtube.com/watch?v=CJ42Nw5Vksk)
### Bootcamp 2020 Project 12A: Build a Blog site in Gatsby.js and Contentful with TypeScript and Deploy on Netlify
[This Tutorial will help you in building the Blog site](https://ibaslogic.com/blog/gatsby-with-contentful-cms/)
[Demo of Blog site we want to build](https://gatsby-contentful-blogsite.netlify.app/blog/)
[Tutorial](https://www.youtube.com/watch?v=fY3mBJSDA44)
[Watch Video: Episode 1](https://www.youtube.com/watch?v=fY3mBJSDA44)
[Watch Video: Episode 2](https://www.youtube.com/watch?v=IaNU4R3ck_k)
[Watch Video: Episode 3](https://www.youtube.com/watch?v=L9Uv_bLSaP4)
[Watch Video: Episode 4](https://www.youtube.com/watch?v=NkFz2psDupw)
[Watch Video: Episode 5](https://www.youtube.com/watch?v=A8Y1-GRmxFw)
[Watch Video: Episode 6](https://www.youtube.com/watch?v=ONg1gpx0zlA)
We want GitHub Actions workflow that builds a static blog site and deploys on Surge. Our content is hosted on Contentful. We would like to rebuild my static site on a normal repository push event, and also via the Contentful webhook whenever our content is updated. [Reference 1](https://github.community/t/is-it-possible-to-trigger-a-single-workflow-in-github-actions-from-two-different-events/16120) [Reference 2](https://medium.com/@flawyte/zeit-now-github-action-contentful-webhook-6a697d2053cd)
Important Challenge Requirement:
We want you to build this blog site with gated content, available only for logged-in users. However we still want the blogs to be indexed for SEO reasons, and would like visitors (not logged in) have access to 3 free blogs (just like Medium), after that we want to user to get a "limited" access to each page (maybe 20 lines or so), just like news website sometimes do. The logged-in users will have unlimited access to all the blogs. We will use [Firebase authentication](https://firebase.google.com/docs/auth) for user logins.
### Bootcamp 2020 Project 12B: Building Serverless CRUD apps with Netlify Functions and FaunaDB
[Project Article](https://www.netlify.com/blog/2018/07/09/building-serverless-crud-apps-with-netlify-functions-faunadb/)
[Updated Code Repo](https://github.com/netlify/netlify-faunadb-example)
### Bootcamp 2020 Project 12C: Building a Serverless JAMStack Todo app with Netlify, Gatsby, GraphQL, and FaunaDB
[Project Videos](https://egghead.io/playlists/building-a-serverless-jamstack-todo-app-with-netlify-gatsby-graphql-and-faunadb-53bb)
[Project 12C Todo App by Adil](https://github.com/adil-innovation-lab/JAMstackTodo)
### Bootcamp 2020 Project 12D: Create A Bookmarking Application With FaunaDB, Netlify And Gatsby
[Project Article](https://www.smashingmagazine.com/2019/10/bookmarking-application-faunadb-netlify-11ty/)
Note: In the above article the project is done using 11ty however you are required to do it in Gatsby.js with TypeScript
### Bootcamp 2020 Project 12E: Virtual Lolly using Gatsby, Netlify, FaunaDB, Formik, and Storybook 6
[Project Article](https://css-tricks.com/static-first-pre-generated-jamstack-sites-with-serverless-rendering-as-a-fallback/)
[Project Repo](https://github.com/philhawksworth/virtual-lolly)
[Project Demo](https://vlolly.net/)
[Visual Testing with Storybook in Gatsby](https://www.gatsbyjs.com/docs/visual-testing-with-storybook/)
[Forms with Formik — Gatsby — Netlify](https://medium.com/@thaotruong203/forms-with-formik-gatsby-netlify-11992b7ece99)
Note: In the above article the project is done using 11ty however you are required to do it in Gatsby.js with TypeScript. For developing the form you are required to use Formik. For developing the React Components you will use Storybook 6.
### Bootcamp 2020 Extra Project 12F: Build a Macro Compliance Tracker in Next and MongoDB Atlas with TypeScript and Deploy on Vercel
[Building Modern Applications with Next.js and MongoDB](https://developer.mongodb.com/how-to/nextjs-building-modern-applications)
### IMPORTANT NOTE
### All Bootcamp 2020 participants who have completed 12 projects and want to work with Panacloud, please send a Whatsapp message to Zia Khan at 92-300-826-3374 after completing 12 projects.
## Part XI: Jamstack Ecommerce: Stripe, Shopify, and Snipcart
[JAMstack Ecommerce Learning Project Repo (Ecommerce Projects 00 - 06)](https://github.com/panacloud-modern-global-apps/jamstack-ecommerce)
[Class 42 in English on Facebook: Intro To Ecommerce](https://www.facebook.com/zeeshanhanif/videos/10224856174736534/)
[Class 42 in English on YouTube : Intro To Ecommerce](https://www.youtube.com/watch?v=u3KOcuxvb5w)
[Class 42 in Urdu on facebook](https://www.facebook.com/zeeshanhanif/videos/10224865871098937/)
[Class 42 in Urdu on YouTube](https://www.youtube.com/watch?v=c11-JmxKJfc)
[Class 43 Building Project 00 Video in English on Facebook: Payment Gateway Using Stripe Checkout With Gatsby](https://www.facebook.com/zeeshanhanif/videos/10224888744070747/)
[Class 43 Building Project 00 Video in English on YouTube : Payment Gateway Using Stripe Checkout With Gatsby](https://www.youtube.com/watch?v=cextuS_GgVI)
[Class 43 Building Project 00 Video in Urdu on Facebook](https://www.facebook.com/zeeshanhanif/videos/10224899533580478/)
[Class 43 Building Project 00 Video in Urdu on YouTube](https://www.youtube.com/watch?v=Jhg8URgZH-s)
[Class 44 Building Project 01 Video in English on Facebook : Payment Gateway Using Stripe API With Gatsby](https://www.facebook.com/zeeshanhanif/videos/10224918482854198/)
[Class 44 Building Project 01 Video in English on YouTube : Payment Gateway Using Stripe API With Gatsby](https://www.youtube.com/watch?v=tamOJxju7fg)
[Class 44 Building Project 01 Video in Urdu on Facebook](https://www.facebook.com/zeeshanhanif/videos/10224927228272828/)
[Class 44 Building Project 01 Video in Urdu on YouTube](https://www.youtube.com/watch?v=vzeLykEV87w)
[Class 45 Buidling Project 02 Video in English on Facebook : Building Shopping Cart using Snapcart ](https://www.facebook.com/zeeshanhanif/videos/10224954863883701/)
[Class 45 Buidling Project 02 Video in English on YouTube : Building Shopping Cart using Snapcart ](https://www.youtube.com/watch?v=0APfFRm2hK8)
[Class 45 Building Project 02 Video in Urdu on Facebook](https://www.facebook.com/zeeshanhanif/videos/10224961217042526/)
[Class 45 Building Project 02 Video in Urdu on YouTube](https://www.youtube.com/watch?v=vzeLykEV87w&t=6s)
[Class 46 Buiding Project 03 Video in English on Facebook : USE-SHOPPING-CART Open Source Shopping Cart](https://www.facebook.com/zeeshanhanif/videos/10224984117135014/)
[Class 46 Building Project 03 Video in English on YouTube : USE-SHOPPING-CART Open Source Shopping Cart](https://www.youtube.com/watch?v=tYGlZI4OPIs)
[Class 46 Building Project 03 Video in Urdu on Facebook](https://www.facebook.com/zeeshanhanif/videos/10224993742615645/)
[Class 46 Building Project 03 Video in Urdu on YouTube](https://www.youtube.com/watch?v=gsfKhhB9_0M)
[Class 47 Building Project 04 Video in English on Facebook : Headless Ecommerce With Shopify And Gatsby Part 1](https://www.facebook.com/zeeshanhanif/videos/10225017709934813/)
[Class 47 Building Project 04 Video in English on YouTube : Headless Ecommerce With Shopify And Gatsby Part 1](https://www.youtube.com/watch?v=Unz_REIRjpg)
[Class 47 Building Project 04 Video in Urdu on Facebook](https://www.facebook.com/zeeshanhanif/videos/10225025711294842/)
[Class 47 Building Project 04 Video in Urdu on YouTube](https://www.youtube.com/watch?v=tNcpbyt0a6g)
[Class 48 Building Project 04 Part 2 Video in English on Facebook : Headless Ecommerce With Shopify And Gatsby Part 2](https://www.facebook.com/zeeshanhanif/videos/10225072595506918)
[Class 48 Building Project 04 Part 2 Video in English on YouTube : Headless Ecommerce With Shopify And Gatsby Part 2](https://www.youtube.com/watch?v=Qn16dqu7jKc)
[Class 48 Building Project 04 Part 2 Video in Urdu on Facebook](https://www.facebook.com/zeeshanhanif/videos/10225081196721943)
[Class 48 Building Project 04 Part 2 Video in Urdu on YouTube](https://www.youtube.com/watch?v=mz2ChgziBBk)
[Class 49 Building Project 04 Part 3 Video in English on Facebook : Headless Ecommerce With Shopify And Gatsby Part 3](https://www.facebook.com/zeeshanhanif/videos/10225098638837985)
[Class 49 Building Project 04 Part 3 Video in English on YouTube : Headless Ecommerce With Shopify And Gatsby Part 3](https://www.youtube.com/watch?v=xeAw__ofxtc)
[Class 49 Building Project 04 Part 3 Video in Urdu on Facebook](https://www.facebook.com/zeeshanhanif/videos/10225107438537972)
[Class 49 Building Project 04 Part 3 Video in Urdu on YouTube](https://www.youtube.com/watch?v=-grjtMNprWI)
[Class 50 Building Project 05 and 06 Video in English on Facebook : Payment Gateway Using 2Checkout and PayFast](https://www.facebook.com/zeeshanhanif/videos/10225129468128698)
[Class 50 Building Project 05 and 06 Video in English on YouTube : Payment Gateway Using 2Checkout and PayFast](https://www.youtube.com/watch?v=dKHANO9U6IU)
[Class 50 Building Project 05 and 06 Video in Urdu on Facebook](https://www.facebook.com/zeeshanhanif/videos/10225139989951737)
[Class 50 Building Project 05 and 06 Video in Urdu on YouTube](https://www.youtube.com/watch?v=5BK_R0MBL-c)
[Best Practices For E-Commerce UI Design](https://www.smashingmagazine.com/2020/11/best-practices-ecommerce-ui-design/)
[Ecommerce Shop Landing Page Design](https://www.uplabs.com/posts/e-commerce-shop-landing-page)
## Part XII: Full Stack Serverless with AWS Cloud Development Kit - CDK
Get AWS Account
[AWS Free Tier](https://aws.amazon.com/free/)
Note: For AWS Free Tier you will need a credit or debit card. The easiest way for Pakistani students is to open a bank account in Meezan Bank. Open a Meezan Aasan Account if you have no earning proof. Meezan Bank will charge Rs. 1100 for ATM Debit Card and there is a requirement of Rs. 100 minimum deposit. The card will be delivered in a few weeks. Our students have reported that this Debit card works with AWS.
Now you can create virtual VISA Debit card through [NayaPay App](https://www.nayapay.com/) which can be used to create AWS/GCP/Azure account. This is good NEWS For those students who find it difficult to create physical VISA/Master Card from Banks; this is a great option to avail.
Base Technology Stack:
1. Frontend: React with Typescipt and Storybook
2. Infrastructure As Code and Automation Tools: AWS CDK
3. Integration: AWS EventBridge
4. Computing: AWS Lambda
5. Programing Language: TypeScript
6. Orchestration: AWS Step Functions
7. CDN: Amazon CloudFront
8. Static Content: Amazon S3
9. API Front End: GraphQL using AWS AppSync
10. Database: AWS DynamoDB, AWS Arora Serverless, and AWS Neptune
11. Container Management: Fargate
12. Observability: AWS X-Ray
13. IDE: VS Code
14. CI/CD: Github Actions
15. Version Control: GitHub
[Learning Full Stack Serverless with CDK Repo](https://github.com/panacloud-modern-global-apps/full-stack-serverless-cdk)
[Class 51 Video in English on Facebook : Intro to AWS Technologies With Cloud Development Kit (CDK)](https://www.facebook.com/zeeshanhanif/videos/10225155745305611)
[Class 51 Video in English on YouTube : Intro to AWS Technologies With Cloud Development Kit (CDK)](https://www.youtube.com/watch?v=bnTCwunqhMc)
[Class 51 Video in Urdu on Facebook](https://www.facebook.com/zeeshanhanif/videos/10225164884934096)
[Class 51 Video in Urdu on YouTube](https://www.youtube.com/watch?v=JhFiu-krGZI)
[Class 52 Video in English on Facebook : Project Setup And Stack Deployment With S3 Bucket](https://www.facebook.com/zeeshanhanif/videos/10225191381716499)
[Class 52 Video in English on YouTube : Project Setup And Stack Deployment With S3 Bucket](https://www.youtube.com/watch?v=UpuVx8c0-lA)
[Class 52 Video in Urdu on Facebook](https://www.facebook.com/zeeshanhanif/videos/10225203759985948)
[Class 52 Video in Urdu on YouTube](https://www.youtube.com/watch?v=xWF-LCTnSy4)
[Class 53 Video in English on Facebook : Deploying Serverless Lambda Function And Website Deployment With Cloudfront](https://www.facebook.com/zeeshanhanif/videos/10225216995316823)
[Class 53 Video in English on YouTube : Deploying Serverless Lambda Function And Website Deployment With Cloudfront](https://www.youtube.com/watch?v=JpLNn3_GbIc)
[Class 53 Video in Urdu on Facebook](https://www.facebook.com/zeeshanhanif/videos/10225226138185389)
[Class 53 Video in Urdu on YouTube](https://www.youtube.com/watch?v=IJBowlCR7fk)
[Class 54 Video in English on Facebook : QraphQL API with AWS AppSync](https://www.facebook.com/zeeshanhanif/videos/10225249824337528)
[Class 54 Video in English on YouTube : QraphQL API with AWS AppSync](https://www.youtube.com/watch?v=iJj32I9A_Nc)
[Class 54 Video in Urdu on Facebook](https://www.facebook.com/zeeshanhanif/videos/10225258717359848)
[Class 54 Video in Urdu on YouTube](https://www.youtube.com/watch?v=mzl8tQzygOA)
[Class 55 Video in English on Facebook : AWS AppSync And AWS DynamoDB](https://www.facebook.com/zeeshanhanif/videos/10225276797051829)
[Class 55 Video in English on YouTube : AWS AppSync And AWS DynamoDB](https://www.youtube.com/watch?v=lbkrSIM_x_Y)
[Class 55 Video in Urdu on Facebook](https://www.facebook.com/zeeshanhanif/videos/10225286889784141)
[Class 55 Video in Urdu on YouTube](https://www.youtube.com/watch?v=FVHkJRo4TdI)
[Class 56 Video in English on Facebook : AWS Amplify And AWS Appsync ](https://www.facebook.com/zeeshanhanif/videos/10225312535665272)
[Class 56 Video in English on YouTube : AWS Amplify And AWS Appsync](https://www.youtube.com/watch?v=6hBaplgwE8s)
[Class 56 Video in Urdu on Facebook](https://www.facebook.com/zeeshanhanif/videos/10225319812407186)
[Class 56 Video in Urdu on YouTube](https://www.youtube.com/watch?v=paHnI88zXSQ)
[Class 57 Video in English on Facebook : AWS AppSync With DynamoDB As A Datasource](https://www.facebook.com/zeeshanhanif/videos/10225337767976064)
[Class 57 Video in English on YouTube : AWS AppSync With DynamoDB As A Datasource](https://www.youtube.com/watch?v=DkMpDT-gsMk)
[Class 57 Video in Urdu on Facebook](https://www.facebook.com/zeeshanhanif/videos/10225347091729152)
[Class 57 Video in Urdu on YouTube](https://www.youtube.com/watch?v=lpKaoZ4yAiE)
[Class 58 Video in English on Facebook : AWS Cognito Part 1](https://www.facebook.com/zeeshanhanif/videos/10225372583806438)
[Class 58 Video in English on YouTube : AWS Cognito Part 1](https://www.youtube.com/watch?v=vC33wJ6DfjQ)
[Class 58 Video in Urdu on Facebook](https://www.facebook.com/zeeshanhanif/videos/10225381665553476)
[Class 58 Video in Urdu on YouTube](https://www.youtube.com/watch?v=BXIWIUkl2tM)
[Class 59 Video in English on Facebook : AWS Cognito Part 2](https://www.facebook.com/zeeshanhanif/videos/10225399426157480)
[Class 59 Video in English on YouTube : AWS Cognito Part 2](https://www.youtube.com/watch?v=2y0QrhvRMew)
[Class 59 Video in Urdu on Facebook](https://www.facebook.com/zeeshanhanif/videos/10225407400396831)
[Class 59 Video in Urdu on YouTube](https://www.youtube.com/watch?v=Qdk95pExTaY)
[Class 60 Video in English on Facebook : AWS IAM Policies And Secret Manager Part 1](https://www.facebook.com/zeeshanhanif/videos/10225434631997604)
[Class 60 Video in English on YouTube : AWS IAM Policies And Secret Manager Part 1](https://www.youtube.com/watch?v=geV-TV7kTgE)
[Class 60 Video in Urdu on Facebook](https://www.facebook.com/zeeshanhanif/videos/10225444019552287)
[Class 60 Video in Urdu on YouTube](https://www.youtube.com/watch?v=AHam583oT7c)
[Class 61 Video in English on Facebook : AWS Secret Manager Part 2](https://www.facebook.com/zeeshanhanif/videos/10225464556865707)
[Class 61 Video in English on YouTube : AWS Secret Manager Part 2](https://www.youtube.com/watch?v=J7C5nHmUDD4)
[Class 61 Video in Urdu on Facebook](https://www.facebook.com/zeeshanhanif/videos/10225474211267061)
[Class 61 Video in Urdu on YouTube](https://www.youtube.com/watch?v=9t_mhAn108Q)
[Class 62 Video in English on Facebook : AWS CI/CD Pipeline](https://www.facebook.com/zeeshanhanif/videos/10225509036897680)
[Class 62 Video in English on YouTube : AWS CI/CD Pipeline](https://www.youtube.com/watch?v=7IwnB6yT0lU)
[Class 62 Video in Urdu on Facebook](https://www.facebook.com/zeeshanhanif/videos/10225524262878320)
[Class 62 Video in Urdu on YouTube](https://www.youtube.com/watch?v=JTDRS1u3924)
[Class 63 Video in English on Facebook : AWS EventBridge ](https://www.facebook.com/zeeshanhanif/videos/10225545010436996)
[Class 63 Video in English on YouTube : AWS EventBridge ](https://www.youtube.com/watch?v=jrUDwrgBCqg)
[Class 63 Video in Urdu on Facebook](https://www.facebook.com/zeeshanhanif/videos/10225564742050274)
[Class 63 Video in Urdu on YouTube](https://www.youtube.com/watch?v=1y4REyORf1U)
[Class 64 Video in English on Facebook : AWS Simple Email Service](https://www.facebook.com/zeeshanhanif/videos/10225576641907763)
[Class 64 Video in English on YouTube : AWS Simple Email Service](https://www.youtube.com/watch?v=CPFYfPbSTUo)
[Class 64 Video in Urdu on Facebook](https://www.facebook.com/zeeshanhanif/videos/10225585267523398)
[Class 64 Video in Urdu on YouTube](https://www.youtube.com/watch?v=jnym0CaBgkk)
[Class 65 Video in English on Facebook : AWS Simple Notification Service and Simple Queue Service](https://www.facebook.com/zeeshanhanif/videos/10225602951765493)
[Class 65 Video in English on YouTube : AWS Simple Notification Service and Simple Queue Service](https://www.youtube.com/watch?v=pHTtY_o-WO0)
[Class 65 Video in Urdu on Facebook](https://www.facebook.com/zeeshanhanif/videos/10225612202036744)
[Class 65 Video in Urdu on YouTube](https://www.youtube.com/watch?v=BHDnDA1rzZY)
[Class 66 Video in English on Facebook : AWS Pinpoint ](https://www.facebook.com/zeeshanhanif/videos/10225636344840299)
[Class 66 Video in English on YouTube : AWS Pinpoint ](https://www.youtube.com/watch?v=C46KqvvImnA)
[Class 66 Video in Urdu on Facebook](https://www.facebook.com/zeeshanhanif/videos/10225650154145523)
[Class 66 Video in Urdu on YouTube](https://www.youtube.com/watch?v=MHgNzf2OAPc)
[Class 67 Video in English on Facebook : AWS Step Functions ](https://www.facebook.com/zeeshanhanif/videos/10225683635182528)
[Class 67 Video in English on YouTube : AWS Step Functions ](https://www.youtube.com/watch?v=0gk3dYhwuJc)
[Class 67 Video in Urdu on Facebook](https://www.facebook.com/zeeshanhanif/videos/10225695152750460)
[Class 67 Video in Urdu on YouTube](https://www.youtube.com/watch?v=EQT1nJiSHNI)
[Class 68 Video in English on Facebook : AWS Cloud Watch ](https://www.facebook.com/zeeshanhanif/videos/10225731558780588)
[Class 68 Video in English on YouTube : AWS Cloud Watch ](https://www.youtube.com/watch?v=R5ChiA-o5QY)
[Class 68 Video in Urdu on Facebook](https://www.facebook.com/zeeshanhanif/videos/10225741135820008)
[Class 68 Video in Urdu on YouTube](https://www.youtube.com/watch?v=c7hJn9KxqDE)
[Class 69 Video in English on Facebook : AWS Timestream DB and Visualization with Grafana ](https://www.facebook.com/zeeshanhanif/videos/10225763251372883)
[Class 69 Video in English on YouTube : AWS Timestream DB and Visualization with Grafana ](https://www.youtube.com/watch?v=6kwKtE8d9dc)
[Class 69 Video in Urdu on Facebook](https://www.facebook.com/zeeshanhanif/videos/10225811165650710)
[Class 69 Video in Urdu on YouTube](https://www.youtube.com/watch?v=EgYiEO8P704)
[Class 70 Video in English on Facebook: AWS X-Ray](https://www.facebook.com/zeeshanhanif/videos/10225802789761318)
[Class 70 Video in English on YouTube : AWS X-Ray](https://www.youtube.com/watch?v=kUdnlL5Krhk)
[Class 70 Video in Urdu on YouTube](https://www.facebook.com/zeeshanhanif/videos/10225839661283083)
[Class 70 Video in Urdu on YouTube](https://www.youtube.com/watch?v=i5QTUdZBNO0)
[Class 71 Video in English on Facebook : AWS Lambda Layers](https://www.facebook.com/zeeshanhanif/videos/10225831683963655)
[Class 71 Video in English on YouTube : AWS Lambda Layers](https://www.youtube.com/watch?v=HrvCZGKI9SE)
[Class 71 Video in Urdu on Facebook](https://www.facebook.com/zeeshanhanif/videos/10225874842762598)
[Class 71 Video in Urdu on YouTube](https://www.youtube.com/watch?v=fa6HHSD5Qfo)
[Class 72 Video in English on Facebook : AWS Lambda Edge and Lambda Destination](https://www.facebook.com/zeeshanhanif/videos/10225866783121112)
[Class 72 Video in English on YouTube : AWS Lambda Edge and Lambda Destination](https://www.youtube.com/watch?v=onx7b32jRcM)
[Class 72 Video in Urdu on Facebook](https://www.facebook.com/zeeshanhanif/videos/10225904417381945)
[Class 72 Video in Urdu on Facebook](https://www.youtube.com/watch?v=LfhS4kuJTaI)
[Class 73 Video in English on Facebook : Docker Containers and AWS Lambda Container Image ](https://www.facebook.com/zeeshanhanif/videos/10225893868638233/)
[Class 73 Video in English on YouTube : Docker Containers and AWS Lambda Container Image ](https://www.youtube.com/watch?v=MA3nAbT-5cQ)
[Class 73 Video in Urdu on Facebook](https://www.facebook.com/zeeshanhanif/videos/10225939772465800)
[Class 73 Video in Urdu on YouTube](https://www.youtube.com/watch?v=W5GbzrWs6gw)
[Class 74 Video in English on Facebook : AWS DynamoDB Streams and Constructs as Cloud components](https://www.facebook.com/zeeshanhanif/videos/10225932463123071)
[Class 74 Video in English on YouTube : AWS DynamoDB Streams and Constructs as Cloud components](https://www.youtube.com/watch?v=LCY9ssPMWYY)
[Class 74 Video in Urdu on Facebook](https://www.facebook.com/zeeshanhanif/videos/10225965758835443)
[Class 74 Video in Urdu on YouTube](https://www.youtube.com/watch?v=v9QkNInvTz0)
[Class 75 Video in English on Facebook : CDK Multiple Stacks and AWS Route 53 ](https://www.facebook.com/zeeshanhanif/videos/10225959184311084)
[Class 75 Video in English on YouTube : CDK Multiple Stacks and AWS Route 53 ](https://www.youtube.com/watch?v=9qvCPzMOOrk)
[Class 75 Video in Urdu on Facebook](https://www.facebook.com/zeeshanhanif/videos/10226003175610839)
[Class 75 Video in Urdu on YouTube](https://www.youtube.com/watch?v=IuGThHadaj0)
[Class 76 Video in English on Facebook : AWS Elastic File Storage and Testing CDK ](https://www.facebook.com/zeeshanhanif/videos/10226021607111615)
[Class 76 Video in English on YouTube : AWS Elastic File Storage and Testing CDK ](https://www.youtube.com/watch?v=jTOu3Fd0CHs)
[Class 76 Video in Urdu on Facebook](https://www.facebook.com/zeeshanhanif/videos/10226030936944855)
[Class 76 Video in Urdu on YouTube](https://www.youtube.com/watch?v=EcLqSHWo1Sw)
[Class 77 Video in English on Facebook : Serverless Event-Driven Architecture ](https://www.facebook.com/zeeshanhanif/videos/10226050958845390)
[Class 77 Video in English on YouTube : Serverless Event-Driven Architecture ](https://www.youtube.com/watch?v=wN9-XYyecPI)
[Class 77 Video in Urdu on Facebook](https://www.facebook.com/zeeshanhanif/videos/10226060184996038)
[Class 77 Video in Urdu on YouTube](https://www.youtube.com/watch?v=JCu31cqUrPM)
[Class 78 Video in English on Facebook : CDK Design Patterns ](https://www.facebook.com/zeeshanhanif/videos/10226081386086052)
[Class 78 Video in English on YouTube : CDK Design Patterns ](https://www.youtube.com/watch?v=MUDYeQ2HSLs)
[Class 78 Video in Urdu on Facebook](https://www.facebook.com/zeeshanhanif/videos/10226089243162474)
[Class 78 Video in Urdu on YouTube](https://www.youtube.com/watch?v=OgvmM1f-OjI)
[Class 79 Video in English on Facebook : AWS Aurora Serverless and Data API ](https://www.facebook.com/zeeshanhanif/videos/10226116722369437)
[Class 79 Video in English on YouTube : AWS Aurora Serverless and Data API ](https://www.youtube.com/watch?v=NC_az7syauM)
[Class 79 Video in Urdu on Facebook](https://www.facebook.com/zeeshanhanif/videos/10226125216901795)
[Class 79 Video in Urdu on YouTube](https://www.youtube.com/watch?v=OGS5Qr9TmsM)
[Class 80 Video in English on Facebook : AWS VPC And AWS Neptune Graph Database ](https://www.facebook.com/zeeshanhanif/videos/10226147281253390)
[Class 80 Video in English on YouTube : AWS VPC And AWS Neptune Graph Database](https://www.youtube.com/watch?v=-1Prdv-hhG4)
[Class 80 Video in Urdu on Facebook](https://www.facebook.com/zeeshanhanif/videos/10226153456967779)
[Class 80 Video in Urdu on YouTube](https://www.youtube.com/watch?v=nySxSG9nqfU)
[Class 81 Video in English on Facebook: Gremlin Graph Traversal Language ](https://www.facebook.com/zeeshanhanif/videos/10226182818781806)
[Class 81 Video in English on YouTube: Gremlin Graph Traversal Language ](https://www.youtube.com/watch?v=GzDkFWM7KAs)
[Class 81 Video in Urdu on Facebook](https://www.facebook.com/zeeshanhanif/videos/10226190729259563)
[Class 81 Video in Urdu on YouTube](https://www.youtube.com/watch?v=rPx5SpBa0Ec)
## Important Note:
Project 13 onwards, create only private repos for your project code. We want all the developers to be able to gain confidence that they can develop code without looking at anyone elses code.
### Bootcamp 2020 Project 13A: Building a Serverless JAMStack Todo app with AWS CDK, AWS CloudFront, Gatsby, GraphQL/AWS AppSync, and DynamoDB
The functionality of project is exactly the same as in Project 12C except that complete deployment is done using AWS technologies using AWS CDK (Infrastructure as Code)
### Bootcamp 2020 Project 13B: Create A Bookmarking Application With AWS CDK, AWS CloudFront, Gatsby, GraphQL/AWS AppSync, and DynamoDB
The functionality of project is exactly the same as in Project 12D except that complete deployment is done using AWS technologies using AWS CDK (Infrastructure as Code)
### Bootcamp 2020 Project 13C: Virtual Lolly using AWS CDK, AWS CloudFront, Gatsby, GraphQL/AWS AppSync, DynamoDB, Formik, and Storybook 6
The functionality of project is exactly the same as in Project 12E except that complete deployment is done using AWS technologies using AWS CDK (Infrastructure as Code)
### Bootcamp 2020 Project 14: Building Serverless Apps with Event-Driven Architecture using AWS Eventbridge
[Learning Event Driven Architecture Repo](https://github.com/panacloud-modern-global-apps/full-stack-serverless-cdk#event-driven-architecture)
[Event Driven Restaurant Example App](https://github.com/panacloud-modern-global-apps/full-stack-serverless-cdk/tree/main/step34_event-driven-restaurant-app)
Project 14 A, B, and C
Now implement 13 A, B, and C using Event-Driven Architecture with AWS Eventbridge and CDK
Project 14 D: Build a Resilient, Asynchronous Pet Theory System
https://www.qwiklabs.com/focuses/8389?parent=catalog
The Tutorial uses Cloud Run and Pub/Sub but you are required to use AWS technologies like Lambda, EventBridge etc.
### Bootcamp 2020 Project 15A: Build Serverless SaaS APIs for DiningByFriends Social Network Project using Graph Database and GraphQL
[Dinning by Friends API Project using Neptune and AppSync](https://github.com/panacloud-modern-global-apps/full-stack-serverless-cdk/tree/main/step53_api_project_one)
[Tutorial: Building a GraphQL API on AWS with Amazon Neptune Graph Database, AppSync, TypeScript, and CDK](https://dev.to/dabit3/building-a-graphql-api-on-aws-with-amazon-neptune-graph-database-and-cdk-428a)
### Bootcamp 2020 Project 15B: Build Serverless SaaS APIs for DiningByFriends Social Network Project using Relational Database and OpenAPI
[Dinning by Friends API Project using Aruora Serverless and API Gateway](https://github.com/panacloud-modern-global-apps/full-stack-serverless-cdk/tree/main/step54_api_project_two)
## Part XIII: Android, and iOS Mobile Full Stack Apps using React Native with Expo and Amplify
[7 Reasons React Native is Going to Be BIG in 2021](https://shift.infinite.red/7-reasons-react-native-is-going-to-be-big-in-2021-4b08c771788e)
[Why Brands are Choosing React Native for App Development in 2021](https://londondailypost.com/why-brands-are-choosing-react-native-for-app-development-in-2021/)
[10 Famous Apps Built With React Native](https://brainhub.eu/library/react-native-apps/)
[Expo vs React-Native-CLI](https://medium.com/@dinukapiyadigama/expo-vs-react-native-cli-7a3019b2760d)
[Common Dilemma of using expo vs Vanilla React Native being solved](https://medium.com/@harisbaig100/common-dilemma-of-using-expo-vs-vanilla-react-native-being-solved-6d6d649d7ad1)
[VS Code React Native Tools](https://marketplace.visualstudio.com/items?itemName=msjsdiag.vscode-react-native)
[Learn React Native with Expo](https://docs.expo.io/)
[Full Stack Mobile Apps with Amplify and Expo](https://docs.amplify.aws/start/q/integration/react-native)
[Class 82 Video in English on Facebook: Crash Course in Hybrid Mobile Development Class 1](https://www.facebook.com/zeeshanhanif/videos/10226210301228850)
[Class 82 Video in English on YouTube: Crash Course in Hybrid Mobile Development Class 1](https://www.youtube.com/watch?v=vjce0lyQxaI)
[Class 82 Video in Urdu on Facebook](https://web.facebook.com/zeeshanhanif/videos/10226221136659729)
[Class 82 Video in Urdu on YouTube](https://www.youtube.com/watch?v=DbUJV0k7kVM)
[Class 83 Video in English on Facebook: Crash Course in Hybrid Mobile Development Class 2](https://www.facebook.com/zeeshanhanif/videos/10226244738609763)
[Class 83 Video in English on YouTube: Crash Course in Hybrid Mobile Development Class 2](https://www.youtube.com/watch?v=JoRAYsEbi9I)
[Class 83 Code on Github](https://github.com/zeeshanhanif/reactnative-todolist)
[Class 83 Video in Urdu on Facebook](https://www.facebook.com/zeeshanhanif/videos/10226254799261273)
[Class 83 Video in Urdu on YouTube](https://www.youtube.com/watch?v=r0MHDJ6AXfc)
[Class 84 Video in English on Facebook: Crash Course in Hybrid Mobile Development Class 3](https://www.facebook.com/zeeshanhanif/videos/10226271623321864)
[Class 84 Video in English on YouTube: Crash Course in Hybrid Mobile Development Class 3](https://www.youtube.com/watch?v=TX-pHbwQ92A)
[Class 84 Video in Urdu on Facebook](https://www.facebook.com/zeeshanhanif/videos/10226279800766295)
[Class 84 Video in Urdu on YouTube](https://www.youtube.com/watch?v=aZT-DLK_SEc)
### Bootcamp 2020 Project 16: Build Serverless Slack App with Expo and AWS Amplify
[Follow the guide to create (offline) multi-tenant apps with Expo and AWS Amplify](https://medium.com/abn-amro-developer/a-guide-to-create-offline-multi-tenant-apps-with-expo-and-aws-amplify-c4b00d874650)
[Build a Realtime Chat App in React Native (tutorial for beginners)](https://www.youtube.com/watch?v=EvSUJ5lUcBw)
## Appendices
## Appendix A: Figma for Developers
[Watching this Figma Crash Course to Begin Learning](https://www.youtube.com/watch?v=Gu1so3pz4bA)
[Designing in Figma Book](https://figmabook.com/)
[Leveraging Figma for Prototyping, Mockups and Wireframes](https://topflightapps.com/ideas/figma-for-prototyping/)
[How to wireframe](https://www.figma.com/blog/how-to-wireframe/)
[Prototyping 101: Wireframes in Figma](http://sabina-niewiadomska.medium.com/prototyping101-wireframes-in-figma-54297215d693)
[Figma Resources](https://www.figmaresources.com/)
### Figma Project A: Building a Recipe App using Figma
[Build a recipe app with Figma](https://blog.prototypr.io/build-a-recipe-app-with-figma-936ca41a962d)
Build a Wireframe for Recipe App using the above design
Build a Mockup for the Recipe App using the above design
### Figma Project B: Builidng your own Design for a Talky Chat & Video Messenger App using Figma
[Talky Chat & Video Messenger App](https://www.figmaresources.com/resources/chat-app)
Build a Wireframe for Talky Chat & Video Messenger App creating your own design
Build a Mockup for the Talky Chat & Video Messenger App creating your own design
## Appendix B: Design Patterns in TypeScript
[Design Patterns in TypeScript](https://blog.bitsrc.io/design-patterns-in-typescript-e9f84de40449)
## Appendix C: Combining Design thinking, Lean Startup, and Agile to Build SaaS Startups
[Innovation Presentation Slides](https://docs.google.com/presentation/d/14pnzdfCSKYpqy4CuesBuNHa0-qRLbPmZqsj9brbGp14/edit?usp=sharing)
[Agile Presentation Slides](https://docs.google.com/presentation/d/1YLla1fSgT7i613xI4SlI9w4xSaFCu2KYZMuWqQXKv9I/edit#slide=id.p)
[Combining Agile, Lean Startup and Design thinking](https://uxdesign.cc/dls-bootstrapping-innovating-with-limited-resources-5163b7ab5be3)
[Differences between Design Thinking, Lean Startup, Design Sprint, Agile, Scrum and Kanban](https://zegal.com/blog/post/agile-methodology-comparison/)
[Combining Design Thinking, Lean Startup, and Agile Development – Everyone Misses the Point of Continuous Innovation](https://shiftup.work/combining-design-thinking-lean-startup-and-agile-development-everyone-misses-the-point-of-continuous-innovation/)
[From Design Thinking to Agile Solutions in a Lean Startup](https://shiftup.work/combining-design-thinking-lean-startup-and-agile-development-everyone-misses-the-point-of-continuous-innovation/)
[Design Thinking, Lean Startup, and Agile Scrum all in one: PACE](https://medium.com/@trakakonstantina/design-thinking-lean-startup-and-agile-scrum-all-in-one-pace-2e48dcbb859c)
[Combine Design Thinking, Lean Startup, and Agile. Beware of Waterfall in Disguise](https://medium.com/swlh/combine-design-thinking-lean-startup-and-agile-beware-of-waterfall-in-disguise-9d0b1e86835d)
[How IP-thinking keeps your SaaS Startup On Track](https://medium.com/cto-as-a-service/how-ip-thinking-keeps-your-saas-startup-on-track-4cf65f4f245f)
[Lean UX At A SaaS Startup](https://alasco.tech/2020/06/25/lean-ux.html)
[What Makes SaaS, Agile, and DevOps a Powerful Combination?](https://www.agileconnection.com/article/what-makes-saas-agile-and-devops-powerful-combination)
[Talk digest : 6 winning Strategies for Agile SaaS Companies](https://blog.scaleway.com/6-winning-strategies-for-agile-saas-companies/)
[Scrum Tutorial](https://www.tutorialspoint.com/scrum/index.htm)
[The #1 software development tool used by agile teams: Jira](https://www.atlassian.com/software/jira)
[Learn scrum with Jira Software](https://www.atlassian.com/agile/tutorials/how-to-do-scrum-with-jira-software)
[Why Is Going Agile the Best Option for Software Product Development?](https://dzone.com/articles/why-going-agile-is-the-best-option-for-software-pr)
[The Scrum Guide](https://www.scrumguides.org/index.html)
## Appendix D: Cloud Security
Cloud Security is very important part of cloud computing.
You should learn the foundations of networking by reading Part I of this book:
[CCNA 200-301 Official Cert Guide, Volume 1](https://www.amazon.com/CCNA-200-301-Official-Cert-Guide/dp/0135792738/ref=sr_1_3)
After that you should cover this book:
[AWS Certified Security Study Guide: Specialty (SCS-C01) Exam](https://www.amazon.com/AWS-Certified-Security-Study-Guide/dp/1119658810/ref=tmm_pap_swatch_0?_encoding=UTF8&qid=&sr=)
## Appendix E: List of Students who have completed the first 12 Projects and started to work towards becoming a Full Stack Serverless Cloud Developer
The following 80 developers have submitted the 12 projects so far. Good news is that 4 female developers have also qualified for the Ninja group. Completing 12 projects is only way to become member of Panacloud team and work with and learn from top developers. Currently, they are going through extensive training, you can also join the Ninja team by completing 12 projects (the selection process will continue till December 2022):
1. [Mateen Mustafa](https://www.facebook.com/mateen.blaster.5)
2. [Waris Hasan](https://www.facebook.com/DR.Death420)
3. [M. Jazzel Mehmood](https://www.facebook.com/jazzel.mehmood/)
4. [Syed M. Bilal](https://www.facebook.com/syed.muhammed.bilal.01/)
5. [Hamzah Syed](https://www.facebook.com/profile.php?id=100011483407599)
6. [M. Hasham](https://www.facebook.com/IamHashamVakani)
7. [Farhan Farooq](https://www.facebook.com/farhan.abbasi/)
8. [Shayaan Ahmed Farooqi](https://www.facebook.com/ERUDITEMONKY)
9. [Abdul Rafay Ghani](https://www.facebook.com/abdulrafay.ghani.9)
10. [Tanzeel Tasleem](https://www.facebook.com/tanzeel.tasleem.7)
11. [Uzair Bangee](https://www.facebook.com/uzair.bangee)
12. [Mudassir Khan](https://www.facebook.com/profile.php?id=100005873677424)
13. [Muhammad Hasan](https://www.facebook.com/hasan.sohail.58)
14. [Irfan Ahmed](https://www.facebook.com/irfanahmed01/)
15. [Murtaza Hanzala](https://www.facebook.com/murtaza.huzaifa.52)
16. [Haris Aqeel](https://www.facebook.com/haris.aqeel.50)
17. [Usama Subhani](https://www.facebook.com/usama.subhani.102)
18. [Muhammad Jami](https://www.facebook.com/profile.php?id=100008724766246)
19. [Shamaz Saeed](https://www.facebook.com/shamaz332)
20. [Waqas Mahmood](https://www.facebook.com/waqas.mahmood.505/)
21. [Usama Tahir](https://www.facebook.com/usamatahir0)
22. [Muhammad Alay Raza](https://www.facebook.com/alay.raza.5/)
23. [Muhammad Tayyab](https://web.facebook.com/profile.php?id=100031034920869)
24. [Muhammad Tauqeer](https://www.facebook.com/profile.php?id=100007376806817)
25. [Huma Hanif](https://www.facebook.com/huma.hanif.9469/)
26. [Mohammad Hammad](https://www.facebook.com/hungryhammad)
27. [Mahmood Ahmed](https://www.facebook.com/profile.php?id=100007120710392)
28. [Dawood Sadiq](https://www.facebook.com/daudsadiq.daud/)
29. [Ahmed Khan](https://www.facebook.com/ahmed.khan8845)
30. [Ahsan Shah](https://www.facebook.com/RealSAShah/)
31. [Ahmed Usman](https://www.facebook.com/ahmed.usman.948494)
32. [Naila Roomi](https://www.facebook.com/roomi.roomi.395891/)
33. [Mohammad Aziz](https://www.facebook.com/sam.luvv.7)
34. [Muhammad Faizan](https://web.facebook.com/faizansohail077/)
35. [Hamza Ahmed Sheikh](https://www.facebook.com/hamza.ahmed.330)
36. [Muhammad Arsalan](https://www.facebook.com/muhammadrsalan/)
37. [Muhammad Maavia Asghar](https://www.facebook.com/maaviaasghar/)
38. [Arsal Abbasi](https://www.facebook.com/profile.php?id=100053719729104)
39. [Aman Mirza](https://www.facebook.com/amanmirza99/)
40. [Usman Naeem](https://web.facebook.com/usmantanoli.naeem.1)
41. [Muhammad Sami Tariq](https://www.facebook.com/sami.tariq.754)
42. [Muhammad Ali Sarwar](https://www.facebook.com/alisarwarr)
43. [Syed Aashir Majeed](https://www.facebook.com/prince.aashir.395)
44. [Hasan Sattar](https://www.facebook.com/hasan.sattar.777)
45. [Syed Fawad Hashmi](https://www.facebook.com/syedfawadhashmi32423)
46. [Usama Abbasi](https://www.facebook.com/usama.abbasi.714655)
47. [Hamza Farooq](https://web.facebook.com/hamza.farooq.923519/)
48. [Saher Razzaq](https://www.facebook.com/profile.php?id=100009426214929)
49. [Thanwar Das](https://www.facebook.com/thanwar.das.161)
50. [Hifz Ur Rehman Ali](https://web.facebook.com/profile.php?id=100009456091163)
51. [Muhammad Ahsan Riaz](https://www.facebook.com/muhammadahsan.riaz.3/)
52. [Mutahir Riaz](https://www.facebook.com/profile.php?id=100006011446364)
53. [Sheharyar Anwar](https://www.facebook.com/sheharyar.anwar)
54. [Muhammad Shahzad Ali](https://www.facebook.com/alim6077/)
55. [Abdul Waqar](https://www.facebook.com/abdulwaqar844/)
56. [Muhammad Bilal Hadid](https://www.facebook.com/bilal.hadid.96)
57. [Rao Muhammad Akif Tufail](https://www.facebook.com/raoakif)
58. [Muhammad Subhan Akram](https://www.facebook.com/subhan.akram.188)
59. [Aqib Iqbal](https://www.facebook.com/aqib.iqbal.1217)
60. [Shariq Anwar](https://www.facebook.com/shariq.anwar.391/)
61. [Eraj Hanif](https://www.facebook.com/erajhanif15)
62. [Saad Shahid](https://www.facebook.com/saadsmarty)
63. [Ali Razzaq](https://www.facebook.com/AliRa22aQ/)
64. [Naveeda Hanif](https://www.facebook.com/naveedaHaneef/)
65. [Awais Ahmad](https://www.facebook.com/awais.ahmad1990)
66. [Adeel Malik](https://www.facebook.com/adeel.malik.1217727)
67. [Mukarram Ali](https://www.facebook.com/mickey.mouce.16)
68. [Syed Haseeb Ahmed](https://www.facebook.com/profile.php?id=100011960075954)
69. [Omar Shahid](https://www.facebook.com/omar.shahid.3572/)
70. [Muhammad Muneeb Waseem](https://www.facebook.com/sarkaar.1000/)
71. [Athar Rasool](https://www.facebook.com/profile.php?id=100004682925191)
72. [Tayyab Roy](https://www.facebook.com/tayyabroy.roytayyab/)
73. [M.Hammad](https://www.facebook.com/muhammad.hammad.5477272/)
74. [Muhammad Asghar](https://www.facebook.com/asghar.poonja/)
75. [Muhammad Shiraz](https://www.facebook.com/Donny.shz)
76. [Umair Younus](https://www.facebook.com/umair.khi)
77. [Muhammad Salman khan](https://www.facebook.com/mohammadsalman.khan.794)
78. [Fahad Shaikh](https://www.facebook.com/fahaad09)
79. [Muhammad Uzair](https://www.facebook.com/m.uzair17)
80. [Farasat Ali](https://www.facebook.com/FarasatAliAzeemi/)
81. [M. Owais](https://www.facebook.com/trouble.maker121/)