Menu Close

MERN Stack Web Course Material

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.

Facebook Group LinkWhatsApp Group

Dropbox link of All slides

Github page for FA18 Web classes Code
Github page for FA19 Web Classes

complete-example

We Would be building A movie Rental App, Complete Code can be downloaded from here 

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

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

A nice little tutorial to deploy REACT/NODE on Heroku together

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 {
"email":"[email protected]",
"password":"usman",
"name":"Usman Akram"
}
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

 

Leave a Reply

Your email address will not be published. Required fields are marked *