Welcome to List of Projects

• Udemy
  1. HTML & CSS Course
     (Instructor: Brad Traversy)
     1. HTML & CSS
        HBT Hotel
     2. CSS Flexbox
        EdgeLeger
     3. HTML, CSS: variables, animation
        Presentation Website
     4. HTML, CSS: variables, transition & transform
        Hamburger Menu Overlay
     5. HTML, CSS: variables, transition & transform, JavaScript
        Knowledge Timeline
     6. HTML & CSS
        CSS Dropdown Menu
     7. HTML, CSS Grid
        NewsGrid Website
     8. HTML, CSS, SCSS
        Portfolio Website with Sass
     
     
     9. Responsive Website | HTML, CSS Grid, Flexbox, Animation & More
        Loruki
        Inspired by: Brad Traversy on https://www.youtube.com/watch?v=p0bGHP-PXD4
  
  
  
  2. JavaScript Course
     (Instructor: Brad Traversy)
     1. JavaScript & Materialize Framework
        Task List
     2. JavaScript & Bootstrap Framework
        Loan Calculator - version 1
     3. JavaScript & Bootstrap Framework
        Loan Calculator - version 2
     4. JavaScript & Skeleton for UI
        Number Guesser
     5. Object Oriented JavaScript, Local Storage & Skeleton for UI
        Books List
     6. Asynchronous JavaScript & Fetch API, Bootswatch for UI - GitHub Finder
     7. Asynchronous JavaScript & Fetch API, Bootswatch for UI
        Weather
     8. JavaScript Iterator & Bootstrap for UI - Profile Scroller
     9. JavaScript, Module Pattern & Materialize for UI
        Tracalorie
     10. JavaScript, CRUD Front End (Webpack & Babel) & Bootstrap for UI - Microposts
         See project 029
  
  
  
  3. React Front To back
     (Instructors: Brad Traversy)
     1. React & GitHub APIs
        GitHub Finder
     
     
     2. MERN Stack: MongoDB, Express, React and Node.js.

        Front-End: React (using React Hooks and Context API), Axios, Async Await

        Back-End: Node.js, Express, Express Routes

        Database: MongoDB (using MongoDB Atlas)

        Packages: mongoose, bcryptjs, JWT - json web token, config, express-validator, react-transition-group

        Tools during development: Postman, MongoDB Compass.

        Contact Keeper
        Source Code on GitHub
     
     
     3. React & Redux, JSON-Server (for fake Rest API)

        Front-End: React (using React Hooks), Redux, MaterializeCSS, Material Icons, Fetch, Async Await

        Back-End: JSON-Server (the fake Rest API) from https://github.com/typicode

        Packages: moment, react-moment, concurrently

        IT Logger Note: since JSON-Server (for fake Rest API) is used, it works locally only.

        See project #065

  
  
  
  4. React
     (Instructors: Andrei Neagoie & Yihua Zhang)
     1. React & jsonplaceholder API
        Monsters Rolodex
        Source in GitHub
  
  
  
  5. React styled-components v5
     (Instructor: Tom Phillips)
     • Styled Components
  
  
  
  6. React Styled Components Tutorial and Project Course
     (Instructor: John Smilga)
     • Styled Components Tutorial #1
     
     
     • Styled Components Tutorial #2
     
     
     • attrs Method, CSS Helper Function, Animations
       Styled Components Tutorial #3
     
     
     • Themes, Media Queries
       Styled Components Tutorial #4
     
     
     • Hotel
  
  
  
  7. Angular Front To Back
     (Instructor: Brad Traversy)
     1. Angular Basics #1
        Angular basics with local users
     2. Angular Basics #2
        Angular basics with local users, toggle button, ngModel
     3. Angular Basics #3
        Angular Template Driven Form and Form Validation
     4. Angular Basics #4
        Angular Template Driven Form, Form Validation, Services, CRUD of posts using JSONPlaceholder API, Router, Navbar. Bootstrap for UI
     
     
     5. Dev Logger: BehaviorSubject, Local Storage
        DevLogger
     
     
     6. Client Panel

        Angular, Firebase, Flash messages, Login Authentication, Registration, Auth Guard For Routes, Template Driven Forms & Validation

        Front-End: Angular, Bootstrap for UI, Local Storage for saving settings

        Back-End: Firebase

        Database: Firebase (Cloud Firestore)

        Packages at front-end: firebase, @angular/fire, angular2-flash-messages

        Client Panel
  
  
  
  8. The Modern Angular Bootcamp
     (Instructor: Stephen Grider)
     1. Angular Template Syntax, Bulma for UI
        Password Generator
     2. Angular Basics, images assets, Bulma for UI
        Cards
     3. Pagination, Bootstrap for UI
        Pagination
     4. Modules in Angular, Routing with Modules, Semantic UI for UI (semantic-ui-css package)
        Modules, Routing, Navbar
     5. Lazy Loading of Modules in Angular, Routing with Modules, Custom Directive "times", Semantic UI for UI (semantic-ui-css package)
        Lazy Loading of Modules, Routing
     6. Advanced Routing - Lazy Loading of Modules in Angular, Routing with Modules, Custom Directive "times", Semantic UI for UI (semantic-ui-css package)
        Lazy Loading of Modules, Advanced Routing
     7. Advanced Routing - Lazy Loading of Modules in Angular, Routing with Modules, Custom Directive "times", Modal, Event bubbling and stop propagation, Output(), ng-content, Accordion, Semantic UI for UI (semantic-ui-css package)
        Lazy Loading of Modules, Advanced Routing, Modal, Accordion
        Direct continue of project #195 (and the final one)
     8. Reactive Forms with Validation, Bulma for UI
        Credit Card with Reactive Forms
     9. Angular Auth Module with Login and Registration, Semantic UI for UI

        Auth Module with Login and Registration component, Reactive Forms, Shared Module with Input Component, Custom Sync and Async Validators, BehaviorSubject, |async pipe, HttpInterceptor, Lazy Loading, Guard (canLoad) for lazy loaded module

        Uses ready-for use backed that uses sessions

        Auth Module with Login and Registration
     10. A Photo-Fetching App

         See project # 192

  
  
  9. Vue 2 - Essentials
     (Instructor: Stephen Grider)
     1. Identicon, usage of jdenticon package
        Identicon
     2. YouTube video browser, Bootstrap 5 for UI
        Video Browser
  
  
  
  10. Vue - The Complete Guide
      (Instructor: Maximilian Schwarzmüller)
      1. Vue 2 Form
         Form including Custom Control Component
      2. Intro to Composition API
         Code using Composition API
  
  
  
  11. Bootstrap Course
      (Instructor: Brad Traversy)
      1. Bootstrap
         LoopLAB
      2. Bootstrap, SCSS for custom style, Scrollspy
         Mizuxe
      3. Bootstrap, Video & Autoplay Modal, Photo Gallery with Lightbox for Bootstrap, Scrollspy, Slide Carousel, Slick Slide
         Glozzom
  
  
  
  12. TypeScript
      (Instructor: Stephen Grider)
      1. TypeScript: First App - Fetch JSON with axios package

         See Node.js project # 219

      2. Introduction

         See project # 219

      3. React, Redux, TypeScript
         Todos
  
  
  
  13. MERN eCommerce From Scratch
      (Instructors: Brad Traversy)
      1. Phase 1 - React, products are in js file.
         Phase 1
      2. Phase 2 - React, Node.js, Express, products are in js file at the backend.
         Phase 2
      3. Phase 3 - React, Node.js, Express, MongoDB. Products seeder for db
         Phase 3
      4. Phase 4 - React, Node.js, Express, MongoDB. Products seeder for db
         Phase 4
      5. Phase 5 - React, Node.js, Express, MongoDB.
         Project 243 works locally
      6. React, Node.js, Express, MongoDB. Final version
         eCommerce
  
  
  14. Advanced CSS and SASS
      (Instructor: Jonas Schmedtmann)
      
      
      1. Natours project
         1. Natours - part 1 of the site - using CSS
            Phase 1
         
         
         2. Natours - part 2 of the site - using one SCSS file
            Phase 2
         
         
         3. Natours - final site - using SCSS files
            Natours
      
      
      2. Trillo project using SCSS, Flexbox
         Trillo
      
      
      3. Nexter project using SCSS, Grid and Flexbox
         Nexter
  
  
  15. HTML, CSS & JavaScript
      (Instructor: Brad Traversy)
      1. Expending Cards
      
      
      2. Progress Steps
      
      
      3. Incrementing Counter
      
      
      4. Kinetic Loader



• Eduonix
  1. TypeScript
     (Instructor: Brad Traversy)
     • TypeScript: Classes, jQuery, Webpack
       Todos with TypeScript
  2. jQuery
     (Instructor: Brad Traversy)
     1. jQuery
        Content Slider
     2. jQuery, YouTube API, Fancybox
        YouTube Search Engine
     3. jQuery
        FAQ Slider



• Vue Mastery
  1. Intro to Vue 2
     (Instructor: Adam Jahr)
     Vue Intro
  2. Intro to Vue 2 - continue
     Vue Intro - cont.
  
  
  3. Real World Vue 2
     (Instructors: Adam Jahr, Gregg Pollack)
     • Part 1 - with hard coded data
       Vue 2 - Part 1
     • Part 2 - Vue Service, axios, JSON Server - works locally only
       See project 227



• John Bryce - Homework and Tests
  1. Lesson 4
  2. Lesson 5 Homework
  3. Lesson 10 - a Simple Way
  4. Lesson 10 - a Better Way
  5. Lesson 12
  6. Lesson 20 class
  7. JavaScript & Bootstrap Framework
     VAT Calculator
     Source in GitHub
  8. JavaScript & Bootstrap Framework
     Cone Volume - Version #1
  9. JavaScript, Local Storage & Bootstrap Framework
     Workers List Management
  10. JavaScript, Local Storage & Bootstrap Framework
      Workers (with tasks) List Management
  11. Object Oriented JavaScript, Local Storage & Bootstrap Framework
      Tasks Board - Project #1
      Source in GitHub
  12. Canvas
      Circle on Canvas
  13. Canvas
      Growing Rectangle Inside The Canvas
  14. Canvas
      Shapes on Canvas
  15. Canvas
      Shapes with Borders on Canvas
  16. Canvas
      Test: Sphere Volume and Circle on Canvas
  17. JavaScript Objects, Bootswatch for UI
      Draw Your Rectangle
  18. JavaScript Objects, Module Pattern & Bootstrap for UI
      Students & Grades
  19. OO JavaScript, Bootstrap for UI
      Questions and their answeres in Random order
  20. Object Oriented JavaScript, ES6 Modules, Local Storage & Skeleton for UI
      Books List
  21. jQuery
      jQuery - table with Edit option
  22. jQuery and OMDb API, Session Storage
      Movies - show details using Session storage
  23. jQuery and OMDb API, URL with parameter
      Movies - show details using parameter in URL
  24. jQuery, AJAX, Classes, ES6 Modules, URL with parameter, Session Storage, Loading Indicator & Bootswatch for UI
      Categories in Web Shop
  25. Promises, Animation & Bootswatch for UI
      Dice Roller
  26. JavaScript, AJAX, json file, jQuery, random images loaded dynamically, Bootstrap: navbar & tooltips
      DynamicPages
  27. jQuery Ajax, Classes, ES6 Modules & Bootswatch for UI
      Test: Countries Search
  28. HTML5, CSS3, Bootstrap, OO JavaScript, ES6 Modules, jQuery, CanvasJS, CoinGecko & CryptoCompare APIs.
      Project #2 - Cryptonite

      Also available in GitHub Cryptonite - Project #2

      Source code is available on GitHub Cryptonite Source Code

  29. React, Axios, Bootswatch for UI
      React Counters
      Source code is available on GitHub: React Counter Source Code
  30. React & Axios
      Filterable Products
      Source code is available on GitHub: React - Filterable Products - Source Code
  31. React, Axios & React Bootstrap for UI
      Sortable & Filterable Products
      Source code is available on GitHub: Sortable & Filterable Products
  32. React
      Tic Tac Toe - move suitable code to History component
  33. React, Class Components
      React Clock with Class Components
  34. React, React Hooks
      React Clock with Hooks
  35. React
      React: Form on Pop Up
  36. React Context with Classes, Axios, Async Await, Data from https://reqres.in API.
      Employees of the company.
  37. React using hooks (useState, useContext, useReducer) and context API, Axios, Async Await, Data from https://reqres.in API.
      Employees of the company.
  38. Node.js
      Node.js Calc
  39. Node.js
      Print numbers from 1 to n using recursion

      Prevent "Maximum call stack size exceeded".
  40. Node.js
      Node.js work with files and folders.
  41. Node.js, Express
      Users API and file
  
  
  42. Node.js, Express, express-handlebars
      Express session cookies
  
  
  43. Node.js, Express, Passport Authentication
      Register and Login using Passport
  
  
  44. Node.js, Express, Cookies
      Events List
  
  
  45. MySQL
      SQL Homework #1
  
  
  46. MySQL
      SQL Homework #2
  
  
  47. MySQL, mysql & dotenv packages, pool.

      See project 109

  48. MySQL, Express and Node.js.

      Server Side: Node.js, Express, cors

      Database: MySQL

      Main packages: mysql, express-validator, config

      Products API
      
  
  
  49. Users API.
  
  
  50. Test - Severs Status. React, Express, MySql

      Front-End: React (using React Hooks), Contex Api, Fetch API, Async Await, cors, Material UI

      Back-End: Express, Express Routes

      Database: MySQL

      Main packages in Front-End: @material-ui/core, moment, uuid

      Main packages at the Back-End: mysql, config

      Severs Status
      

      Teacher's solution: see project 124. Version I submitted: see project 137.

  51. Test - Severs Status - Simple version. React, Express, MySql

      Front-End: React (using React Hooks), Contex Api, Fetch API, Async Await, Bootstrap

      Back-End: Express

      Database: MySQL

      Main packages at the Back-End: mysql

      See project 145.

  52. Test - Products. React, Express, MySql

      Front-End: React (using React Hooks), Contex Api, Fetch API, Async Await, Bootstrap

      Back-End: Express

      Database: MySQL

      Main packages at the Back-End: mysql

      Products

  53. Angular

      See Angular Local Users in Technologies section under Angular (project # 149).

  
  
  54. MongoDB
      • See MongoDB actions using mongodb package in Technologies section under MongoDB section (project # 162)
  
  
  55. Angular, MongoDB, Express, Node.js
      • See Comments in Technologies section under Angular, MongoDB, Express, Node.js section (project #164)
      
      
      • Test: Angular, Express, MongoDB, Node.js. See Account Operations in Technologies section under Angular, MongoDB, Express, Node.js section (project #191)
  
  
  56. PHP
      • PHP basics - hw 1
        PHP Exercise 1
        PHP Exercise 2
      
      
      • PHP Test
        PHP Test
        PHP Test - short solution
  
  
  57. Project #3
      ObserVacation: follow vacations and get updated at real time
  
  
  58. Project #4
      ShopOnline - Angular, Express, Node.js and MySQL.



---

• Technologies
  1. React
     • React Context with useReducer & useContext hooks
       Counter with React Context
     • React with Class Components, Axios, JSONPlaceholder API
       React Todo List

       Base on https://www.youtube.com/watch?v=sBws8MSXN7A&t=2620s

     • React Hooks & Context API
       Expense Tracker

       Based on https://www.youtube.com/watch?v=XuFDcZABiDQ&t=1666s

     • React with Chart.js
       Fun with Charts and React

       Based on https://www.youtube.com/watch?v=Ly-9VTXJlnA

     • React, Redux and Reselect Package, JSONPlaceholder API, Fetch with cors
       Select Users using Reselect package

       Based on https://www.youtube.com/watch?v=XCQ0ZSr-a2o

     • React
       Wildfire Tracker
     
     
     • React, Hotels
       Hotels
     
     
     • React, CSS3
       Expanding Cards
     
     
     • React, CSS3
       Expanding Cards - ver 2
     
     
     • React, one chart, data comes from data.gov.il API

       Packages: react-chartjs-2, react-datepicker, date-fns, axios Interactive Chart

     
     
     • React, Two charts, Context API, data comes from data.gov.il API

       Packages: react-chartjs-2, react-datepicker, date-fns, axios Interactive Charts

     
     
     • React, Two charts, Redux for full state, data comes from data.gov.il API

       Packages: react-chartjs-2, react-datepicker, date-fns, axios Interactive Charts Prev. proj is #256

     • React, One chart, Redux for full state, data comes from data.gov.il API

       Packages: react-chartjs-2, date-fns, axios Chart

       Source Code in GitHub
     • React, reCAPTCHA - here client side only

       Package: react-google-recaptcha reCaptcha Test - client side only

     • React, reCAPTCHA - here client side only

       Package: react-google-recaptcha 3.0.0-alpha.1reCaptcha Test - client side only

       Same code as in project #277, but it doesn't disappear

     • React, reCAPTCHA - here client side only

       Package: react-google-recaptcha 2.1.0 reCaptcha Test - client side only

       Sometimes disappears

     • React, Redux, API

       React, Redux, API

     
     
     • React. Merge two objects. May be used to merge default settings with settings that come from server.

       Default settings are saved in json file.

       Merge two objects.
       Source Code in GitHub
     
     
     • React and Styled Components
       • Progress Steps
     
     
     • React and Material UI
       • Test React with Material UI
     
     
     • React, Typescript and dropdown with autocomplete
       
       
       Countries with react-autosuggest package.
       Source code on GitHub
  
  
  2. React, Firebase and Firestore
     • Authentication
       Users Auth
       Code is in project # 275
  
  
  3. Node.js and Express
     • Node.js and Express
       First Node.js & Express App on my Server in subfolder
     • Node.js, Express & OpenWeather API
       Get weather by city
     • Node.js, Express
       Members API

       Based on https://www.youtube.com/watch?v=L72fhGm1tfE&t=2640s

     • Node.js, Express
       Users API and file
     • Node.js, Express, express-handlebars
       Express session cookies
     • Node.js, Express, Passport Authentication

       Database: MongoDB (using MongoDB Atlas)

       Main Packages: mongoose, bcryptjs, connect-flash, express-ejs-layouts, passport-local

       Tools during development: MongoDB Compass.

       Register and Login using Passport

       Based on https://www.youtube.com/watch?v=6FOq4cUdH8k&t=222s

     • Node.js, Express. Solving CORS and more.
       Explanation
     
     
  4. React and Express
     • First React & Express Web Site in subfolder
       Customers API

       Based on https://www.youtube.com/watch?v=v0t42xBIYIs

     • Front-End: React (using React Hooks), Axios, Async Await
       Back-End: Express, Express Route
       Members API
     • First React & Express Web Site in subfolder using client/build of React and express.static('client/build').
       React build and Express server
     • React, Express and Routes in subfolder.
       React build and Express server and Routes
     
     
     • React, Express and cors

       React and Express on localhost using cors and not using proxy

       See project 054

     
     
     • Node.js, Express, Cookies
       Events List
     
     
     • React with Typescript, Node.js, axios, cors - Show PDF blob saved on server
       
       Source code on GitHub
       See project #400

  5. React on Server
     • React only (without backend) on server
       Code on GitHub See project #503
  
  

  ---

  6. MERN Stack: MongoDB, Express, React and Node.js.
     • First React, Express, Node.js & MongoDB Web Site in subfolder

       Front-End: React (using React Hooks), Axios, Async Await

       Back-End: Express, Express Route

       Database: MongoDB

       First MERN web site
     
     
     • Users Authentication using React, Express MongoDB

       Front-End: React (using React Hooks), Redux, Fetch API, Async Await, React-bootstrap

       Back-End: Express, Express Routes

       Database: MongoDB. User roles: user

       Main packages in Front-End: react-bootstrap, uuid

       Main packages at the Back-End: mongoose, express-session, bcrypt, cors, dotenv, connect-mongodb-session, express-mongo-sanitize

       Users Authentication: Login and Registration
     
     
     • Users and Admin Authentication using React, Express MongoDB

       Front-End: React (using React Hooks), Redux, Fetch API, Async Await, React-bootstrap

       Back-End: Express, Express Routes

       Database: MongoDB. User roles: admin, user/p>

       Main packages in Front-End: react-bootstrap, uuid

       Main packages at the Back-End: mongoose, express-session, bcrypt, cors, dotenv, connect-mongodb-session, express-mongo-sanitize

       Users and Admin Authentication: Login and Registration
     
     
     • Image Uploader, Users and Admin Login Authentication using React, Express MongoDB

       Front-End: React (using React Hooks), Redux, Fetch API, Async Await, React-bootstrap

       Back-End: Express, Express Routes

       Database: MongoDB. User roles: admin, user/p>

       Main packages in Front-End: react-bootstrap, uuid

       Main packages at the Back-End: multer, mongoose, express-session, bcrypt, cors, dotenv, connect-mongodb-session, express-mongo-sanitize

       Image Uploader, Users and Admin Login
       Source in GitHub
     
     
     • MERN Stack: React, Express, MongoDB and Node.js. ObserVacation

       Login and Registration, Users Authentication and Authorization, Real-Time Update using socket-io, Chart report, Image Uploader, Bootstrap UI design using Mobile-First approach.

       Front-End: React (using React Hooks), Redux, React Router, Fetch API, Async Await, Bootstrap for UI

       Back-End: Express, Express Routes

       Database: MongoDB. User roles: admin, regular user

       Main packages in Front-End: socket.io-client, chart.js, react-chartjs-2

       Main packages at the Back-End: mongoose, express-session, bcrypt, socket.io, connect-mongodb-session, express-mongo-sanitize, multer, dotenv

       ObserVacation: follow vacations and get updated at real time
     
     
     • Equipment manager: React, Express, MongoDB and Node.js.
       • Works locally. See project # 602
       
       
       • Works on server (on the root). See project # 603
  
  

  ---

  7. MySQL, Express, React and Node.js.
     • First MySQL, React, Express, Node.js Web Site in subfolder

       Front-End: React (using Context API), Fetch

       Using CORS, No usage of "proxy"

       Back-End: Express

       Database: MySQL

       Main package: mysql

       First work with MySQL on my web site
  
  
  8. MySQL, Express and Node.js.

     • Server Side: Node.js, Express, cors

       Database: MySQL

       Main packages: mysql, express-validator, config

       Products API
       
  
  
  9. Test - Severs Status. React, Express, MySql

     Front-End: React (using React Hooks), Contex Api, Fetch API, Async Await, cors, Material UI

     Back-End: Express, Express Routes

     Database: MySQL

     Main packages in Front-End: @material-ui/core, moment, uuid

     Main packages at the Back-End: mysql, config

     Severs Status
     

     Teacher's solution: see project 124. Version I submitted: see project 137.

  
  
  10. React, MySQL, Express and Node.js - basic (simple) version.

      • Client Side: React (using context API)

        Server Side: Node.js, Express

        Database: MySQL

        Main packages: mysql

        Tasks List with owner - see projects 129 and 140

      • Severs Status - Simple version. React, Express, MySql

        Front-End: React (using React Hooks), Contex Api, Fetch API, Async Await, Bootstrap

        Back-End: Express

        Database: MySQL

        Main packages at the Back-End: mysql

        See project 145.

      • Products. React, Express, MySql

        Front-End: React (using React Hooks), Contex Api, Fetch API, Async Await, Bootstrap

        Back-End: Express

        Database: MySQL

        Main packages at the Back-End: mysql

        Version I submitted: see project 146.

  
  
  11. Test - Products. React, Express, MySql

      Front-End: React (using React Hooks), Contex Api, Fetch API, Async Await, Bootstrap

      Back-End: Express

      Database: MySQL

      Main packages at the Back-End: mysql

      Products

      Version I submitted: see project 146.

  
  
  12. Angular
      • Angular with mock data in json format, Bootstrap for UI
        Angular Local Users
        Source in GitHub
      
      
      • Todo List using services and router.

        Front-End: Angular

        Back-End: JSONPlaceholder web site

        Todo List

        Based on: https://www.youtube.com/watch?v=Fdf5aTYRW0E&t=2209s

      
      
      • Angular: service with data from JSONPlaceholder API, Bootstrap for UI
        Angular Remote Users
  
  
  13. Angular, MySQL, Express, Node
      • Products (like Test, but with Angular instead of React)

        Front-End: Angular, Bootstrap for UI

        Back-End: Express

        Database: MySQL

        Main packages at the Back-End: mysql

        Products
  
  
  14. MongoDB
      • MongoDB actions using mongodb package

        See project 162

  
  
  15. Angular, MongoDB, Express, Node.js
      • Post Comments

        Front-End: Angular, Bootstrap for UI

        Back-End: Express

        Database: MongoDB

        Main packages at the Back-End: mongodb

        Post Comments
      
      
      • Comments

        Front-End: Angular, Angular Router, Bootstrap for UI

        Back-End: Express

        Database: MongoDB

        Main packages at the Back-End: mongoose

        Comments
      
      
      • Users Authentication (ver #1) using Angular, Express, Node.js, MongoDB

        Front-End: Angular, Angular Template Forms, Bootstrap for UI

        Back-End: Express, Express Routes

        Database: MongoDB. User roles: user

        Main packages at the Back-End: mongoose, express-session, bcrypt, cors, dotenv, connect-mongodb-session, express-mongo-sanitize

        Users Authentication: Login and Registration
        Source in GitHub
      
      
      • Test: Angular, Express, MongoDB, Node.js.

        Front-End: Angular, Bootstrap for UI

        Back-End: Express, Node.js

        Database: MongoDB

        Main packages at the Back-End: mongoose, cors, dotenv, express

        Account Operations

        Version I have submitted: see project 190.

      
      
      • Users Authentication (ver #2) using Angular, Express, Node.js, MongoDB

        Front-End: Angular, Angular Reactive Forms, NgRx for state management, RxJS, lazy-loading module, Bootstrap for UI

        Back-End: Express, Express Routes

        Database: MongoDB. User roles: user

        Main packages at the Back-End: mongoose, express, express-session, bcrypt, cors, dotenv, connect-mongodb-session, express-mongo-sanitize

        Users Authentication (ver #2): Login and Registration
      
      
      • Users Authentication (ver #3) using Angular, Express, Node.js, MySql

        Front-End: Angular, Angular Reactive Forms, NgRx for state management, RxJS, lazy-loading module, Bootstrap for UI

        Back-End: Express, Express Routes

        Database: MySql. User roles: user

        Main packages at the Back-End: expres, sexpress-session, bcrypt, cors, config, express-mysql-session, mysql2

        Users Authentication (ver #3): Login and Registration
      
      
  
  
  16. PHP
      • PHP basics - hw 1
        PHP Exercise 1
        PHP Exercise 2
      
      
      • PHP basics #2
        Navigation, include and require
      
      
      • PHP basics #3
        Client Info, Bootstrap for UI
      
      
      • PHP Contact Form
        Contact Form, Bootstrap for UI
      
      
      • PHP Exercise
        Split Full Name
        Code in GitHub
      
      
      • PHP Form
        PHP Form
        Code in GitHub
  
  
  17. GraphQL & React
      • Data in Table

        Data comes from GraphQL https://countries.trevorblades.com API

        Main packages: @apollo/client for (reaching GraphQL API), react-json-to-table, styled-components

        Data Table
  
  
  18. GraphQL
      • First server with GraphQL.

        Data is saved in local array

        Main packages: express-graphql, graphql, lodash

        See project 221. Run in browser: http://localhost:5000/graphql
  19. JSON Schema

      See project 233

  20. Next.js
      • Static Web Site
        Next Crash Course - Static Web Site
        Data comes from https://jsonplaceholder.typicode.com and ready during the build time
      • Next.js pages and routing
        Next Pages and Routing - Static Web Site
      • Next.js pages and routing - Events - data comes from local js file.

        See project # 298

      • Page pre-rendering and data-fetching
        Also uses json-server package for fake REST API.

        See project # 296

      • Api Routes

        See project # 297

      • Next.js Page pre-rendering and data-fetching - Events - data comes Firebase real time database.

        See project # 299

      • Next.js Page pre-rendering, data-fetching and api routes - Events - data comes Firebase real time database, emails and comments are saved in MongoDB.
        Next Events

        See project # 402

      
      
      • Next.js Authentication - users are saved in MongoDB.

        See project # 403

  
  
  21. Next.js and Markdown
      • Static Blog With Next.js and Markdown
        Simple Static Web Dev Blog
  
  
  22. Static sites using Hugo
      • First Site using Hugo

        Code: see project #410

        Based on video
      
      
      • Basic Hugo site

        Code: see project #412

        Based on video

        Simple starter template code
      
      
      • Basic Hugo site with controlled order of the files (posts)
        Deployed on GitHub Pages

        Code: see project #451

        Based on answer from Hugo support team

        GitHub repository of the public folder
      
      
      • Hugo book

        Code: see project #411

        Template

        Template code
      
      
      • Great Hugo book

        Code: see project #413

        Based on this template

        Template code
      
      
      • Hugo Zdoc theme - original

        Code: see project #414

        Based on this template

        Template link

        Template code

        
        

        Slightly updated version of the code:

        Deployed on Netlify

        Git Repository
      
      
      • Hugo site using Linode basic theme.
        Deployed on Netlify

        Code: see project #450

        GitHub repository of the public folder

        Linode basic theme code on GitHub
      
      
      • Hugo JamStack site # 1.
        Deployed on Netlify

        Code: see project #452

        GitHub repository of the full project

        Hugo Tale theme

        Based on Udemy JAMStack Course by Ray Viljoen.
  
  
  23. Git and GitHub
      See here
  
  
  24. Git and GitLab
      See here
  
  
  25. Batch Script - .bat file
      See here
  
  
  26. FastAPI - Python with REST API

      • Summary

      • Thunder extension for Visual Code is great for REST APIs.

      • Learning course - See project # 463/3
      
      
      • OCR - OCR - Optical Character Recognition
        Main package: pytesseract
        See project # 464
      
      
      • Open Blog
        • Show a blog with picture and text
        • Create a new post by uploading an image and writing a text
        
        
        • Client Side: React
        • Backend: FastAPI
          Packages: fastapi, uvicorn, antic, python-multipart, aiofiles, sqlalchemy
        • Database: SQLLite
        • See project #465



---



• Tasks
  • ...
  • React, Redux, hooks, CSS
    My Locations
    Code on GitHub
  • React, Redux, hooks, CSS
    My Locations2
    Code on GitHub
  • Node.js, Search using Algolia API, README.md
    See project 261 (I have submitted project 260)
    Code on GitHub
  • React, HTML5 Canvas, README.md
    Maze to Win - Fast Game
    Maze to Win - Full Game
    Source code on GitHub
  • React, Redux, Node.js, Express, MySQL
    StarWars - See project #281
    Source code on GitHub
  • React, Redux, TypeScript, CSS
    Products Store
  • React, Redux, Guess weather

    See project #406

  • TD
    See project # 700
  • JavaScript, images
    Images Slider
    Source Code on GitHub
    See project # 417
  • React components
    Grid Test
    Source Code on GitHub
    See project # 509



---



• YouTube
  1. Parallax Website: HTML, CSS. Works best on a desktop computer.
     Parallax Website
     Inspired by: Brad Traversy in https://www.youtube.com/watch?v=JttTcnidSdQ&t=822s
  2. REST API, Async Await, Classes, ES6 Modules & Bootswatch for UI
     CountriesFun
     Inspired by: https://www.youtube.com/watch?v=WDxvKjbWaMo
  3. jQuery Ajax, Classes & Bootswatch for UI
     CountriesFun - simple version
     Inspired by: https://www.youtube.com/watch?v=WDxvKjbWaMo
  4. Chart.js
     Fun with charts
     Inspired by: Brad Traversy in https://www.youtube.com/watch?v=sE08f4iuOhA
  5. Responsive Website | HTML, CSS Grid, Flexbox, Animation & More
     Loruki
     Inspired by: Brad Traversy on https://www.youtube.com/watch?v=p0bGHP-PXD4



---



• Summary
  
  
• React, MySQL, Express, Node.js Summary
  • Summary


• React, Redux, API Summary
  • Summary
  
  
  • React - Redux - API - starter pack - data comes from JSONPlaceholder API

    Basic site that uses JSONPlaceholder API See project # 282

    Source code on GitHub

  • React - Redux - API - starter pack - with mock data - fake db - using axios-mock-adapter package

    Site that uses mock data when API is called. See project # 453

  
  
• React
  • React Summary
  
  
  • React with Redux - basic site
    Code is in project #272
  
  
  • React Testing
    • React Testing Summary
    
    
    • Examples:
      • Simple App with Testing React and Typescript
      • Sundaes
        App with Testing React and Typescript - part 1
      • Sundaes - part 2
        Source on GitHub

        See project #288

  
  
  • React Styled Components
  
  


• TypeScript
  • TypeScript Summary


• Next.js Summary
  • Next.js Summary
  
  
  • Next.js SCSS starter

    See project #458 (old), 460 - the latest

    Next.js, SCSS, Bootstrap 5 - See project #419



• PHP Summary
  PHP Summary


• Angular Summary
  • Summary


• Angular, MongoDB, Express Summary
  • Angular, MongoDB, Express


• MongoDB Summary
  Summary


• Angular, MySQL, Express, Node.js Summary
  • Angular, MySQL, Express



• Vue
  • Vue Summary
  • Composition API - summary
  • Vue-Essentials-Cheat-Sheet
  • Vue 3 Composition API Video
  • Vue 3 Composition API Cheat Sheet


• JSON Server - fake REST API. - Site will work locally ONLY!!!
  Summary


• Firebase and Firestore
  Summary


• Docker summary
  Summary

  See project #285

• Kubernetes summary
  Summary


• Hugo summary
  Summary


• Templates with React
  • Vuexy
  • Metronic


• CSS Summary
  Summary


• Python
  Summary


• Machine Learning with Python
  Summary


• FastAPI - Python with REST API
  Summary

  Thunder extension for Visual Code is great for REST APIs.



• C#
  Summary



---

• Starters
  • React, Redux toolkit and API starter
    See project # 462
  
  
  • React, Bootstrap 5, Font Awesome and SCSS starter
    See project # 471
  
  
  • React, Redux toolkit, API, Bootstrap 5, Font Awesome and SCSS starter
    See project # 472



---

• Mini Projects
  1. Photo Gallery with Lightbox & Bootstrap
     Photo Gallery
  2. Video Modal with Bootstrap, jQuery & iframe
     Video Modal
  3. Slide Carousel with Bootstrap (including Menu)
     Slide Carousel
  4. Slick Slide, Bootstrap for UI
     Slick Slide for Testimonials
  5. CanvasJS
     Dynamic Chart With CanvasJS
  6. Image Overlay: CSS3
     Image Overlay



---



• Tools.
  • Macbook
  • Image Optimizations
  • Ngrok to expose IP address.
  • Tools



---



• Free Images Sites
  • pixabay.com
  • unsplash.com
  See more



---



• Sites Performance.
  • PageSpeed Insights
    See mobile and desktop sections
  • WebPageTest



---