Learn Neo4j, Puppeteer and Xstream

OpenGraph images are the images you see when you paste a link into a social platform and it "unfurls" into an image, title, and description. This happens on Twitter, Discord, Slack, and many other platforms. This collection goes over everything from designing OpenGraph images in Figma, to implementing them in CodeSandbox, to returning headless browser screenshots from Netlify Functions, and finally using Cloudinary as a write-through cache. 

You will come away from this collection with the ability to ship an API that you can use on any of your sites, and also on-demand, that can generate images for not only OpenGraph unfurls, but also for Instagram, GitHub, and more. Using headless browsers with playwright to generate our images means we get full access to all the responsive power of CSS and all the logical power of JS to handle layout, importing assets like pngs, choosing different fonts, and more.

The image below is generated via the project you'll build and deploy in this course

![An example opengraph image](https://relaxed-payne-d1bfbe.netlify.com/opengraph?title=Building%20an%20OpenGraph%20image%20generation%20API%20with%20Cloudinary%20Netlify%20Functions%20and%20React&tags=figma,netlify%20functions,playwright&author=chrisbiscardi)

React is one of the web’s most popular frameworks for building JavaScript applications. 

If you know what you’re doing, React can drastically simplify how you build, use, and maintain code.

Whether you’re a React newbie or you’re ready for advanced techniques, you can level-up with egghead. Explore our in-depth courses, lessons, and community resources to build more powerful applications and crack open your career.

react

Building an OpenGraph image generation API with Cloudinary, Netlify Functions, and React

In this course we will learn some of the basics of getting data into and out of Neo4J, as well as touch on some of the libraries and tooling available in the Neo4J community ecosystem, which we will leverage to quickly create and use a full-featured GraphQL API.

We will start by learning how to run and interact with Neo4J locally. Then we will develop a graph model in which to store the data that we pull from SWAPI via REST. We will then create an Apollo GraphQL API driven by a few simple schemas which fit into this model. We will then write some simple code to crawl SWAPI and insert the data into Neo4J through our GraphQL API. Once there is data in the store, we will learn about some of the features in `neo4j-graphql-js` that make connecting and accessing our graph Nodes easier.

Neo4j delivers the lightning-fast read and write performance you need. Neo4j combines native graph storage, scalable architecture optimized for speed, and ACID compliance to ensure predictability of relationship-based queries.

neo4j

Build a Neo4J & GraphQL API

End-to-end testing assures you of a few things: that all the integrated pieces of an application properly function, all those pieces work together as expected, and your tests include and simulate real-user scenarios — something unit and integration tests just don't do.

This course introduces you to two great tools for E2E testing: 

* Puppeteer opens and runs applications in a Chromium browser and performs the actions it's given.
* Jest asserts that the integrated pieces work as expected and that add-on libraries like Faker and pixelmatch take our tests to the next level.

Over 9 lessons, we will create common application features and use Puppeteer and Jest to run different types of tests against them. You'll get practice using these tools to render content, mimic user activity, automate tests, and measure the overall performance of your application.

jest

End to End Testing with Google's Puppeteer and Jest

Puppeteer is a Node library which provides a high-level API to control headless Chrome or Chromium over the DevTools Protocol. It can also be configured to use full (non-headless) Chrome or Chromium.

puppeteer

When taking screenshots, it's important that the browser is big enough to show all of the content in the DOM that we want to screenshot. We can do this by setting the viewport.

Setting the viewport on a Playwright headless browser

Cycle.js is a framework where your app is described as a simple function taking an event stream as input and outputting an event stream.

cycle

This lesson is the first in an introduction to Cycle.js. We will see how to build from scratch a toy version of Cycle.js. See how to use RxJS to create simple web apps, and how to separate logic from effects.

Separate Logic from Effects in Cycle.js

In this lesson we are going to set up our basic app, set our environment variables, define our targeted viewport, and install Jest, Puppeteer, and Faker. We'll use these features to write our end to end tests. 

Setup and Install Dependencies for Testing with Google's Puppeteer

Now that we have our setup and environment ready for using Puppeteer to test our create-react-app, we can write our first tests. We will test our h1 and navigation, to make sure that they load correctly. In this lesson, we will be able to watch puppeteer open up a browser and evaluate our tests in real time. 

Test HTML Content on a Webpage with Puppeteer

In this lesson we are going to test a form submission by replicating keyboard input, mouse clicks, and touchscreen events. This will be done with random user information generated by Faker. We will test this in different contexts, including an iPhone 6 environment.

Replicate User Activity with Faker and Puppeteer

In this lesson we are going to test that a cookie is saved to the document whenever our login form is submitted. Then we will also learn how to set cookies from within our tests. 

Work with Document Cookies in Tests with Puppeteer

In this lesson we are going to write two tests that check our application for any console logs an page errors. We will also learn how we can log these out to our terminal. 

Check for Console Logs and Exceptions with Puppeteer

In this lesson we are going to take a screenshot and a pdf of our application. We'll add this to conditionally run when one of our tests fail. This way we can see what our test was seeing when it failed. These screenshots can help debug why tests fail. 

Save Screenshots of Applications with Puppeteer

In this lesson, we are going to fetch the Star Wars api from a React lifecycle method. Then inside of our tests we will intercept the request and abort it. Finally we'll test that our error message works as intended. 

Handle Page Requests in Tests with Puppeteer 

In this lesson we are going to send commands to the chromium browser with Puppeteer. These commands will enable us to calculate both the total number of CSS stylesheets used on the page and the ruleUsage for each of those stylesheets. With these metrics we will be able to calculate the percentage of unused CSS on the page. 

Get the Percentage of Unused CSS on a Page with Google's Puppeteer

In this lesson we are going to use the firstPaintTime metric from chrome's load times, as well as the navigation start from the W3C window metrics, to calculate how long it takes a page to paint. We will set up a quick function and test it out on google.com

Calculate a Page's First Paint Time with Puppeteer

In this lesson we are going to use Google's Puppeteer to gather metrics about a page's load time. We'll use a high level date subtraction method as well as gather data from the window performance timing. Then see how throttling the network to 3G affects the page's load time. 

Get a Page's Load Time with Puppeteer

It can be helpful when automating tests, metrics, and integration tools to know not only how much JavaScript there is on a page but to calculate how much is not being used. We are able to calculate the percentage of JS used by getting metrics from the window object. 

Get the Percentage of Unused JS on a page with Puppeteer

Take your end to end tests to the next level by comparing your current application's view with an already accepted screenshot. With the combination of running a live chromium browser, taking a screenshot and running a pixelmatch test, we are able to make sure our UI matches exactly as intended. We will make the test pass and then have it fail by adding an extra p tag to our App.js

Visual Differing Tests with Puppeteer and PixelMatch

The goal of this course is to teach you how to use the tools to write end to end tests. End to end testing involves assuring that all the integrated pieces of an application function and work together as expected. These types of tests simulate real user scenarios, essentially testing how a real user would use the application. They fill the gaps that unit and integration tests just can't cover.

Puppeteer is a core piece of these tools. When used correctly it can open and run applications inside a chromium browser and perform the actions it's given. Jest is used to assert that the integrated pieces work as expected and other add-on libraries such as faker and pixelmatch, take our tests to the next level. 



Course Introduction: Testing with Puppeteer and Jest

There are different types of data in Neo4J: Nodes and Relationships. We will cover the ways to create each type of data: creating nodes with properties, creating nodes with relationships, and creating constraints on nodes and relationships.

Create Nodes and Relationships in Neo4J with Cypher

Once there is data in Neo4J, we need to be able to access it. We will cover the structure of a cypher query to return parts of our graph.

Read Nodes and Relationships in Neo4J with Cypher

The data in our graph is unlikely to stay the same forever. We will cover the syntax used to find and modify existing data in different ways through the use of parameters.

Topics

Instructors

Content Type