Learn Algolia, Netlify and Vue

  Vue is a progressive framework for building UIs that allows you to incrementally integrate the technology into any existing project that you're working on. This makes it a great tool for you to learn as you can bring it anywhere.

This course is for learners just starting out in web development as well as for those who want to get up to speed on Vue 3 as fast as possible. You'll learn all the foundational skills of web development and how they are presented in Vue. 

We will start with an HTML, CSS, and JavaScript file as to not distract you with any possible tooling that goes on top of the building websites with Vue. 

You will incrementally build an app that sells comedy event tickets. In the end, you'll see how to deploy the application with Netlify Drag and Drop.

Vue (pronounced /vjuː/, like view) is a progressive framework for building user interfaces. Unlike other monolithic frameworks, Vue is designed from the ground up to be incrementally adoptable. The core library is focused on the view layer only, and is very easy to pick up and integrate with other libraries or existing projects. On the other hand, Vue is also perfectly capable of powering sophisticated Single-Page Applications when used in combination with modern tooling and supporting libraries.

The Beginner's Guide to Vue 3

Starting from a prebuilt frontend, Jason Lengstorf guides you through the creation of a "Corgi Up-boop App" that uses Netlify Functions and Hasura. You can view [the deployed final product on Netlify](https://egghead-serverless-functions.netlify.app/).

You'll set up the Netlify CLI, and configure a local development environment before writing and deploying functions with a few different use cases.

The first example function bypasses CORS restrictions to retrieve corgi data from an example third-party API.

Next, you'll configure environmental variables to securely communicate with the Unsplash API without exposing private keys to the client.

Serverless functions don't persist data by themselves, so we will use  Hasura to create a GraphQL API for tracking the number of "boops" each corgi receives.

This course is an excellent illustration of the speed of Serverless functions, and how fast you can implement functionality in your web applications.

An all-in-one workflow that combines global deployment, continuous integration, and automatic HTTPS.

netlify

Build a Corgi Up-boop Web App with Netlify Serverless Functions and Hasura

How does e-commerce work on the Jamstack? 

Jason Lengstorf and [Thor 雷神](https://twitter.com/thorwebdev) teamed up on _Learn With Jason_ to [build a serverless Stripe Checkout implementation](https://www.learnwithjason.dev/sell-products-on-the-jamstack). This collection is a cleaned up, egghead-style tutorial for selling products on a Jamstack site using Netlify Functions and Stripe Checkout.

Sell Products Using Stripe Checkout and Netlify Functions

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

Ever built a website? Did it have more than one page?

If it did, you learned quickly how essential routing is to the success of your project. And in so many frameworks routing is a painful and complex thing to learn.

But not in Vue!

Vue has an incredibly clean and powerful library called vue-router that takes care of everything you could need.

In this course, we'll cover what you need to know to get started with vue-router.

A Journey with Vue-Router

A short list of screencasts to cover essentials of [Gatsby](https://www.gatsbyjs.org/) to get started and have enough knowledge to become dangerous. 

The content comes from multiple instructors that have each covered different essentials, this cherry picks some of the most important concepts.

Videos in this collection cover these topics:
- installing plugins
- creating pages
- navigating between pages
- adding optimized images
- theming your styles
- deploying your site

Gatsby is a blazing fast static site generator built with React. Gatsby gives you all of the modern JavaScript tools you want; set up and ready to go out of the box.

gatsby

Up and Running with Gatsby

Modern applications know how to keep users informed of realtime updates through notifications, popups, and other messages.

On the development side, the ability to not only create web apps but have them communicate in realtime is a quirky, standout skill for your resume. It’s interesting, useful, and powerful.

In this course, Mark Barton will show you how to use Socket.io to facilitate bi-directional client-server communication and notifications using Vue on the frontend. Socket.io is a JS library that connects a client-side library to a node.js server. In the course, you’ll see how to use Socket.io to broadcast simultaneously to all or targeted clients based on filters you set up — so the right people see the right message at the right time.

You’ll learn to set up and connect Socket.io with node.js and Vue, and you’ll get practice making informed, complex architectural decisions around realtime broadcast messaging.

Vue and Socket.io for Real-Time Communication

Today’s users expect great things from their search experiences — speed, relevance, and usability, to name a few. Algolia provides developers with out-of-the-box and customizable search experiences that are a joy to build.

This introductory course on the Algolia search solution focuses on the user-facing part of search. Using the Algolia InstantSearch.js front-end library, we’ll see how to build an engaging search experience in no time. (28 minutes, to be exact.) 

**Prerequisites:** 
You don’t need previous experience with search to follow this course — we’ll use an example index with an e-commerce data set preconfigured. We will work mainly in JavaScript, so basic JS knowledge is expected.

If you want to play with your own index settings and data set, you can [create a free Algolia account here](https://www.algolia.com/users/sign_up/hacker/?utm_medium=link&utm_source=egghead&utm_campaign=education), but this is not required to follow along with this first course. 

Algolia's full suite APIs enable teams to develop unique search and discovery experiences for their customers across all platforms and devices. Type a query. Click a link. Open an app. Everything your customers do sends a signal about what they want. Algolia decodes that intent to deliver the right content - instantly.

algolia

Getting Started with Algolia InstantSearch.js

This application serves as an introduction to building products with a JAMStack and Serverless approach. We cover everything from the beginning:

* starting with the Gatsby client
* handling authentication with Netlify Identity
* Shipping a GraphQL server on Netlify Functions
* Building in access control with a serverless capable database

It uses tools that remove as many of the barriers as possible while also allowing upgrading in the future. Netlify Functions can grow into AWS Lambda, Netlify Identity can grow into Auth0 or Cognito, and FaunaDB can grow into DynamoDB.

Building a Serverless JAMStack Todo app with Netlify, Gatsby, GraphQL, and FaunaDB

This collection is a sequel to the [Building a Serverless JAMStack Todo app with Netlify, Gatsby, GraphQL, and FaunaDB](https://egghead.io/playlists/building-a-serverless-jamstack-todo-app-with-netlify-gatsby-graphql-and-faunadb-53bb) collection. In this collection we take the TODO application we built and convert it to run using Netlify Identity, AWS Lambda (using the serverless framework) and DynamoDB. We cover

* Fauna vs DynamoDB and when to use each
* Setting up AWS accounts
* Creating DynamoDB tables and data modeling differences between Fauna and Dynamo
* Converting our Netlify Functions deployment to a Serverless Framework deployment
* Implementing Custom authorizer functions on AWS

It uses tools that remove as many of the barriers as possible. Netlify Functions grows into Serverless Framework adn AWS Lambda, Netlify Identity is kept around, and FaunaDB can grows into DynamoDB.



FaunaDB is a global serverless database that gives you ubiquitous, low latency access to app data, without sacrificing data correctness. It eliminates layers of app code for manually handling data anomalies, security, and scale, creating a friendlier dev experience for you and better app experience for your users.

faunadb

Converting a Serverless App to run on AWS Lambda and DynamoDB with Serverless Framework

***Note: RxJS imports have changed since the publication of this course, these changes to RxJS have been reflected in the code examples underneath each lesson. The concepts being taught on RxJS are still applicable.***

Vue.js is an amazing framework that can easily update and reflect user input using templates and data-binding. But there are many scenarios where complex asynchronous behaviors (like loading data, handling "pending" states, timeouts, etc) are solved much easier by leveraging the streaming capabilities of RxJS. This course covers how to setup and use the features of "vue-rx" to enable streams within your templates and easily solve complex scenarios.

Build Async Vue.js Apps with RxJS

Progressive Web Apps are just Web pages, but with superpowers.  They load under uncertain network conditions, even offline. They’re fast and engaging, providing the best user experience. They can be installed on your smartphone if the browser supports it, feeling like a native app.

In this course I’m gonna show you how to take an existing Single Page App made in Vue.js and pragmatically convert it to a Progressive Web App by creating a web manifest, then it goes through caching static assets, external resources and streams using service workers, applying code-splitting and lazy loading, notifying new versions of the app or wether is online or offline, understanding the preload and precache directives, finishing up by showing how to audit a Progressive Web App.

Offline-First Progressive Web Apps (PWA) in Vue.js

Vue is known for being super easy to pick up and quickly build great applications using the built-in template bindings and directives. As your application grows in complexity, you'll need finer control of your components.

In this course, we’ll define where content of a component should land when you define the content inside of a parent component with Vue slots and manage that relationship with slot-scope. We’ll continue with dynamic and async Vue components as well as use JSX inside Vue for complete JavaScript control of your components. 

This course provides an overview of Advanced Vue.js Components with quick demonstrations on how to leverage Vue Component patterns.

Advanced Fine-Grained Control of Vue.js Components

In [Use TypeScript to Develop Vue.js Web Applications](https://egghead.io/courses/use-typescript-to-develop-vue-js-web-applications) we’ve seen how TypeScript Vue apps development by creating class based components and using decorators.

This course will extend it, showing you how you can use Vuex with TypeScript in order to manage the state of your Vue app. We’ll see how to type-safe your store, organize the state in modules, modify it using mutations and actions and write Vuex plugins, all by creating a beer shop app throughout the course.

Vue.js State Management with Vuex and TypeScript

This course walks you through the steps of creating a News web app using Vue.js and the Nuxt framework. You will learn how to create dynamic pages for each section of your application and load, store, display, filter, and style the data. Then end result will be a News app with multiple category pages, comments for each section, and user pages.

Create a News App with Vue.js and Nuxt

TypeScript is a powerful JavaScript superset which brings you first-class static type-checking along with latest ECMA Script features. Vue is one of the most modern libraries for managing the view layer.

Angular has fully adopted TypeScript as its language, and React has broad support for it. But, what about Vue?

This course will show how to take full advantage of TypeScript static typing on Vue apps by using class based components, typing directives and using decorators.

Use TypeScript to Develop Vue.js Web Applications

Vue.js has a first-class ecosystem to help construct Vue.js apps. This includes Nuxt.js which enables server-rendered applications and a page-based approach. 

This course will start with an empty app and walk through how to use Vue.js for building the app, Nuxt.js for organizing the app, and Vuex for managing state.

Build a Server Rendered Vue.js App with Nuxt and Vuex

Vue is a "progressive framework for building user interfaces." Its core library is designed to be fast and flexible and is only focused on the view layer.

In this course, you'll gain a basic understanding on how to construct components and nested components and see how Vue reactively keeps the DOM up to date when data is changed. You should get a taste of what Vue has to offer and gain a better understanding of how you can use it for your own application development.

Develop Basic Web Apps with Vue.js

Create a serverless application and deploy it in under thirty minutes!

We'll be using Netlify, Vite, TypeScript, and React in our project. This stack synergizes extremely well for rapidly developing professional-quality applications. 

If you haven't heard of Vite, it's the French word for quick! It's also a build tool that consists of a dev-server and an extremely fast bundler. It makes for a rapid development loop.

As for the rest. Netlify makes hosting fast and easy with serverless functions and continuous deployment. React enables you to quickly create reusable components. And TypeScript helps you write cleaner code that is easier to refactor. 

So get started and learn how to use this stack in your own applications!

Deploy a Serverless API React Application with TypeScript

When you are first building your blog site, it can be difficult to choose what content management system you want to use, and choosing a new framework can be daunting. They can be overwhelming and have a large learning curve.

Open up your knowledge of a powerful Nuxt module with Nuxt Content! Nuxt has a low barrier of entry and you don't have to fight with a content management system or API keys. 

In this course, you will learn how to create your own blog with just Nuxt and a folder of markdown files. Ben will take you from creating your Nuxt project from scratch all the way to deploying your digital garden on Netlify. 

Ben Hong is one of the core team members over at Vue.js and has developed this course to give you a concrete understanding of Nuxt Content and how to build your blog efficiently. 

Build a Digital Garden with Nuxt and Nuxt Content Module

**Get started building dynamic apps with GraphQL and Vue3.**

As your app scales, so does the complexity of managing your routes and API endpoints. 

It gets tiresome. 

But this aspect of web development can be streamlined considerably! 

GraphQL is a powerful tool for querying and mutating your data. In this course, we are going to create a Vue3 app that leverages GraphQL to create a dynamic front end.

But what does GraphQL *do*? 

Its power comes from giving you a *single* endpoint that you make all your queries to. Instead of making a request to a specific endpoint and getting a fixed response, you can write flexible queries to a single endpoint.

![REST vs GraphQL diagram](https://res.cloudinary.com/dg3gyk0gu/image/upload/v1638989029/course-resources/create-a-graphql-powered-vue-3-application/rest_vs_graphql.png)

Vue3 has some great new features that we will be exploring, such as the setup script syntax. But you won't just be exploring Vue3's new features, we will be building a dynamic front end with an index, view pages generated from data, and forms.

To make our frontend dynamic, we will be powering it with GraphQL. We start with the basics by creating queries but we move on to more advanced topics such as query params, mutations, and pagination.

To actually use GraphQL in our Vue app we will be using the Vue Apollo Client. Which gives us convenient methods for making queries, getting the data back into the client, and handling errors.

## Gain These Skills

- Add GraphQL to a Vue 3 project
- Query and mutate data with GraphQL in Vue 3
- Create data-driven views with Apollo client
- Handle routing within a Vue 3 project
- Implement optimistic updates and infinite scroll

## Prerequisites

Some entry-level knowledge on Vue and GraphQL is recommended, but this course is beginner-friendly enough to where it isn't a strict requirement.

If you want to build a deeper foundation for both Vue and GraphQL we have a couple of awesome courses that you can hack through. 

For Vue, check out **[The Beginner's Guide to Vue 3](https://egghead.io/courses/the-beginner-s-guide-to-vue-3-1c46da8b),** which is also by Kevin. It's great for both newcomers to web dev and veterans alike. 

And for GraphQL, work through **[GraphQL Query Language](https://egghead.io/courses/graphql-query-language)** from Eve Porcello. Eve literally wrote the book on learning GraphQL and her course is similarly top quality. 

## What's Next?

Progressive Web Apps are a more advanced topic, and converting an existing Single Page **Vue** App into one makes for an excellent follow-up project. **->** [Offline-First Progressive Web Apps (PWA) in Vue.js](https://egghead.io/courses/offline-first-progressive-web-apps-pwa-in-vue-js)

If you want to take your **GraphQL** game to the next level, then becoming an expert in designing GraphQL schemas is the way to go. **->** [Designing GraphQL Schemas](https://egghead.io/courses/designing-graphql-schemas-99db)

And I know the following recommendation is a React course but *it really is that good*. You will learn some **advanced** techniques that will be applicable to Vue or any other Apollo compatible framework that you work with. **->** [Manage State in React Apps with Apollo Client and GraphQL](https://egghead.io/courses/manage-state-in-react-apps-with-apollo-client-and-graphql-a45b3b89)