panacloud / Bootcamp 2020
Projects that are alternatives of or similar to Bootcamp 2020
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, Serverless, MongoDB, FaunaDB, Git, GitHub, GitHub Actions, Netlify, Contentful, Stripe, SnipCart, Shopify, etc. and to sell your services on Upwork and Fiverr.
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
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.
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.
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
The objective of both Bootcamp 2020 and Bootcamp 2021 is to train people to go after this prize.
Overview of the concepts by the Students:
Modern Full Stack Serverless Multi-Tenant SaaS Apps and APIs Presentation by Hamza Farooq in Urdu
Table of Contents
- Introduction to English and Urdu Sections
- Prerequisites
- Class 1: Development Setup
- Class 2: Starting React
- Class 3 and 4: Learn React
- Class 5 and 6: Hooks
- Class 7: Asynchronous JavaScript
- Class 8: Fetch Data
- Class 9 and 10: Material UI
- Class 11 React Router v6
- Class 12 Web Animations API
- Class 13 Web Animations API with React
- Class 14, 15 and 16 F
- Class 17 Progressive Web Apps (PWA) and Offline Availability
- Class 18 Progressive Web App (PWA) and Service Push Notification
- Class 19 and 20 How to Test React Components in TypeScript
- Class 21, 22, and 23 Client Side GraphQL in React Apps
- Class 24, 25, and 26 Managing State with Redux Toolkit and Building API Mocking Servers with Mirage
- Class 27 and 28 Forms with Formik and Yup
- Class 29 and 30 React Component Driven Development with Storybook and Bit
-
Class 31 to 41 Learn 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 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 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 Extra Project 12F: Build a Macro Compliance Tracker in Next and MongoDB Atlas with TypeScript and Deploy on Vercel
- Class 42-50: Jamstack Ecommerce: Stripe, Shopify, and Snipcart
-
Class 51-81: Full Stack Serverless with 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 13B: Create A Bookmarking Application With AWS CDK, AWS CloudFront, Gatsby, GraphQL/AWS 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 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 15B: Build Serverless SaaS APIs for DiningByFriends Social Network Project using Relational Database and OpenAPI
- Class 82-86 Build Android, and iOS Mobile Full Stack Apps using React Native with Expo and Amplify
-
Appendices
- Appendix A: Figma for Developers
- Appendix B: Design Patterns in TypeScript
- Appendix C: Combining Design thinking, Lean Startup, and Agile to Build SaaS Startups
- Appendix D: List of Students who have completed the first 12 Projects and started to work todays becoming a Full Stack Serverless Cloud Developer
Introduction to English and Urdu Sections
English Section:
Every Tuesday at 10:00 PM – 11:15 PM Pakistan Standard Time
Every Saturday at 10:00 PM – 11:15 PM Pakistan Standard Time
English broadcast live on Facebook
Urdu Section:
Every Wednesday 10:00 pm to 11:15 pm Pakistan Standard Time
Every Sunday 10:00 pm to 11:15 pm Pakistan Standard Time
Urdu broadcast live on Facebook
Teaching Team:
Zeeshan Hanif, Hira Khan, Bashir Aziz, Daniyal Nogori, Moshin Khalid, Aamir Pinger, Adil Altaf, Ameen Alam, Waris, Huma, and Zia Khan.
Prerequisites: HTML, CSS, and JavaScript
These topics have been released for everyone in Urdu:
Learn JavaScript by Zeeshan Hanif
Note: Material in English is already available extensively on the web.
Microsoft's Beginner's Series to: JavaScript
Class 1: Development Setup
Learning Material for Class 1:
Class 1 in English on Facebook
Class 2: Starting React
Learning material
English Videos:
Class 2 in English on Facebook
Class 3 and 4: Learn React
Learn React Tutorial Cover the Tutorial Before Fetching Data
Class 3 Facebook English Video
Class 4 Facebook English Video
Class 5 and 6: Hooks
After we have learned the useState Hook in class 4 using the Learn 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
Working with the React Context API
How to use the useReducer React hook
Understanding the React useReducer Hook
Class 5 Facebook English Video
Bootcamp 2020 Project 1: Build an Expense Tracker App using React Hooks and Context API
Follow this Video and build the App: Expense Tracker
Class 6 Facebook English Video
Expense Tracker App By Adil Altaf
Class 7: Asynchronous JavaScript
JavaScript Promises, Callbacks, and Async/Await for Beginners
Asynchronous JavaScript: How Callbacks, Promises, and Async-Await Work
Class 7 English Facebook Video
Class 8: Fetch Data
Learn JavaScript Fetch
How to fetch data in JavaScript
Fetch API data using useEffect React hook
Different Options to get data in React
Different ways to fetch data in React
Class 8 English Facebook Video
Data fetching with React Suspense
References:
Class 9 and 10: Material UI
Learn Material UI
Learn Chart.js
Class 9 English Facebook Video
Bootcamp 2020 Project 2: COVID-19 Tracker App
You will use React, React Material UI, Chart.js, and React Suspense to build this COVID-19 Tracker React App
- 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
- Choose one or more COVID-19 API's that you are going to use:
- 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
Class 10 English YouTube Video
Class 11 React Router v6
Setting Started with React Router V6
React Router v6 Video Tutorial
Note: Use the latest Beta Release of V6
Class 11 English Facebook Video
Class 11 English YouTube Video
Bootcamp 2020 Project 3: Shoe Store
Now build a Shoe Store after watching this video
Class 12 Web Animations API
Web Animations API Now Supported in All Evergreen Browsers
We will learn from this Tutorial in depth
Additive Animation with the Web Animations API
Class 12 English Facebook Video
Class 12 English YouTube Video
Class 13 Web Animations API with React
We will be using the following React hooks useEffect, useLayoutEffect and useRef.
Everything You Need to Know About FLIP Animations in React
Creating Highly-Performant Animations using Web Animations API and React hooks
Class 13 English Facebook Video
Class 13 English YouTube Video
Bootcamp 2020 Project 4A: Red Queen's Race with Web Animation API and React Hooks
Review the code and demo and improve and build your own Red Queens Race Animation with React Hooks.
Note the following:
- When Alice drinks from the bottle, she grows smaller.
- Because small children tire out easily, unlike automaton chess pieces, Alice is constantly slowing down.
- But urging them on by clicking or tapping causes them to speed up.
- The background elements also have playback rates that are impacted when you click or tap.
Bootcamp 2020 Project 4B: Develop Tiny Short Animation with React Hooks
Read this article: The Tiny Short Animation Trend in 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
"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
20 Extraordinary Web Design Ideas That Will Get Everyone Clicking 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:
To intrigue viewers, brands like Pitch have introduced 3D illustration design: Pitch Website
In this project you will build a animated React Website, all animations must use the latest Web Animations API and latest trends.
Resources:
Design Resources for Developers
You can use the ideas form these resourses or develop your own ideas:
Best websites that use Illustration and Animation
22 Websites with Impressive Illustrations and Animations
10 Inspiring Websites with Gorgeous Animations
Best Website examples of designs with animation
You may use AI to generate graphics:
Creative Tools to Generate AI Art
Sketch-RNN-JS: A Generative Model for Vector Drawings
Class 14, 15 and 16 TypeScript
Begin by installing TypeScript 4.0+:
npm install -g typescript
We will use this book to learn TypeScript:
Programming TypeScript: Making Your JavaScript Applications Scale by Boris Cherny
Chapters 1, 2, 3, 4, and 9
Note 1: You can also learn TypeScript 4.0 in detail from this Panacloud repo
Class 14 English Facebook Video
Class 14 English YouTube Video
Class 15 English Facebook Video
Class 15 English YouTube Video
Class 16 English Facebook Video
Class 16 English YouTube Video
Class 16 English YouTube Video
Bootcamp 2020 Project 6: Quiz App with React and TypeScript
You can submit your project here
Quiz app using React and TypeScript
You can take help from here also: Your First React Typescript Project: a Todo List App
Class 17 Progressive Web Apps (PWA) and Offline Availability
THE CURRENT STATE OF PROGRESSIVE WEB APPS
What’s a PWA, and How Do I Build One?
How to Make your React App a Progressive Web App
Building a Progressive Web Application with Create React App
Deploy PWA on All App Stores
Publishing PWAs to Major App Stores: The Whys and Hows
Google Play Store now open for Progressive Web Apps
How to publish PWA app on Google Play Store – Step by step guide
Microsoft's PWABuilder makes submitting web apps to the Play Store easier than ever
How Progressive Web Apps Will Change Mobile Commerce In 2020
Make your PWA feel more like an app
Progressive Web Apps and Offline-availability
How to Build Modern, Offline Apps With Progressive Web Apps
Class 17 English Facebook Video
Class 17 English YouTube Video
Class 18 Progressive Web App (PWA) and Service Push Notification
Firebase Push Notifications in React
Class 18 English Facebook Video
Class 18 English YouTube Video
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
Class 19 and 20 How to Test React Components in TypeScript
You Can't Do CI/CD Without Automated Testing
What is Test Driven Development (TDD)? Tutorial with Example
How to Test React Components in TypeScript
Writing unit tests with React, Typescript, and react-testing-library
The Practical Guide to Start React Testing Library with TypeScript
How to set intellisense for react testing library using typescript
How To Test Your React Apps With The React Testing Library
Class 19 English Facebook Video
Class 19 English YouTube Video
Bootcamp 2020 Project 7B: Build a React Timer App using TypeScript with Test Driven Development
React Test-driven Development: From User Stories to Production
Follow this for TypeScript config:
Create react app typescript: testing with jest and enzyme
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
Class 20 English YouTube Video
Class 21, 22, and 23 Client Side GraphQL in React Apps
Introduction to GraphQL:
What’s your query? Learn GraphQL with React and Contentful
What’s your query? Learn GraphQL with React and Contentful
JavaScript Prerequisites:
Read about Tagged templates from this page
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
Apollo-Client 3.0 Tutorial:
Introduction to Appllo Client 3 in React
Fetch data with the useQuery hook
Update data with the useMutation hook
TypeScript Code Generator:
How to configure GraphQL-Codegen and React Apollo Client to do work for you
Class 21 English Facebook Video
Class 21 English YouTube Video
Class 22 English Facebook Video
Class 22 English YouTube Video
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
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
Class 23 English YouTube Video
Class 23 English Facebook Video
Class 24, 25, and 26 Managing State with Redux Toolkit and Building API Mocking Servers with Mirage
Three dots ( … ) in JavaScript
Zeeshan Code for Redux with Hooks
Zeeshan Code for Redux with Redux Toolkit
Learn Redux Toolkit
Class 24 in English on Facebook
Class 24 in English on YouTube
Intermediate Tutorial: Redux Toolkit in Action
Class 25 in English on Facebook
Class 25 in English on YouTube
Class 26 in English on Facebook
Class 26 in English on YouTube
Mirage Notes:
- Mirage runs in the browser, so there's no new terminal processes to manage
- Returning data from Mirage is as fast and easy as writing frontend code
- 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
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
Partial implementation, of only login and signup with react, redux and mirage by Zeeshan
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.
Class 27 and 28 Forms with Formik and Yup
Easy forms with Formik - part I
Formik: React Forms Video Tutorial with Yup and Material
Class 27 in English on Facebook
Class 27 in English on YouTube
Class 28 in English on Facebook
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
React Multi-Step Form Tutorial: Using Formik, Yup and material-ui
Class 29 and 30 React Component Driven Development with Storybook and Bit
Component Driven Development (CDD)
A Guide to Component Driven Development (CDD)
Component Driven Development (CDD) In React
Storybook 6
Building React Apps With Storybook 6
Introduction to Storybook for React
Class 29 in English on Facebook
Class 29 in English on YouTube
Bit.dev
How to Use React and Typescript in Bit.dev
Using Storybook and Bit.dev Together
How is bit.dev different from Storybook?
Design Systems for Developers
Class 30 in English on Facebook
Class 30 in English on YouTube
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
Class 31 to 41 Learn JAMstack Serverless and Headless CMS
Learn JAMstack Serverless in Baby Steps
Our JAMstack Textbook for Bootcamp 2020 Read Chapter 1
Class 31 in English on Facebook
Class 31 in English on YouTube
Class 32 in English on Facebook
Class 32 in English on YouTube
Class 33 in English on Facebook
Class 33 in English on YouTube
Class 34 in English on Facebook
Class 34 in English on YouTube
Class 35 in English on Facebook
Class 35 in English on YouTube
Class 36 in English on Facebook
Class 36 in English on YouTube
Class 37 in English on Facebook
Class 37 in English on YouTube
Class 38 in English on Facebook
Class 38 in English on YouTube
Class 39 in English on Facebook - Project 12C Todo App
Class 39 in English on YouTube - Project 12C Todo App
Class 39 in Urdu on Facebook - Project 12C Todo App
Class 39 in Urdu on YouTube - Project 12C Todo App
Class 40 in English on Facebook - Project 12D Bookmark App
Class 40 in English on YouTube - Project 12D Bookmark App
Project 12D Bookmark App by Daniyal
Class 40 in Urdu on Facebook - Project 12D Bookmark App
Class 40 in Urdu on YouTube - Project 12D Bookmark App
Class 41 in English on Facebook - Project 12E Virtual Lolly App
Class 41 in English on YouTube - Project 12E Virtual Lolly App
Zeeshan's Virtual Lolly App Code Repo
Class 41 in Urdu on Facebook - Project 12E Virtual Lolly App
Class 41 in Urdu on YouTube - Project 12E Virtual Lolly App
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
Demo of Blog site we want to build
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 Reference 2
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 for user logins.
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 12D: Create A Bookmarking Application With FaunaDB, Netlify And Gatsby
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
Visual Testing with Storybook in Gatsby
Forms with Formik — Gatsby — Netlify
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
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.
Class 42-50: Jamstack Ecommerce: Stripe, Shopify, and Snipcart
JAMstack Ecommerce Learning Project Repo (Ecommerce Projects 00 - 06)
Class 42 in English on Facebook
Class 42 in English on YouTube
Class 43 Building Project 00 Video in English on Facebook
Class 43 Building Project 00 Video in English on YouTube
Class 43 Building Project 00 Video in Urdu on Facebook
Class 43 Building Project 00 Video in Urdu on YouTube
Class 44 Building Project 01 Video in English on Facebook
Class 44 Building Project 01 Video in English on YouTube
Class 44 Building Project 01 Video in Urdu on Facebook
Class 44 Building Project 01 Video in Urdu on YouTube
Class 45 Buidling Project 02 Video in English on Facebook
Class 45 Buidling Project 02 Video in English on YouTube
Class 45 Building Project 02 Video in Urdu on Facebook
Class 45 Building Project 02 Video in Urdu on YouTube
Class 46 Buiding Project 03 Video in English on Facebook
Class 46 Building Project 03 Video in English on YouTube
Class 46 Building Project 03 Video in Urdu on Facebook
Class 46 Building Project 03 Video in Urdu on YouTube
Class 47 Building Project 04 Video in English on Facebook
Class 47 Building Project 04 Video in English on YouTube
Class 47 Building Project 04 Video in Urdu on Facebook
Class 47 Building Project 04 Video in Urdu on YouTube
Class 48 Building Project 04 Part 2 Video in English on Facebook
Class 48 Building Project 04 Part 2 Video in English on YouTube
Class 48 Building Project 04 Part 2 Video in Urdu on Facebook
Class 48 Building Project 04 Part 2 Video in Urdu on YouTube
Class 49 Building Project 04 Part 3 Video in English on Facebook
Class 49 Building Project 04 Part 3 Video in English on YouTube
Class 49 Building Project 04 Part 3 Video in Urdu on Facebook
Class 49 Building Project 04 Part 3 Video in Urdu on YouTube
Class 50 Building Project 05 and 06 Video in English on Facebook
Class 50 Building Project 05 and 06 Video in English on YouTube
Class 50 Building Project 05 and 06 Video in Urdu on Facebook
Class 50 Building Project 05 and 06 Video in Urdu on YouTube
Best Practices For E-Commerce UI Design
Ecommerce Shop Landing Page Design
Class 51-81: Full Stack Serverless with Cloud Development Kit - CDK
Get AWS Account
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.
Base Technology Stack:
- Frontend: React with Typescipt and Storybook
- Infrastructure As Code and Automation Tools: AWS CDK
- Integration: AWS EventBridge
- Computing: AWS Lambda
- Programing Language: TypeScript
- Orchestration: AWS Step Functions
- CDN: Amazon CloudFront
- Static Content: Amazon S3
- API Front End: GraphQL using AWS AppSync
- Database: AWS DynamoDB, AWS Arora Serverless, and AWS Neptune
- Container Management: Fargate
- Observability: AWS X-Ray
- IDE: VS Code
- CI/CD: Github Actions
- Version Control: GitHub
Learning Full Stack Serverless with CDK Repo
Class 51 Video in English on Facebook
Class 51 Video in English on YouTube
Class 51 Video in Urdu on Facebook
Class 51 Video in Urdu on YouTube
Class 52 Video in English on Facebook
Class 52 Video in English on YouTube
Class 52 Video in Urdu on Facebook
Class 52 Video in Urdu on YouTube
Class 53 Video in English on Facebook
Class 53 Video in English on YouTube
Class 53 Video in Urdu on Facebook
Class 53 Video in Urdu on YouTube
Class 54 Video in English on Facebook
Class 54 Video in English on YouTube
Class 54 Video in Urdu on Facebook
Class 54 Video in Urdu on YouTube
Class 55 Video in English on Facebook
Class 55 Video in English on YouTube
Class 55 Video in Urdu on Facebook
Class 55 Video in Urdu on YouTube
Class 56 Video in English on Facebook
Class 56 Video in English on YouTube
Class 56 Video in Urdu on Facebook
Class 56 Video in Urdu on YouTube
Class 57 Video in English on Facebook
Class 57 Video in English on YouTube
Class 57 Video in Urdu on Facebook
Class 57 Video in Urdu on YouTube
Class 58 Video in English on Facebook
Class 58 Video in English on YouTube
Class 58 Video in Urdu on Facebook
Class 58 Video in Urdu on YouTube
Class 59 Video in English on Facebook
Class 59 Video in English on YouTube
Class 59 Video in Urdu on Facebook
Class 59 Video in Urdu on YouTube
Class 60 Video in English on Facebook
Class 60 Video in English on YouTube
Class 60 Video in Urdu on Facebook
Class 60 Video in Urdu on YouTube
Class 61 Video in English on Facebook
Class 61 Video in English on YouTube
Class 61 Video in Urdu on Facebook
Class 61 Video in Urdu on YouTube
Class 62 Video in English on Facebook
Class 62 Video in English on YouTube
Class 62 Video in Urdu on Facebook
Class 62 Video in Urdu on YouTube
Class 63 Video in English on Facebook
Class 63 Video in English on YouTube
Class 63 Video in Urdu on Facebook
Class 63 Video in Urdu on YouTube
Class 64 Video in English on Facebook
Class 64 Video in English on YouTube
Class 64 Video in Urdu on Facebook
Class 64 Video in Urdu on YouTube
Class 65 Video in English on Facebook
Class 65 Video in English on YouTube
Class 65 Video in Urdu on Facebook
Class 65 Video in Urdu on YouTube
Class 66 Video in English on Facebook
Class 66 Video in English on YouTube
Class 66 Video in Urdu on Facebook
Class 66 Video in Urdu on YouTube
Class 67 Video in English on Facebook
Class 67 Video in English on YouTube
Class 67 Video in Urdu on Facebook
Class 67 Video in Urdu on YouTube
Class 68 Video in English on Facebook
Class 68 Video in English on YouTube
Class 68 Video in Urdu on Facebook
Class 68 Video in Urdu on YouTube
Class 69 Video in English on Facebook
Class 69 Video in English on YouTube
Class 69 Video in Urdu on Facebook
Class 69 Video in Urdu on YouTube
Class 70 Video in English on Facebook
Class 70 Video in English on YouTube
Class 70 Video in Urdu on YouTube
Class 70 Video in Urdu on YouTube
Class 71 Video in English on Facebook
Class 71 Video in English on YouTube
Class 71 Video in Urdu on Facebook
Class 71 Video in Urdu on YouTube
Class 72 Video in English on Facebook
Class 72 Video in English on YouTube
Class 72 Video in Urdu on Facebook
Class 72 Video in Urdu on Facebook
Class 73 Video in English on Facebook
Class 73 Video in English on YouTube
Class 73 Video in Urdu on Facebook
Class 73 Video in Urdu on YouTube
Class 74 Video in English on Facebook
Class 74 Video in English on YouTube
Class 74 Video in Urdu on Facebook
Class 74 Video in Urdu on YouTube
Class 75 Video in English on Facebook
Class 75 Video in English on YouTube
Class 75 Video in Urdu on Facebook
Class 75 Video in Urdu on YouTube
Class 76 Video in English on Facebook
Class 76 Video in English on YouTube
Class 76 Video in Urdu on Facebook
Class 76 Video in Urdu on YouTube
Class 77 Video in English on Facebook
Class 77 Video in English on YouTube
Class 77 Video in Urdu on Facebook
Class 77 Video in Urdu on YouTube
Class 78 Video in English on Facebook
Class 78 Video in English on YouTube
Class 78 Video in Urdu on Facebook
Class 78 Video in Urdu on YouTube
Class 79 Video in English on Facebook
Class 79 Video in English on YouTube
Class 79 Video in Urdu on Facebook
Class 79 Video in Urdu on YouTube
Class 80 Video in English on Facebook
Class 80 Video in English on YouTube
Class 80 Video in Urdu on Facebook
Class 80 Video in Urdu on YouTube
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
Event Driven Restaurant Example 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
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
Class 82-86 Build 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
Why Brands are Choosing React Native for App Development in 2021
10 Famous Apps Built With React Native
Common Dilemma of using expo vs Vanilla React Native being solved
Full Stack Mobile Apps with Amplify and Expo
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
Appendices
Appendix A: Figma for Developers
Watching this Figma Crash Course to Begin Learning
Leveraging Figma for Prototyping, Mockups and Wireframes
Prototyping 101: Wireframes in Figma
Figma Project A: Building a Recipe App using Figma
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
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
Appendix C: Combining Design thinking, Lean Startup, and Agile to Build SaaS Startups
Innovation Presentation Slides
Combining Agile, Lean Startup and Design thinking
Differences between Design Thinking, Lean Startup, Design Sprint, Agile, Scrum and Kanban
From Design Thinking to Agile Solutions in a Lean Startup
Design Thinking, Lean Startup, and Agile Scrum all in one: PACE
Combine Design Thinking, Lean Startup, and Agile. Beware of Waterfall in Disguise
How IP-thinking keeps your SaaS Startup On Track
What Makes SaaS, Agile, and DevOps a Powerful Combination?
Talk digest : 6 winning Strategies for Agile SaaS Companies
The #1 software development tool used by agile teams: Jira
Learn scrum with Jira Software
Why Is Going Agile the Best Option for Software Product Development?
Appendix D: List of Students who have completed the first 12 Projects and started to work towards becoming a Full Stack Serverless Cloud Developer
The following 70 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):