Teach on Udemy

Turn what you know into an opportunity and reach millions around the world.

Learn More

Your cart is empty.

Keep shopping

Full Stack Grow

Name: Full Stack Grow
Rating: 4.9 (7 reviews)

Building a scalable web app in the Cloud from the ground up using web components, Docker containers and HarperDB

Created bySafa Alai

Last updated 12/2020

English

What you'll learn

How to program a full-stack web application and release it to the Cloud

Course content

30 sections • 119 lectures • 17h 5m total length

Introduction5:10
Introduction to the course.

Introduction to Part I: Source Control2:02
What is source control and why you need it.
Install Steps for Windows2:27
Install everything you need to use Git on Windows.
Install Steps for Mac4:29
Install everything you need to use Git on Mac.
Create a Git Repository4:53
Learn how to create a repository on GitHub and clone it to your local machine.
Working with a Git Repository3:27
Learn how to do basic source control operations with Git and GitHub.

Introduction to GitHub Flow4:35
Learn what GitHub flow is and how it enables you to work with a team of developers.
Setup4:09
Set up a repository to experiment with GitHub Flow.
Branching3:58
Learn how to create and work with a Git branch to develop you application feature.
Rebasing5:52
Rebase to bring in to your Git feature branch changes made by other developers on the main (master) branch.
Pull Requests12:46
Use pull requests to solicit opinions from team mates before merging your feature branch back into the main branch.

Introduction to Part II: Web Components2:09
What are web components and why we are we using them for web development.
Installing NodeJS for Mac1:27
Install NodeJS for the Mac in preparation for using StencilJS.
Installing NodeJS for Windows1:19
Install NodeJS on Windows in preparation for using StencilJS.
Introduction to Stencil.js10:30
Initialize your first StencilJS project and take a peek under the hood to see how StencilJS works.

The Notes App: Intro1:28
Discuss the design of the Notes App to understand what we will build.
Notes App Cleanup6:41
Clean up hello world Stencil app to prepare for building the Notes app.
Generate notes-list Component4:19
Create your first Stencil component: notes-list
Start Documenting11:24
Learn about documentation with Typedoc.
Start Testing13:03
Learn about testing with Stencil and Jest.
Connect notes-list to the Notes App5:45
Connect the notes-list component into the app and see it display a dummy list of notes.

Create a Data Library5:01
Learn how to fetch data using a data library and how doing so makes it easier to test your code.
Connect notes-list with Your Data Library9:20
Get notes-list to use your new data library.
Define a Data Format for Your Notes List1:58
Define a data schema to display a real notes list.
Implement notes-list with Data12:57
Update notes-list to show an actual notes list with data.
Update notes-list tests to handle data9:31
Update our tests with real data. Learn about mock functions in Jest.

Detecting Mouse Clicks3:30
Learn how to respond to mouse clicks.
Emitting Events10:18
Connect web components to one another through custom events. In this part we look at how to send these events.
Detecting Events2:39
Connect web components to one another through custom events. In this part we look at how to receive these events.
Responding to Events9:44
Connect web components to one another through custom events. In this part we look at respond to a received event.

Create the Note Component4:37
Create the note component to handle displaying note text.
Passing a Parameter to a Component5:57
Learn about component properties, how they behave like html attributes, and how they can be used to pass data to components.
Format the note display8:38
Practice using CSS to format the display of the note.
Add Header Bar & Close Button7:08
Add necessary navigational elements for our note.
Make the Close Button Work
React to the Close Note Event
Add getNote to NotesData5:53
Add a new function to the data library to get data. This helps us get into the practice of using the data library to get data.
Display the Note Title6:25
Practice rendering data in a component html.
Note Text Data5:34
Define a new data element: the note text.
Display the Note Text

Editing a Note3:44
Save Library Function4:36
Introduce the saveNote function to the NoteData library.
Save Button9:39
Create the save button, clean up styling, and add tests.
Getting and Saving Changed Values16:49
Learn how to access the web component from code so you can query the values of input fields in the component. Also learn advanced testing techniques.
Event Listener Targets12:50
Learn about event listener targets to communicate between components.
Update the Notes List on Saving a Note
addNote Library Function11:31
Add the addNote function to the NoteData library.
Add Note Button17:01
Create the Add Note button and connect it to the addNote library function.
Refactor NoteData.ts23:43
Modify NoteData so notes can be deleted.
Delete Note

Requirements

Basic Javascript, Basic HTML and CSS, Basic knowledge of SQL

Description

Want to develop your web app from the ground up with everything you need to grow with your users? This is the course for you as it wraps into a tidy bundle not only all elements of full-stack development but also practices necessary to grow your app.

For web development, we focus on web components to give you the most modular method for developing a web app possible. But we do this without the overhead or the restrictions of a framework, instead relying on Stencil.js, a compiler that combines the power of Typescript with some of the convenience of React. But best of all, after compiling your app, Stencil.js gets out of the way and leaves no overhead of its own behind.

And right here from the very start, we integrate testing with Jest and Puppeteer. Testing is tightly integrated with every lesson and as we build our app, we develop testing with practically each lesson, learning dozens of tips and tricks on how to test effectively.

For our server, we use Node and Express and keep things consistent by again using Typescript and Jest to write more modular code and tightly integrate testing. But then we go a step further by wrapping everything into a Docker Container as a first step to a micro-services architecture. We go into depth here with everything you need to create a fast and responsive development environment that makes it easy to write code fast while keeping your tests up to data.

On the database, we go with a new and powerful database offering from HarperDB that combines much of the best of both SQL and NoSQL databases and makes database development a breeze. But here again we create tools to enable you to scale up your development by separating database schema development from your production code.

To top things up we also cover source control with Git and Github, going into depth on the work flow needed to enable you to develop a project either on your own or as a team. And at the end of it all, we will push everything up to Google Cloud in a few easy steps and see everything work the first time, thanks to all the work we did in testing.

This course then gives you everything you need to get going with a serious web app, that puts full control into your hands and enables you to build your app from a hobby up to a highly successful business.

Note: Each lesson will have a resource file showing what the code should look like at the end of the lesson. You can also find the code on GitHub at safaalai/notes.

Who this course is for:

Anyone who wants to build a cloud-based web application

Full Stack Grow

What you'll learn

Explore related topics

Course content

Introduction1 lecture • 5min

Part I - Source Control With Git5 lectures • 17min

Part I - GitHub Flow5 lectures • 31min

Part II - Getting Started with Web Components4 lectures • 15min

Part II - Building the Notes App6 lectures • 43min

Part II - Introducing Data5 lectures • 39min

Part II - Formatting & Styling Web Components3 lectures • 20min

Part II - Make Notes List Interactive4 lectures • 26min

Part II - Displaying a Note7 lectures • 44min

Part II - Edit, Add and Delete8 lectures • 1hr 40min

Requirements

Description

Who this course is for: