Giter VIP home page Giter VIP logo

bootcamp-2020's Introduction

Bootcamp 2020: Free Online Learn to Earn Fasttrack Bootcamp to Learn Freelancing and do Remote Work in the COVID-19 Economic Environment

We will teach you online to Build Modern Full Stack Mobile Web Apps and Websites including e-commerce apps using React, Gatsby.js, Redux, GraphQL, Serverless, Node.js/Express, MongoDB, FaunaDB, Git, GitHub, GitHub Actions, Terraform, Netlify, Google Cloud Run, 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

Table of Contents

  1. Introduction to English and Urdu Sections
  2. Prerequisites
  3. Class 1: Development Setup
  4. Class 2: Starting React
  5. Class 3 and 4: Learn React
  6. Class 5 and 6: Hooks
  7. Class 7: Asynchronous JavaScript
  8. Class 8: Fetch Data
  9. Class 9 and 10: Material UI
  10. Class 11 React Router v6
  11. Class 12 Web Animations API
  12. Class 13 Web Animations API with React
  13. Class 14, 15 and 16 TypeScript
  14. Class 17 Progressive Web Apps (PWA) and Offline Availability
  15. Class 18 Progressive Web App (PWA) and Service Push Notification
  16. Class 19 and 20 How to Test React Components in TypeScript
  17. Class 21, 22, and 23 Client Side GraphQL in React Apps
  18. Class 24, 25, and 26 Managing State with Redux Toolkit and Building API Mocking Servers with Mirage
  19. Class 27 and 28 Forms with Formik and Yup
  20. Class 29 and 30 React Component Driven Development with Storybook and Bit
  21. Class 31, 32, and 33 Learn JAMstack Serverless and Headless CMS
  22. Class 34-38: Jamstack Ecommerce: Stripe, Shopify, and Snipcart
  23. Now you are ready to do these kinds of jobs
  24. Class 33 Learn to Market Our Skills
  25. Bootcamp 2020 Important Personal Project V: Build Upwork Profile
  26. Class 39-43 Build Android, iOS, and Web apps with React Native and Expo
  27. Class 44-50: MultiCloud Serverless: AWS, Google Cloud, and Azure
  28. Class 51-55: Integration with AI and DeFi Services
  29. Class 56-58: Figma for Developers
  30. Start working for Panacloud Silicon Valley Clients
  31. Learn Design Thinking, Learn Startup, and Agile
  32. Develop MVP of AI and DeFi powered Serverless Ecommerce Products and Services
  33. Receive Funding from Silicon Valley VC's for our Startups

Introduction to English and Urdu Sections

Bootcamp 2022 Group on LinkedIn

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

YouTube English Channel

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

YouTube Urdu Channel

Teaching Team:

Zeeshan Hanif, Hira Khan, Bashir Aziz, Daniyal Nogori, Moshin Khalid, Aamir Pinger, Adil Altaf, Ameen Alam and Zia Khan.

Prerequisites: HTML, CSS, and JavaScript

These topics have been released for everyone in Urdu:

Learn HTML by Hira Khan

Learn CSS Intro by Hira Khan

Learn JavaScript by Zeeshan Hanif

Note: Material in English is already available extensively on the web.

Class 1: Development Setup

Learning Material for Class 1:

Assignment Notes

Presentation

Notes

Class 1 in English on Facebook

Class 1 in English on YouTube

Class 1 in Urdu on Facebook

Class 1 in Urdu on YouTube

Class 2: Starting React

Learning material

Assignment

Notes

English Videos:

Class 2 in English on Facebook

Class 2 in English on YouTube

Class 2 in Urdu on Facebook

Class 2 in Urdu on YouTube

Class 3 and 4: Learn React

Learn React Tutorial Cover the Tutorial Before Fetching Data

Class 3 Facebook English Video

Class 3 YouTube English Video

Class 3 Facebook Urdu Video

Class 3 YouTube Urdu Video

Class 4 Facebook English Video

Class 4 YouTube English Video

Class 4 Facebook Urdu Video

Class 4 YouTube Urdu 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 YouTube English Video

Class 5 Facebook English Video

Class 5 YouTube Urdu Video

Class 5 Facebook Urdu 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

Project Submit Form

Class 6 YouTube English Video

Class 6 Facebook English Video

Class 6 Facebook Urdu Video

Class 6 YouTube Urdu Video

Expense Tracker App By Adil Altaf

Git Repo URL

Surge URL

Step by Step Guide

Class 7: Asynchronous JavaScript

JavaScript Promises, Callbacks, and Async/Await for Beginners

Asynchronous JavaScript: How Callbacks, Promises, and Async-Await Work

Code for Class 7 English

Class 7 English Facebook Video

Class 7 English YouTube Video

Class 7 Urdu YouTube Video

Class 7 Urdu 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 Code

Class 8 English Facebook Video

Class 8 English YouTube Video

Class 8 Urdu Facebook Video

Class 8 Urdu YouTube Video

Data fetching with React Suspense

React Suspense 1

React Suspense 2

React Suspense 3

React Suspense 4

References:

React Suspense Reference 1

React Suspense Reference 2

Class 9 and 10: Material UI

Learn Material UI

Main Website

Installation

Getting Started

Details

Templates

Learn Chart.js

Mian Docs

Getting Started

Class 9 English Facebook Video

Class 9 English YouTube Video

Class 9 Urdu Facebook Video

Class 9 Urdu YouTube Video

Bootcamp 2020 Project 2: COVID-19 Tracker App

Submit Project here

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

  1. Choose one or more COVID-19 API's that you are going to use:

COVID-19 API Listing 1

COVID-19 API Listing 2

COVID-19 API Listing 3

COVID-19 Google Map API

  1. 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 10 Urdu Facebook Video

Class 10 Urdu 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

Class 11 Urdu Facebook Video

Class 11 Urdu YouTueb Video

Bootcamp 2020 Project 3: Shoe Store

Now build a Shoe Store after watching this video

Submit Project 3

Class 12 Web Animations API

Web Animations API Now Supported in All Evergreen Browsers

Check Browser Support

Web Animations API Concepts

We will use this Shim

We will learn from this Tutorial in depth

Using the Web Animations API

Additive Animation with the Web Animations API

Examples

Live Demos

More Web Animations Resources

Class 12 English Facebook Video

Class 12 English YouTube Video

Class 12 Urdu Facebook Video

Class 12 Urdu 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

Class 13 Urdu Facebook Video

Class 13 Urdu YouTube Video

Bootcamp 2020 Project 4A: Red Queen's Race with Web Animation API and React Hooks

Project Submit Form

Review the code and demo 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

Bootcamp 2020 Project 4B: Develop Tiny Short Animation with React Hooks

Project Submit Form

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

Project Submit Form

"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:

Neat Website

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:

Beautiful, free illustrations

free illustrations

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

Animated Sites

8 Best Animated Websites

Best Website examples of designs with animation

You may use AI to generate graphics:

Creative Tools to Generate AI Art

Magenta.js

Web Demo

Magenta Tool

Sketch-RNN-JS: A Generative Model for Vector Drawings

Auto Draw: An AI Experiment

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 learn TypeScript 4.0 in detail from this Panacloud repo

Class 14 English Facebook Video

Class 14 English YouTube Video

Class 14 Urdu YouTube Video

Class 14 Urdu Facebook Video

Class 15 English Facebook Video

Class 15 English YouTube Video

Class 15 Urdu Facebook Video

Class 15 Urdu YouTube Video

Class 16 English Facebook Video

Class 16 English YouTube Video

Class 16 Urdu 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

Latest News

PWA Reference

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 17 Urdu Facebook Video

Class 17 Urdu Facebook 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

Class 18 Urdu Facebook Video

Class 18 Urdu 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

Class 19 Urdu Facebook Video

Class 19 Urdu 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 20 Urdu Facebook Video

Class 20 Urdu YouTube Video

Class 21, 22, and 23 Client Side GraphQL in React Apps

Introduction to GraphQL:

Introduction to QraphQL

Core Concepts

Big Picture (Architecture)

Queries and Mutations

What’s your query? Learn GraphQL with React and Contentful

What’s your query? Learn GraphQL with React and Contentful

Watch Video Tutorials

JavaScript Prerequisites:

What are Tag Functions?

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

Build a Schema

Connect to data sources

Write query resolvers

Apollo-Client 3.0 Tutorial:

Introduction to Appllo Client 3 in React

Get started

Fetch data with the useQuery hook

Update data with the useMutation hook

Using Apollo with TypeScript

TypeScript Code Generator:

TypeScript Code Generator

Code Generator Page

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 21 Urdu Facebook Video

Class 21 Urdu YouTube Video

Class 22 English Facebook Video

Class 22 English YouTube Video

Class 22 Urdu Facebook Video

Class 22 Urdu 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

Watch first 7 mins of video

Space X API

Example of a Demo App

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 Urdu Facebook 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

Using Redux with React Hooks

Zeeshan Code for Redux with Hooks

Zeeshan Code for Redux with Redux Toolkit

Learn Redux Toolkit

Quick Start

Basic Tutorial

Class 24 in English on Facebook

Class 24 in English on YouTube

Redux Presentation by Aamir

Class 24 in Urdu on Facebook

Class 24 in Urdu on Facebook

Intermediate Tutorial: Redux Toolkit in Action

Mirage Tutorial

Class 25 in English on Facebook

Class 25 in English on YouTube

Class 25 in Urdu on Facebook

Class 25 in Urdu on YouTube

Thunk API for Async

Zeeshan's Code for Thunk

Class 26 in English on Facebook

Class 26 in English on YouTube

Class 26 in Urdu on Facebook

Class 26 in Urdu on YouTube

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

Project Repo

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

HTML Forms

React Formik Playlist

Formik Installation

Formik Tutorial

Formik: React Forms Video Tutorial with Yup and Material

Formik with TypeScript

Zeeshan's Formik Repo

Class 27 in English on Facebook

Class 27 in English on YouTube

Class 27 in Urdu on Facebook

Class 27 in Urdu on YouTube

Class 28 in English on Facebook

Class 28 in Engish on YouTube

Class 28 in Urdu on Facebook

Class 28 in Urdu on YouTube

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

Supercharge Storybook 6

Decorators

Storybook 6 Announcement

TypeScript Config

Reference Learning Material

Class 29 in English on Facebook

Class 29 in English on YouTube

Class 29 in Urdu on Facebook

Class 29 in Urdu on YouTube

Bit.dev

Bit for React

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

Design Systems for Developers

Class 30 in English on Facebook

Class 30 in English on YouTube

Class 30 in Urdu on Facebook

Class 30 in Urdu 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, 32, and 33 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 31 in Urdu on Facebook

Class 31 in Urdu on YouTube

Class 32 in English on Facebook

Class 32 in English on YouTube

Class 32 in Urdu on Facebook

Class 32 in Urdu on YouTube

Class 33 in English on Facebook

Class 33 in English on YouTube

Class 33 in Urdu on Facebook

Class 33 in Urdu on YouTube

Class 34 in English on Facebook

Class 34 in English on YouTube

Class 34 in Urdu on Facebook

Class 34 in Urdu on YouTube

Class 35 in English on Facebook

Class 35 in English on YouTube

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

Tutorial

Watch Video: Episode 1

Watch Video: Episode 2

Watch Video: Episode 3

Watch Video: Episode 4

Watch Video: Episode 5

Watch Video: Episode 6

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

Project Article

Updated Code Repo

Bootcamp 2020 Project 12C: Building a Serverless JAMStack Todo app with Netlify, Gatsby, GraphQL, and FaunaDB

Project Videos

Bootcamp 2020 Project 12D: Create A Bookmarking Application With FaunaDB, Netlify And Gatsby

Project Article

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

Project Repo

Project Demo

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

Class 34-38: Jamstack Ecommerce: Stripe, Shopify, and Snipcart

JAMstack Ecommerce

Ecommerce Shop Landing Page Design

Multicloud Serverless

Multicloud Serverless

Building Multi-Tenant Serverless SaaS API's

Multi-Tenant Serverless SaaS API's

AI as a Service

Serverless machine learning with AWS

Blockchain as a Service

A BEGINNER’S GUIDE TO BLOCKCHAIN AS A SERVICE

Now you are ready to do these kinds of jobs

Remote Job Requirements

You can start your own company

HOW MUCH DOES IT COST TO BUILD A GATSBY WEBSITE?

It depends on the complexity of implementation. If it’s just a development of a simple static web page, then you may pay around 4k - 8k for it. If you would like to also plan a UX, UI, and Design it, be ready to spend around 6k - 30k - depending on how big the project will be. If it’s a big and much more complex page, the cost can be around 20k-80k Source

Read the following material to prepare for React interviews:

Homework Reading Material: Writing Custom Hooks

Rules of Hooks

Building your own Hooks

Building your own React Hooks

Homework Reading Material: Higher-Order Components In React

React Higher Order Components For The Newbie

Higher-Order Components In React

Master Higher-Order Components in React Today

HOC - Functional Component

Homework Reading Material: Styled-Components In React

How To Use Styled-Components In React

Project Ideas for Your Portfolio

8 React.js Project Ideas to Help You Start Learning by Doing

Review React Examples for future Projects

Class 33 Learn to Market Our Skills

Bootcamp 2020 Important Personal Project I: Build a Developer Profile Portfolio site in Gatsby.js Contentful with TypeScript and Deploy as a PWA

Creating a Portfolio Website: tips on how to do it right

HOW TO BUILD AN IMPRESSIVE PORTFOLIO SITE

10 tips for building a killer portfolio website

Awwward-winning portfolio websites

15 Web Developer Portfolios to Inspire You

My (Simple) Workflow To Design And Develop A Portfolio Website

[Building a personal site with Gatsby.js, Contentful and Netlify](Building a personal site with Gatsby.js, Contentful and Netlify)

Ejaz Ahmed Portfolio Site

Bootcamp 2020 Important Personal Project II: Build a Detailed Linkedin Developer Profile and Become Active on Linkedin

Connect to Zia Khan

Here’s an example of the perfect LinkedIn profile summary, according to Harvard career experts

10 Ways You Didn’t Know LinkedIn Could Find You a Job

Improve Your Résumé by Turning Bullet Points into Stories

Bootcamp 2020 Important Personal Project III: Create Full Stack, React, Gatsby and Serverless Gigs on Fivver

4 Things to Do Before Creating Your Gig

Creating a Gig

Bootcamp 2020 Important Personal Project IV: Start working on a Panacloud USA Project

Getting your first work is difficult, therefore we suggest that you start working on a professional Pancloud project and become part of the team to gain experience and references.

Bootcamp 2020 Important Personal Project V: Build Upwork Profile

Upwork

Class 39-43 Build Android, iOS, and Web apps with React Native and Expo

Expo vs React-Native-CLI

Common Dilemma of using expo vs Vanilla React Native being solved

Expo

React Native

Class 44-50: MultiCloud Serverless: AWS, Google Cloud, and Azure

Class 51-55: Integration with AI and DeFi Services

Class 56-58: Figma for Developers

FIGMA 101 – THE BEGINNER’S ULTIMATE GUIDE TO THE BASICS (PART 1)

FIGMA 101 – THE BEGINNER’S ULTIMATE GUIDE TO THE BASICS (PART 2)

FIGMA 101 – THE BEGINNER’S ULTIMATE GUIDE TO THE BASICS (PART 3)

Everything Developers Need To Know About Figma

Figma tips for developers

Designing in Figma Book

Start working for Panacloud Silicon Valley Clients

Bootcamp 2020 JAMStack Client Serverless Model Project 13A

Building Serverless CRUD apps with Netlify Functions & FaunaDB

Code Repo

Netlify Functions Use with TypeScript

Build a CI/CD Pipeline using GitHub Actions

Bootcamp 2020 JAMStack Client Serverless Model Project 13B

JAMstack Crash Course - Build a Full Stack Application

Note: Build a CI/CD Pipeline using GitHub Actions

Bootcamp 2020 JAMStack Client Serverless Model Project 13C

How to Build Authenticated Serverless JAMstack Apps with Gatsby and Netlify

Note: Build a CI/CD Pipeline using GitHub Actions

Bootcamp 2020 JAMStack Client Serverless Model Project 13D:

Manage Subscriptions and Protect Content With Stripe

Note: Build a CI/CD Pipeline using GitHub Actions

Bootcamp 2020 JAMStack Client Serverless Model Project 13E: Building Serverless REST and QraphQL API using Netlify Functions and FaunaDB

Serverless Database CRUD Example With FaunaDB and Netlify Functions

Note: Build a CI/CD Pipeline using GitHub Actions

Bootcamp 2020 JAMStack Client Serverless Model Project 13F: Build Your Own Serverless Writing Pad with Gatsby, Netlify, and FaunaDB

Build Your Own Serverless Writing Pad with Gatsby, Netlify, and FaunaDB

Note: Build a CI/CD Pipeline using GitHub Actions

Bootcamp 2020 JAMStack Ecommerce Project 13G:

JAMstack e-commerce using Apicart, FaunaDB, Gridsome and Netlify Note: User Gatsby.js instead of Gridsome Demo Alternatives Best eCommerce Services in 2020 9 Best eCommerce Solutions for Jamstack Websites

Bootcamp 2020 Full Stack Project 14A: Building Serverless REST API using Node.js, Express, MongoDB Atlas, and Netlify

Node js and Express Tutorial for Beginners

Node.js/Express Tutorial

CRUD Operations with Mongoose and MongoDB Atlas

Build a Expense Tracker Backend using Node.js & Express API

Note: Build a CI/CD Pipeline using GitHub Actions

Bootcamp 2020 Full Stack Project 14B: Building Serverless QraphQL API using Node.js, Express, MongoDB Atlas, and Netlify

Building Serverless GraphQL API in Node with Express and Netlify

Build a CI/CD Pipeline using GitHub Actions

Bootcamp 2020 Full Stack Project 15 Product Catalog and Shopping Cart with Context API, React Hooks, Animations API, Router and Serveless REST API

Admin app and customer app are both required.

  1. Building a CRUD App with React Hooks & the Context API

  2. Review Shopping Cart Demo Demo Explanation Video Code Another Example Yet Another Example

  3. Now build your own Professional Shopping Cart with Context API, Hooks, Animation API and Router

Bootcamp 2020 Full Stack Project 16: Product Catalog and Shopping Cart with Redux Toolkit, Animations API, Router and Serveless GraphQL API

Admin app and customer app are both required.

  1. Learn Redux Toolkit Basic Tutorial

  2. Build you Shopping Cart with Redux Toolkit Create a shopping basket using React and Redux Toolkit

Bootcamp 2020 Project 17: E-Commerce App using Gatsby.js, QraphQL, Contentful, Stripe and SnipCart

  1. Gatsby Ecommerce Gatsby Ecommerce Tutorial

  2. Learn to build ecommerce website Building an ecommerce site with Gatsby, Contentful and Snipcart

  3. Build your own Ecommerce Website using Shopify and Gatsby

Shopify vs Amazon

Ecommerce is fragmenting. Shopify may be the glue that holds it together

Shopify Tutorial: A Detailed Step-by-Step Guide for Beginners

How to Set up Your Own Online Shop with the Help of Shopify

[Building an E-commerce site with Shopify](https://www.gatsbyjs.org/docs/building-an-ecommerce-site-with-shopify/]

  1. International Ecommerce Services Options to build a ecommerce site

  2. Pakistani Payment Services Which payment gateways work in Pakistan Ecommerce in Pakistan NayaPay and Visa partner to fast-track digital payments in Pakistan Alipay in Pakistan JazzCash JazzCash Documentation JazzCash Developer Certer Payment Gateway Online Payment Gateway Telenor Opens API Integration Guide

Bootcamp 2020 Project 18 Build a Facebook Shop

[The end of eCommerce as we know it](https://marketing-interactive.com/opinion-the-end-of-ecommerce-as-we-know-it]

Facebook Shops: What Shops could spell for the future of social commerce

Introducing Facebook Shops, a new online shopping experience

Introducing Facebook Shops: Helping Small Businesses Sell Online

Facebook Shop a No Brainer for Advertisers, Says 5-Star Analyst

Complete Details about Facebook Shops

About Facebook Shops

Facebook Developer Platform

Getting Started

Reference Reading

Bootcamp 2020 Project 19: Learn Multicloud Serverless Application Development

Servlesss and Cloud Native Computing Overview in Urdu on YouTube

Servlesss and Cloud Native Computing Overview in Urdu on Facebook

  1. What are Microservices?

Microservices 101

  1. How to make Repos for Microservices

How to end Microservice pain and embrace the Monorepo

  1. Learn Multicloud Serverless Application Development

Multicloud Serverless App Development Overview in Urdu on Facebook

Multicloud Serverless App Development Overview in Urdu on YouTube

Bootcamp 2020 Project 20A: Implement Expense Tracker Android and iOS Apps using React Native with Backend in Express and MongoDB

React Native Basics

Bootcamp 2020 Project 20B: Implement Expense Tracker Android and iOS Apps using React Native with Local Storage in Realm

Realm Docs

Bootcamp 2020 Project 21: Implement Expense Tracker DApp with Ethereum Blockchain

What are Decentralized Applications – dApps?

Zeeshan Hanif has implemented Expense Tracker as a DApp:

Demo

You need to have MetaMask installed to test the DApp

Test it on ropsten network otherwise it will cost you real Ether

Reveiw Zeeshan Hanif's Code

React is used to develop the Dapp, createContext and useReducer Hooks are used for state management

Smart Contract is written in Solidity

Web3.js is used to integrate with the Blockchain Node

You are requred to develop your own version of Expense Tracker DApp

Bootcamp 2020 Final Project 22: Participate in Building a Open Source Ecommerce Framework using TypeScript, Gatsby.js, Node.js/Express, Atlas MongoDB, Google Cloud Run, and Terraform

First Season consisting of 12 Episodes of Tech Talk in Urdu with Zia Khan and Adil Altaf are now available. In these episodes we discuss latest state of the art technologies like AI, Cloud Native, Serverless, Blockchain, JAMstack, and Multicloud.

Enjoy Watching on YouTube

More Details will added as we go forward.

Get AWS and Google Cloud Accounts for Bootcamp 2020

The software industry has completely shifted toward multi-cloud usage in projects. In our bootcamp we will be using Amazon and Google clouds extensively. It is requested from all participants that they make arrangements to get the following free AWS and Google accounts within one month:

AWS Free Offer

Google Cloud Free Offer

You will get temporary free Access to Google Cloud while doing these Hello Cloud Run tutorial and Build a Resilient, Asynchronous System with Cloud Run and Pub/Sub tutorial.

You will get temporary free Access to AWS while doing these Introduction to AWS Lambda tutorial and Building Serverless Applications with an Event-Driven Architecture

Note 1: It is very easy the difficult part is getting your account verified by using credit cards or bank accounts.

Note 2: The cloud accounts are not required immediately. We will need them in about a months time.

bootcamp-2020's People

Contributors

mzaka avatar ziaukhan avatar

Stargazers

 avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.