This page contains all of the material of my Web Technologies Classes. Feel free to bookmark download or distribute its content its all free. Join my classes for a roller coaster ride.
Always keep in mind I am not a guru. Please keep me posted with anything which you know and I don’t.
https://usman-recipes.herokuapp.com/
complete-example This is a super simple example connecting node with react.
minicab-server A full functional node api built with Node and Express Generator
Express App Generator Clean Install Repo
We Would be building A movie Rental App, Complete Code can be downloaded from here
MERN Stack Technology OverView
HTML/CSS/JS
Lecture 01 Internet and WWW
Lecture 02 HTML and CSS Basics
Lecture 03 More Basic HTML and CSS
Lecture 04 Page Sections and the CSS Box Model
Lecture 05 Floating and Positioning
Lecture 08 HTML Forms
Lecture 09 Server Browser Interactions //Don’t touch php its no go area 🙂
Lecture 10 Form Validations and Regular Expression
Lecture 12 Basic JavaScript for Client Side Programming
Lecture 13 More JavaScript and DOM // Don’t touch prototype its a no go area 🙂
Lecture 14 Object-Oriented JavaScript
Lecture 15 Advanced JavaScript and DOM
JQuery
Jquery Consume API with fetch
Basic JS
Bootstrap 4
Positioning and flex
Node
0- JS OOP
1- Node
2- NPM
3- RestFul API Using Express
4- Sync ASync JS
5- CRUD With Mongo and Mongoose
6- Mongoose Relationships
7- Authentication and Authorization
8- Handling Errors
9- Deployment
React
1- Intro
2- Components
3- Pagination Filtering and Sorting
4- Routing, Quick Start
5- Forms
6- Calling Backend Services
7- Authentication and Authorizations
8- Deployment
Hand Picked tutorials
How to use Command Prompt for beginners
Mastering Wrapping of Flex Items
How to deploy a create-react-app with an Express backend to Heroku
File Upload With Multer in Node.js and Express
Heroku Deployment Sequece
only once
heroku login
git init
then
git add -A ; git commit -m ‘Adjustments’ ; git push heroku master ; heroku logs –tail
Sample API to work with
Base URL: https://usman-vidly.herokuapp.com/api/
| Method | URL | Description |
|---|---|---|
| POST | /users | { |
| POST | /auth | { “email”:”[email protected]”, “password”:”usman” } |
| GET | /users/me | set x-auth-token generated from login
eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJfaWQiOiI1Y2FkYzMyZmJiZWZhNDAwMTZhZmYxZTIiLCJpc0FkbWluIjp0cnVlLCJpYXQiOjE1NTQ4OTMwMTV9.Gyf-aXG1Yb6w2u-l_KsZopRXStxSr-YgvqAYMfrozNs |
| GET | /movies | get all movies |
| GET | /generes | get all generes |
| POST | /geners | { “name”:”Pakistani Drama” }also set x-auth-token |
| PUT | genres/5cadcc4dbbefa40016aff1ea | Modify genre by ID set name |
| GET | genres/5cadcc4dbbefa40016aff1ea | get One Genre |
| DELETE | genres/5cadcc4dbbefa40016aff1ea | Delete One Genre |