This program of Saylani Welfare Trust will teach you to build Modern Full-Stack Serverless Mobile Web Cloud SaaS Apps and APIs. This program focuses on React based front-ends and microservices based, API-first, cloud SaaS and headless backend technologies. Most of frontend teaching material covered in the program is advocated by JAMstack and backend technologies by MACH Alliance.
Overview of the concepts by a Student:
Modern Full Stack Serverless Multi-Tenant SaaS Apps and APIs Presentation by Hamza Farooq in Urdu
The program consists of four modules and will mainly be focused on imparting knowledge by training students to develop projects. Students will mainly be watching videos at home to understand the concepts and doing projects in class. However, at the descrition of the instructor some of the theory will also be covered in class.
Module I: HTML, CSS, JavaScript, and Git
Module II: Advanced JavaScript, React, Redux, TypeScript, PWA, Gatsby, and Storybook
Module III: API Economy and Cloud Development
Module IV: Android and iOS Mobile Apps, UI/UX Design, Design Patterns, and Innovation for Startups
Introduction to Front End Development for the Web
Objective: The objective of this module is to get a hands on understanding of HTML, CSS, and JS. By the end of the module we will have built 20 projects and build github reprositories for these project.
Watch Learning videos before class (links below)
Guided project based practice in class (see prjects below)
Independent Practice (at home)
Reading Materials:
HTML & CSS Textbook - HTML and CSS by Wiley
JavaScript Textbook - A Smarter Way to Learn JavaScript by Mark Meyers
JavaScript Practice by Hira Khan
Learning Videos:
Learn JavaScript by Zeeshan Hanif
Git Version Control and Github Playlist by Zeeshan Hanif
Check required, length, email and password match
Create form UI
Show error messages under specific inputs
checkRequired() to accept array of inputs
checkLength() to check min and max length
checkEmail() to validate email with regex
checkPasswordsMatch() to match confirm password
Select from movie choices and seats in a theater in order to purchase tickets
Display UI with movie select, screen, seats, legend & seat info
User can select a movie/price
User can select/deselect seats
User can not select occupied seats
Number of seats and price will update
Save seats, movie and price to local storage so that UI is still populated on refresh
Custom video player using the HTML5 video element and it's JavaScript API with a custom design
Display custom video player styled with CSS
Play/pause
Stop
Video progress bar
Set progress bar time
Display time in mins and seconds
Select countries to get the exchange rate for a specific amount
Display UI with 2 select lists for countries and 2 inputs for amounts
Fetch exchange rates from API (https://api.exchangerate-api.com)
Display the values for both countries
Update values on amount change
Swap country rates
Project to teach high order array methods and DOM manipulation
Fetch random users from the randomuser.me API
Use forEach() to loop and output user/wealth
Use map() to double wealth
Use filter() to filter only millionaires
Use sort() to sort by wealth
Use reduce() to add all wealth
Simple landing page with sliding menu and modal
Create and style landing page
Style side nav and modal
Add functionality to make menu open/close on button click
Add functionality to make modal open/close on button click
User can select letters from keyboard to guess the word in a certain number of tries
Display hangman pole and figure using SVG
Generate a random word
Display word in UI with correct letters
Display wrong letters
Show notification when select a letter twice
Show popup on win or lose
Play again button to reset game
Search and generate random meals from the themealdb.com API
Display UI with form to search and button to generate
Connect to API and get meals
Display meals in DOM with image and hover effect
Click on meal and see the details
Click on generate button and fetch & display a random meal
Keep track of income and expenses. Add and remove items and save to local storage
Create UI for project
Display transaction items in DOM
Show balance, expense and income totals
Add new transaction and reflect in total
Delete items from DOM
Persist to local storage
Create UI to play music stored in the "music folder" using the HTML5 audio API
Create UI for music player including spinning image and song detail popup
Add play and pause functionality
Switch songs
Progress bar
Display posts from jsonplaceholder and add infinite scroll to fetch posts and also add filter box
Create UI & custom CSS loader animation
Fetch initial posts from API and display
Scroll down, show loader and fetch next set of posts
Add filtering for fetched posts
Game to beat the clock by typing random words
Create game UI including a difficulty setting
Generate random word and place in DOM
Score increase after word is typed
Implement timer
Add certain amount of time after word is typed based on difficulty
Store difficulty setting in local storage
Flash card app for learning. Display, add and remove memory cards with questions and answers
Create flip cards using CSS
Create "Add new card" overlay with form
Display question cards and flip for answer
View prev and next cards
Add new cards to local storage
Clear all cards from local storage
A text to speech app. Pre-made buttons and custom text speech. This project uses the Web Speech API.
Create responsive UI (CSS Grid) with picture buttons
Speaks the text when button clicked
Drop down custom text to speech
Speaks the text typed in
Change voices and accents
Find songs, artists and lyrics using the lyrics.ovh API
Display UI with song/artist input
Fetch songs/artists and put in DOM
Add pagination
Add get lyrics functionality and display in DOM
A relaxing breathing app with a visual director to tell you when to breathe in, hold and breathe out
Create circle and gradient circle with CSS
Create and animate pointer (Small circle)
Create grow and shrink animations
Add JavaScript to create the breath animation effect
Display a scrambled list that can be sorted with drag and drop
Create an ordered list (10 largest countries)
Scramble list items randomly
Allow user to drag and drop an item to a different position
Button to check if items are in correct order
Show green for correct order and red for wrong order
Game where you control a paddle with the arrow keys to bounce a ball up to break bricks. This app uses the HTML5 canvas element and API
Draw elements on canvas
Use canvas paths to draw shapes
Add animation with requestAnimationFrame(cb)
Move paddle on arrow key press
Add collision detection
Keep score
Add rules button with slider
Landing page that counts down from the current date to the next new year
Create landing page with HTML/CSS
Calculate the days, hours, mins and seconds to the new year
Insert values into the DOM
Show a spinner right before loading the countdown
Show the coming year in the background
Students will create a comprehensive final project of their choosing demonstrating lessons learned in this module.
Objective: The objective of this module is to get a hands on understanding of React and TypeScript. By the end of the module we will have built 12 projects and build github reprositories for these projects and publish them on the web.
Watch Learning videos before class (links below)
Guided project based practice in class (see prjects below)
Independent Practice (at home)
Learning Material for Video 1:
Video 1 in English on Facebook : Development Setup
Video 1 in English on YouTube : Development Setup
Video 1 in Urdu on Facebook : Development Setup
Video 1 in Urdu on YouTube : Development Setup
Learning material
Video 2 in English on Facebook : Github Actions And Intro to Learning React Part 1
Video 2 in English on YouTube : Github Actions And Intro to Learning React Part 1
Video 2 in Urdu on Facebook : Github Actions And Intro to Learning React Part 1
Video 2 in Urdu on YouTube : Github Actions And Intro to Learning React Part 1
Learn React Tutorial Cover the Tutorial Before Fetching Data
Video 3 Facebook English Video : Learning React Part 2
Video 3 YouTube English Video : Learning React Part 2
Video 3 Facebook Urdu Video : Learning React Part 2
Video 3 YouTube Urdu Video : Learning React Part 2
Video 4 Facebook English Video : Learning React Part 3
Video 4 YouTube English Video : Learning React Part 3
Video 4 Facebook Urdu Video : Learning React Part 3
Video 4 YouTube Urdu Video : Learning React Part 3
After we have learned the useState Hook in video 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
Video 5 YouTube English Video : Learning React Part 4
Video 5 Facebook English Video : Learning React Part 4
Video 5 YouTube Urdu Video : Learning React Part 4
Video 5 Facebook Urdu Video : Learning React Part 4
Follow this Video and build the App: Expense Tracker
Video 6 YouTube English Video : Building a React Project
Video 6 Facebook English Video : Building a React Project
Video 6 Facebook Urdu Video : Building a React Project
Video 6 YouTube Urdu Video : Building a React Project
Expense Tracker App By Adil Altaf
JavaScript Promises, Callbacks, and Async/Await for Beginners
Asynchronous JavaScript: How Callbacks, Promises, and Async-Await Work
Video 7 English Facebook Video : Learning Asynchronous JavaScript
Video 7 English YouTube Video : Learning Asynchronous JavaScript
Video 7 Urdu YouTube Video : Learning Asynchronous JavaScript
Video 7 Urdu Facebook Video : Learning Asynchronous JavaScript
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
Video 8 English Facebook Video : JavaScript Fetch with React
Video 8 English YouTube Video : JavaScript Fetch with React
Video 8 Urdu Facebook Video : JavaScript Fetch with React
Video 8 Urdu YouTube Video : JavaScript Fetch with React
Data fetching with React Suspense
References:
Learn Material UI
Learn Chart.js
Video 9 English Facebook Video : Learning Material UI and Chart.JS
Video 9 English YouTube Video : Learning Material UI and Chart.JS
Video 9 Urdu Facebook Video : Learning Material UI and Chart.JS
Video 9 Urdu YouTube Video : Learning Material UI and Chart.JS
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
Video 10 English Facebook Video : Building COVID-19 Tracker App
Video 10 English YouTube Video : Building COVID-19 Tracker App
Video 10 Urdu Facebook Video : Building COVID-19 Tracker App
Video 10 Urdu YouTube Video : Building COVID-19 Tracker App
Setting Started with React Router V6
React Router v6 Video Tutorial
Note: Use the latest Beta Release of V6
Video 11 English Facebook Video : Learning Routing With React Router
Video 11 English YouTube Video : Learning Routing With React Router
Video 11 Urdu Facebook Video : Learning Routing With React Router
VideoClass 11 Urdu YouTueb Video : Learning Routing With React Router
Now build a Shoe Store after watching this video
Web Animations API Now Supported in All Evergreen Browsers
We will learn from this Tutorial in depth
Additive Animation with the Web Animations API
Video 12 English Facebook Video : Learning Web Animation
Video 12 English YouTube Video : Learning Web Animation
Video 12 Urdu Facebook Video : Learning Web Animation
Video 12 Urdu YouTube Video : Learning Web Animation
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
Video 13 English Facebook Video : Web Animation In React
Video 13 English YouTube Video : Web Animation In React
Video 13 Urdu Facebook Video : Web Animation In React
Video 13 Urdu YouTube Video : Web Animation In React
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.
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.
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
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
Video 14 English Facebook Video : Learning TypeScript
Video 14 English YouTube Video : Learning TypeScript
Video 14 Urdu YouTube Video : Learning TypeScript
Video 14 Urdu Facebook Video : Learning TypeScript
Class 15 English Facebook Video : Building A React Quiz App In TypeScript
Video 15 English YouTube Video : Building A React Quiz App In TypeScript
Video 15 Urdu Facebook Video : Building A React Quiz App In TypeScript
Video 15 Urdu YouTube Video : Building A React Quiz App In TypeScript
Video 16 English Facebook Video : Building A React Quiz App And TypeScript Part 2
Video 16 English YouTube Video : Building A React Quiz App And TypeScript Part 2
Video 16 English YouTube Video
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
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
Video 17 English Facebook Video : Learning Progressive Web App
Video 17 English YouTube Video : Learning Progressive Web App
Firebase Push Notifications in React
Video 18 English Facebook Video : Progressive Web App And Push Notification
Video 18 English YouTube Video : Progressive Web App And Push Notification
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
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
Video 19 English Facebook Video : Learning Test Driven Development
Video 19 English YouTube Video : Learning 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.
Video 20 English Facebook Video : Building a React Timer App
Video 20 English YouTube Video : Building a React Timer App
Video 20 Urdu Facebook Video : Building a React Timer App
Video 20 Urdu YouTube Video : Building a React Timer App
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
Video 21 English Facebook Video : Learning GraphQL Part 1 And Using Apollo Client With React
Video 21 English YouTube Video : Learning GraphQL Part 1 And Using Apollo Client With React
Video 22 English Facebook Video : Learning GraphQL Part 2
Video 22 English YouTube Video : Learning GraphQL Part 2
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.
Video 23 English Facebook Video : Building A project With React, TypeScript And GraphQL
Video 23 English YouTube Video : Building A project With React, TypeScript And GraphQL
Video 23 English Facebook Video
Three dots ( … ) in JavaScript
Zeeshan Code for Redux with Hooks
Zeeshan Code for Redux with Redux Toolkit
Learn Redux Toolkit
Video 24 in English on Facebook : Learning Redux
Video 24 in English on YouTube : Learning Redux
Intermediate Tutorial: Redux Toolkit in Action
Video 25 in English on Facebook : Learning Redux ToolKit And Mirage Mocking Server
Video 25 in English on YouTube : Learning Redux ToolKit And Mirage Mocking Server
Video 26 in English on Facebook : Learning Redux Async Thunk
Video 26 in English on YouTube : Learning Redux Async Thunk
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
Create a shopping basket using React and Redux Toolkit
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.
Easy forms with Formik - part I
Formik: React Forms Video Tutorial with Yup and Material
Video 27 in English on Facebook: Learning React Formik And Yup Part 1
Video 27 in English on YouTube : Learning React Formik And Yup Part 1
Video 28 in English on Facebook : Learning React Formik And Yup Part 2
Video 28 in Engish on YouTube : Learning React Formik And Yup Part 2
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
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
Video 29 in English on Facebook : Learning Component Driven Development Part 1 With Storybook
Video 29 in English on YouTube : Learning Component Driven Development Part 1 With Storybook
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
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
Learn JAMstack Serverless in Baby Steps
Our JAMstack Textbook for Read Chapter 1
Video 31 in English on Facebook : Learning Modern Application Development With JAMStack Serverless
Video 31 in English on YouTube : Learning Modern Application Development With JAMStack Serverless
Video 32 in English on Facebook : Learning JAMStack Serverless - Gatsby Part 1
Video 32 in English on YouTube : Learning JAMStack Serverless - Gatsby Part 1
Video 33 in English on Facebook :Learning JAMStack Serverless - Gatsby Part 2
Video 33 in English on YouTube :Learning JAMStack Serverless - Gatsby Part 2
Video 34 in English on Facebook : Learning JAMStack Serverless - Gatsby With Cntentful
Video 34 in English on YouTube : Learning JAMStack Serverless - Gatsby With Cntentful
Video 39 in English on Facebook - Project 12C Todo App
Video 39 in English on YouTube - Project 12C Todo App
Video 39 in Urdu on Facebook - Project 12C Todo App
Video 39 in Urdu on YouTube - Project 12C Todo App
Video 40 in English on Facebook - Project 12D Bookmark App
Video 40 in English on YouTube - Project 12D Bookmark App
Project 12D Bookmark App by Daniyal
Video 40 in Urdu on Facebook - Project 12D Bookmark App
Video 40 in Urdu on YouTube - Project 12D Bookmark App
Video 41 in English on Facebook - Project 12E Virtual Lolly App
Video 41 in English on YouTube - Project 12E Virtual Lolly App
Zeeshan's Virtual Lolly App Code Repo
Video 41 in Urdu on Facebook - Project 12E Virtual Lolly App
Video 41 in Urdu on YouTube - Project 12E Virtual Lolly App
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.
Note: In the above article the project is done using 11ty however you are required to do it in Gatsby.js with TypeScript
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.
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.
For AWS Educate Account you will need a email address issued by an educational institute or university.
Before we get started please Review the concepts proposed by MACH Alliance.
Report: 67% of developers embrace an API-first philosophy
The objective of this module is to prepare sofware developers for the API Economy (Application Programming Interface Economy). APIs are software interfaces that allow once separate software systems to seamlessly and easily talk to each other. The innovative power of APIs has lead to the realization that software as a service (SaaS) applications can be built by combining APIs built by specialized API providers. That, in turn, has created the API Economy, which empowers developers to specialize and monetize their skills and domain knowledge.
A taxi booking SaaS app, for example, might combine a mapping SaaS API, communication SaaS API, and billing SaaS API, each from different providers, with their own UX layered on top. This makes it easy to launch new services without having to build everything from scratch. This makes it easier for all participants to develop unique products, services and functionality quickly and with less cost.
In the API economy a developer may have different roles. It may be a SaaS developer or API provider. A API provider can also develop on top of other specialized APIs, thus creating layers of APIs. This creates an API economy where developers charge each other for the APIs built by them. The API provider charges others for using his APIs, and at the same time pays other providers to use their APIs. The SaaS app developers who uses all these APIs bills the end-customer for the service. This exchange of value is what makes an API economy.
Ideally, the developer who uses SaaS APIs wants to be charged a usage based subscription fee, not a fixed monthly subscription. This usage based subscription fee has been made possible by serverless cloud technologies. Serverless is also being called Cloud 2.0.
The rise of of API Economy has created a new kind of software company i.e. an API-First Company. A company, which develops software not for the end-users as its main customer, but other developers who uses it as a component to build applications. The Panacloud platform provides the means by which developers and entrepreneurs can build their API-First Unicorn startups.
The API Economy levels the playing field for everyone from the smallest developers to the largest companies. However, it also creates many challenges. First, often there is no direct contact between the API provider and the developer who utilizes it, it can be hard to know which API to build with what functionality. Second, it is difficult to know which APIs are available and which API to use and their comparative strengths and weaknesses. Third, most of the current SaaS applications and API are built using legacy Cloud 1.0 technologies, thus they don’t have usage based billing support and also some have scalability issues. Fourth, the APIs are centrally managed and multi-tenant by their very nature, making it difficult to manage, measure resource usage in a serverless environment, and bill the tenant. Fifth, each and every API provider has to build a custom platform to monitor and measure serverless resource usage and bill clearing functionality thus increasing the time-to-market. Sixth, there is an extreme shortage of serverless cloud developers thus making life every difficult for both API providers and SaaS app companies. Seventh, there is a scarcity of coherent and comprehensive training material for multi-tenant severless SaaS app and API developers.
Panacloud has started and is leading a social movement called Operation Unicorn to help anyone and everyone become a cloud developer, a startup founder, and participant in the API economy. The focus is on building API-First startups, which will in time become billion dollar companies. This movement is striving to build a community that will not only transform individuals, but societies and countries as well.
API Economy Presentation for Class
Support Reading Material:
What is the API Economy & why it matters to your business
How the API economy is powering digital transformation
API Economy: Is It The Next Big Thing?
What Is The “API Economy” And How Brands Can Benefit From It
The State of the API Economy 2021
Reshaping the business landscape with serverless APIs
Serverless, Microservices & Other Trends in API and Services Architecture
5 Ways AI, IoT, and security are shaping the API economy
The platform economy is an API economy. And artificial intelligence needs APIs
The Pivotal Role of Business APIs in IoT Platforms: Part I
How important is the API economy to blockchain application development?
APIs and Blockchain — a trillion-dollar opportunity
Architectural Style for APIs – how to make the choice
Comparisons of API Architectural Styles
Class 1 Videos: The API Economy
Video 1: What is the API Economy in English on YouTube
Video 1: What is the API Economy in English on Facebook
Video 1: What is the API Economy in Urdu on YouTube
Video 1: What is the API Economy in Urdu on Facebook
We will be writing Infrastructure as Code (IaC) CDK AWS Serverless constructs in TypeScript and Lambda Functions etc. also in TypeScript
A new version of the CDK Toolkit is required for use with CDK v2. To install it, issue
npm install -g aws-cdk
Learning Material:
Learning Serverless with CDK Repo
We will focus on Serverless SaaS API development using CDK and AWS Lambda, AWS API Gateway (with OpenAPI Specs and GraphQL, and AWS AppSync.Study Material:
Class 8 Videos: Hello CDK
Class 2: Hello CDK in English on Facebook
Class 2: Hello CDK in English on YouTube
Class 2: Hello CDK in Urdu on Facebook
Class 2: Hello CDK in Urdu on YouTube
Video 3: Lambda and CDN Website Deployment in English on Facebook
Video 3: Lambda and CDN Website Deployment in English on YouTube
Video 3: Lambda and CDN Website Deployment in Urdu on Facebook
Video 3: Lambda and CDN Website Deployment in Urdu on YouTube
Build a Hitcounter API follow the CDK Workshop
It is require that before you build your Hitcounter API you follow the workshop from the start.
Class 4: Integrate AppSync with Lambda as a Datasource in English on Facebook
Class 4: Integrate AppSync with Lambda as a Datasource in English on YouTube
Class 4: Integrate AppSync with Lambda as a Datasource in Urdu on Facebook
Class 4: Integrate AppSync with Lambda as a Datasource in Urdu on YouTube
Class 5: Integrate AppSync with Lambda as a Datasource in English on Facebook
Class 5: Integrate AppSync with Lambda as a Datasource in English on YouTube
Class 5: Integrate AppSync with Lambda as a Datasource in Urdu on Facebook
Class 5: Integrate AppSync with Lambda as a Datasource in Urdu on YouTube
Class 6: Integrate AppSync with Lambda with DynamoDB in English on Facebook
Class 6: Integrate AppSync with Lambda with DynamoDB in English on YouTube
Class 6: Integrate AppSync with Lambda with DynamoDB in Urdu on Facebook
Class 6: Integrate AppSync with Lambda with DynamoDB in Urdu on YouTube
Class 13 Videos: API Design, Prototyping, Development, and Testing - Everything Must and Will Become an API
API Design,Prototype, and Testing Learning Repo
Class 13: REST Request Collections in English on Facebook
Class 13: REST Request Collections in English on YouTube
Class 13: REST Request Collections in Urdu on Facebook
Class 13: REST Request Collections in Urdu on YouTube
In this project we are going to define a Simple Book API on AWS using CDK, API Gateway, Lambda Function and DynamoDB. After we have developed the APIs we will test them using Postman.
The requirements of this API are documented in this repo
The project code is pushed here, please donot copy the code it is for your reference to see after buiding the project:
https://github.com/panacloud/bootcamp-2021/tree/main/code/project-04(aws-restful-api)
Video 14: Building Simple Books API with AWS API Gateway in English on Facebook
Video 14: Building Simple Books API with AWS API Gateway in English on YouTube
Video 14: Building Simple Books API with AWS API Gateway in Urdu on Facebook
Video 14: Building Simple Books API with AWS API Gateway in Urdu on YouTube
Code for Video 14:
https://github.com/panacloud/bootcamp-2021/tree/main/code/project-04(aws-restful-api)
Watch this video and develop a GraphQL Todo API on AWS using AppSync, Lambda Functions, and DynamoDB. Then test it using postman.
The project code is pushed here, please donot copy the code it is for your reference to see after buiding the project:
https://github.com/panacloud/bootcamp-2021/tree/main/code/project05-aws-graphql
Video 15: Building GraphQL Todo APIs with AWS App Sync in English on Facebook
Video 15: Building GraphQL Todo APIs with AWS App Sync in English on YouTube
Video 15: Building GraphQL Todo APIs with AWS App Sync in Urdu on Facebook
Video 15: Building GraphQL Todo APIs with AWS App Sync in Urdu on YouTube
Code for Video 15:
https://github.com/panacloud/bootcamp-2021/tree/main/code/project05-aws-graphql
Reading Material: Steps 02 and 03 from this Repo
Video 16: Use-Case Driven QraphQL API Design and Design Thinking in English on Facebook
Video 16: Use-Case Driven QraphQL API Design and Design Thinking in English on YouTube
Video 16: Use-Case Driven QraphQL API Design and Design Thinking in Urdu on Facebook
Video 16: Use-Case Driven QraphQL API Design and Design Thinking in Urdu on YouTube
Reading Material: Steps 04 from this Repo
Graph Databases for Dummies Book, chapter 1, 2, and 4
We used Sandbox to do practice on Movie Database
You can use this Arrows.app to draw pictures of graphs
Video 17: Intro to Graph Databases in English on Facebook
Video 17: Intro to Graph Databases in English on YouTube
Video 17: Intro to Graph Databases in Urdu on Facebook
Video 17: Intro to Graph Databases in Urdu on YouTube
Video 18: AWS Neptune Graph Database in English on Facebook
Video 18: AWS Neptune Graph Database in English on YouTube
Video 18: AWS Neptune Graph Database in Urdu on Facebook
Video 18: AWS Neptune Graph Database in Urdu on YouTube
Project 4: Build Serverless SaaS APIs for DiningByFriends Social Network Project using Graph Database and GraphQL
Dinning by Friends API Project using Neptune and AppSync
Reading Material: Steps 06 from this Repo
Reading Material:
Database Design in DBMS Tutorial: Learn Data Modeling
What is Normalization in DBMS (SQL)? 1NF, 2NF, 3NF, BCNF
Video 19: Relational Database Design in English on Facebook
Video 19: Relational Database Design in English on YouTube
Video 19: Relational Database Design in Urdu on Facebook
Video 19: Relational Database Design in Urdu on YouTube
Reading Material:
Chapters 1, 4-10 of the SQL QuickStart Guide
Video 20: Learn SQL in English on Facebook
Video 20: Learn SQL in English on YouTube
Video 20: Learn SQL in Urdu on Facebook
Video 20: Learn SQL in Urdu on YouTube
Reading Material:
CockroachDB Serverless Launches, Aspires to Be Developers’ Database
A new class of Serverless PostgreSQL Databases are emerging we plan to focus on them:
CockroachDB Serverless runs on all three major cloud platforms, without requiring an account on any one of them and also has a free tier. This versatility is attractive to developers and for teaching students. Therefore, we will use it for teaching.
Introduction to Serverless Databases and CockroachDB Serverless
Using the DBeaver Client to Run SQL Commands
How do I connect DBeaver to CockroachDB Serverless?
Amazon Aurora Serverless using CDK
Additional Reading Material:
Build a Full-Stack Node.js App with CockroachDB Serverless
Using Sequelize with TypeScript
Sequelize Typescript Documentation
Video 21: Serverless PostgreSQL Databases and SQL in English on Facebook
Video 21: Serverless PostgreSQL Databases and SQL in English on YouTube
Video 21: Serverless PostgreSQL Databases and SQL in Urdu on Facebook
Video 21: Serverless PostgreSQL Databases and SQL in Urdu on YouTube
We will start by covering this book: Designing APIs with Swagger and OpenAPI
In this class we will cover chapter 1, 2, and 3.
Video 22: OpenAPI Part 1 in English on Facebook
Video 22: OpenAPI Part 1 in English on YouTube
Video 22: OpenAPI Part 1 in Urdu on Facebook
Video 22: OpenAPI Part 1 in Urdu on YouTube
Video 23: OpenAPI Part 2 in English on Facebook
Video 23: OpenAPI Part 2 in English on YouTube
Video 23: OpenAPI Part 2 in Urdu on Facebook
Video 23: OpenAPI Part 2 in Urdu on YouTube
Video 24: OpenAPI Part 3 in English on Facebook
Video 24: OpenAPI Part 3 in English on YouTube
Video 24: OpenAPI Part 3 in Urdu on Facebook
Video 24: OpenAPI Part 3 in Urdu on YouTube
Video 25: OpenAPI Part 4 in English on Facebook
Video 25: OpenAPI Part 4 in English on YouTube
Video 25: OpenAPI Part 4 in Urdu on Facebook
Video 25: OpenAPI Part 4 in Urdu on YouTube
Video 26: OpenAPI Part 5 in English on Facebook
Video 26: OpenAPI Part 5 in English on YouTube
Video 26: OpenAPI Part 5 in Urdu on Facebook
Video 26: OpenAPI Part 5 in Urdu on YouTube
Project 5: 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
Define and document the REST API using OpenAPI specifications.
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
Video 1 in English on Facebook: Crash Course in Hybrid Mobile Development Class 1
Video 1 in English on YouTube: Crash Course in Hybrid Mobile Development Class 1
Video 2 in English on Facebook: Crash Course in Hybrid Mobile Development Class 2
Video 2 in English on YouTube: Crash Course in Hybrid Mobile Development Class 2
Video 2 Video in Urdu on Facebook
Video 3 in English on Facebook: Crash Course in Hybrid Mobile Development Class 3
Video 3 in English on YouTube: Crash Course in Hybrid Mobile Development Class 3
Follow the guide to create (offline) multi-tenant apps with Expo and AWS Amplify
Build a Realtime Chat App in React Native (tutorial for beginners)
Watching this Figma Crash Course to Begin Learning
Leveraging Figma for Prototyping, Mockups and Wireframes
Prototyping 101: Wireframes in Figma
Build a Wireframe for Recipe App using the above design
Build a Mockup for the Recipe App using the above design
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
Part IV Innovation for Startups: 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?