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 Full Stack Mobile Web Apps including e-commerce apps using React, Gatsby.js, Redux, QraphQL, Node.js/Express, MongoDB, Git, GitHub, GitHub Actions, Terraform, Google Cloud Run, AWS EC2, 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.
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 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.
Class 1:
Learning Material for Class 1:
Class 1 in English on Facebook
Class 2:
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
Bootcamp 2020 Project 1: Build an Expense Tracker App using React Hooks and Context API
Class 5 and 6
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
The we will build the Expense Tracker App:
Follow this Video and build the App: Expense Tracker
Project Due Date: Monday, June 22, 2020 Midnight Pakistan Standard Time
Class 6 Facebook English Video
Expense Tracker App By Adil Altaf
Class 7 and 8
JavaScript Promises, Callbacks, and Async/Await for Beginners
Asynchronous JavaScript: How Callbacks, Promises, and Async-Await Work
Class 7 English Facebook Video
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
Learn Material UI Main Website Installation Getting Started Details Templates
Learn Chart.js Mian Docs Getting Started
Class 9 English Facebook Video
Bootcamp 2020 Project 2: COVID-19 Tracker App
Last date for Submitting Project 2: COVID-19 Tracker App is Friday, July 10 midnight
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: COVID-19 API Listing 1 COVID-19 API Listing 2 COVID-19 API Listing 3 COVID-19 Google Map API
-
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.
Class 10
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
Last date to submit Project 3 is Wednesday, July 15 midnight
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 a 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 and 15 TypeScript 4.0
Begin by installing TypeScript 4.0 Beta:
npm install -g typescript@beta
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
Bootcamp 2020 Project 6: Quiz App with React and TypeScript
Quiz app using React and TypeScript
Class 16 Progressive Web App (PWA)
What’s a PWA, and How Do I Build One?
How to Make your React App a Progressive Web App (PWA)
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
Bootcamp 2020 Project 7A: Build a Netflex Clone with React and TypeScript it should be a Progressive Web App (PWA) and write 30+ Automated Tests
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
How to Build a NETFLIX Clone with REACT JS for Beginners (in 3 Hours!)
Review React Examples for future Projects
Bootcamp 2020 Project 7B: Build a Blog site in Gatsby.js/Contentful with TypeScript and Deploy on Netlify as a PWA
-
Learn Gatsby.js Gatsby Tutorials
-
Learn Contentful Getting Started
-
How to setup Gatsby with Contentful CMS and Deploy on Netlify
-
We want GitHub Actions workflow that builds a static blog site and deploys on Netlify. 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
Bootcamp 2020 Full Stack Project 8A: Building Serverless REST API using Node.js, Express, MongoDB Atlas, and Netlify
How to Become a Full Stack Web Developer in 2020
Future of Serverless Architecture
A Comparison of Serverless Function (FaaS) Providers
Node js and Express Tutorial for Beginners
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 8B: 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 8C: Building Serverless REST and QraphQL API using Netlify Functions and FaunaDB
Fauna Overview:
Fauna Raises $27 Million to Continue Providing Cutting Edge Solutions for Developers
Madrona leads $27M round in Twitter vets’ Fauna database startup; Bob Muglia named chairman
Fauna Named to Database Trends and Applications 2019 DBTA 100
Consistency without Clocks: The FaunaDB Distributed Transaction Protocol
Serverless Database CRUD Example With FaunaDB and Netlify Functions
Note: Build a CI/CD Pipeline using GitHub Actions
Bootcamp 2020 Full Stack Project 8D: 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 Full Stack Project 9 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.
-
Review Shopping Cart Demo Demo Explanation Video Code Another Example Yet Another Example
-
Now build your own Professional Shopping Cart with Context API, Hooks, Animation API and Router
Bootcamp 2020 Full Stack Project 10: Product Catalog and Shopping Cart with Redux Toolkit, Animations API, Router and Serveless GraphQL API
Admin app and customer app are both required.
-
Learn Redux Toolkit Basic Tutorial
-
Build you Shopping Cart with Redux Toolkit Create a shopping basket using React and Redux Toolkit
Bootcamp 2020 Project 11: E-Commerce App using Gatsby.js, QraphQL, Contentful, Stripe and SnipCart
-
Gatsby Ecommerce Gatsby Ecommerce Tutorial
-
Learn to build ecommerce website Building an ecommerce site with Gatsby, Contentful and Snipcart
-
Build your own Ecommerce Website using Shopify and Gatsby
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/]
-
International Ecommerce Services Options to build a ecommerce site
-
Pakistani Payment Services Which payment gateways work in Pakistan Ecommerce in Pakistan Alipay in Pakistan JazzCash JazzCash Documentation JazzCash Developer Certer Payment Gateway Online Payment Gateway Telenor Opens API Integration Guide
Bootcamp 2020 Project 12 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
Bootcamp 2020 Project 13: 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
- What are Microservices?
- How to make Repos for Microservices
How to end Microservice pain and embrace the Monorepo
Multicloud Serverless App Development Overview in Urdu on Facebook
Multicloud Serverless App Development Overview in Urdu on YouTube
Bootcamp 2020 Project 14A: Implement Expense Tracker Android and iOS Apps using React Native with Backend in Express and MongoDB
Bootcamp 2020 Project 14B: Implement Expense Tracker Android and iOS Apps using React Native with Local Storage in Realm
Bootcamp 2020 Project 15: Implement Expense Tracker DApp with Ethereum Blockchain
What are Decentralized Applications – dApps?
Zeeshan Hanif has implemented Expense Tracker as a DApp:
You need to have MetaMask installed to test the DApp
Test it on ropsten network otherwise it will cost you real Ether
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 16: 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.
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:
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 Ninja Team Selection
I will be selecting the best of the best developers from the bootcampers to work closely me and our team. First they will help the students and later they will be doing freelancing with our team. The criteria for selection will be the submitted projects, professionalism and project ownership. Even once selected you can be removed from the team because you did not follow instructions, or your performance is not up to mark. Only one warning will be given before removal.
Right now I have selected only nine developer:
- Jazzel Mehmood, Karachi
- Farhan Farooq, Karachi
- Abdul Raffay Rizwan, Karachi
- Nadir Ali, Karachi
- Maleeha Khalid, Lahore
- Muhammad Usman Tariq, Karachi
- Muhammad Bilal, Rawalpindi
- Muhammad Usman, Wah Cantt
- Saad Baig, Karachi
Muhammad Naeem Akhtar from Turin, Italy and Nadir Ali from Karachi have jointly won Chief Ninja position in Bootcamp 2020 I am extremely pleased to announce that Muhammad Naeem Akhtar ( https://www.facebook.com/profile.php?id=100014148211403 ) and Nadir Ali ( https://www.facebook.com/nadirali.abro.58/ ) have won the Chief Ninja position by submitting the following two React apps:
Naeem Project 1: Expense Tracker http://expense-tracker-app-mna.surge.sh/
Naeem Project 2: COVID-19 Tracker http://covid19-analytics-mna.surge.sh/
Nadir Project 1: Expense Tracker http://bootcamp2020-expense-trackerapp.surge.sh/
Nadir Project 2: COVID-19 Tracker http://bootcamp2020-covid19-trackerapp.surge.sh/
Naeem will be the Chief Ninja for the English Section: https://www.facebook.com/groups/4IRUG/
Nadir will be the Chief Ninja for the Urdu Section: https://www.facebook.com/groups/freelance.remote.work/
Both will also be joining the live classes representing the students.
Interesting info about Naeem: Right now he is living in Turin, Italy. He has done Bachelor in Electronic Engineering and Master in Mechatronic Engineering from Italy. Right now he is doing a full time job as Junior Java and IoT developer.
Note for everyone: All positions are temporary, as we move forward anyone can replace anyone, everything is purely merit based.
Please note if I am leading a team two things are not tolerated under any circumstances: telling an untruth and unprofessional behavior. I do not care if you are not super-intelligent but what we are looking for are people who take ownership and are highly ethical and professional.