🔑 Key Learning Outcomes

Understanding how to design OpenGraph images in Figma.
Building OpenGraph images as React components.
Deploying Netlify functions in JavaScript.
Testing OpenGraph images with Twitter Card Validator.
Using Cloudinary as a write-through cache.

👨‍🏫 About the Course

This course teaches you how to create an OpenGraph image generation API using Cloudinary, Netlify Functions, and React. You will learn the entire process from designing images in Figma to implementing them in CodeSandbox and deploying them on Netlify. By the end, you will be able to generate images for various platforms like OpenGraph, Instagram, and GitHub.

🎯 Target Audience

Ideal for developers interested in creating APIs and working with image generation.
Suitable for those with some experience in React and JavaScript.

✅ Requirements

Basic knowledge of React and JavaScript.
Familiarity with web development concepts like APIs and deployment.

📖 Course Content

Designing OpenGraph unfurls in Figma.
Building an OpenGraph image React component in CodeSandbox.
Setting up a new GitHub repo to deploy functions on Netlify with Make and netlify.toml.
Scaffolding and deploying a Netlify Function in JavaScript.
Using Playwright to screenshot the DOM and return an image from a Netlify Function.

Update Course