Learn Faunadb, Glamorous and Tweenlite


Next.js is one of the most popular server-side-rendered React frameworks you can use to build production-ready serverless applications in record time. 

On the other hand, Fauna is a flexible, serverless, distributed document-relational database. Fauna has a powerful GraphQL API and custom resolver support. 

Using Next.js and Fauna, you can build robust, feature-rich, production-ready full-stack applications without the hassle of managing any servers or databases.

In this course, Shadid guides you through building your very own full-stack serverless marketplace application using Next.js, GraphQL, and Fauna. 

You will learn,

- How to work with Apollo GraphQL Client in Next.js
- How to setup Fauna GraphQL
- Data modeling in Fauna
- How to write custom Fauna GraphQL Resolvers (UDFs)
- How to authenticate with Auth0?
- Stripe payment 



GraphQL is a query language for APIs and a runtime for fulfilling those queries with your existing data. GraphQL provides a complete and understandable description of the data in your API, gives clients the power to ask for exactly what they need and nothing more, makes it easier to evolve APIs over time, and enables powerful developer tools.

graphql

Full-Stack Serverless Applications with Next.js & Fauna

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.

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

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

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.

Fauna is inspired by [Calvin](https://blog.acolyer.org/2019/03/29/calvin-fast-distributed-transactions-for-partitioned-database-systems/), has [built-in GraphQL integration](https://docs.fauna.com/fauna/current/api/graphql/), and a query language based on lambda calculus. Be sure to check out the [Jepsen analysis](https://jepsen.io/analyses/faunadb-2.5.4) and the associated [chart of consistency models](https://jepsen.io/consistency)

The Complete Guide to FaunaDB

glamorous

Glamorous works great with whatever CSS framework you’re currently using. In this lesson we’ll see how to make glamorous integrate with your existing CSS solution so you can migrate overtime.

Use glamorous with existing CSS

AngularJS is an open-source JavaScript framework, maintained by Google, that assists with running single-page applications. Its goal is to augment web-based applications with model–view–controller (MVC) capability, in an effort to make both development and testing easier.

angularjs

AngularJS animations and TweenLite make it really easy to create cool 3d effects in your application.

3d Animations with Greensock TweenLite

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

In this lesson we’ll learn about the things you need installed and setup to start writing React components with glamorous.

Install glamorous to start styling React components

There are a few things you may be used to doing in CSS that you’ll need to learn how to accomplish using CSS in JS (in particular with glamor and glamorous). In this lesson we’ll go through a few examples.

Write CSS in JS with glamorous

We walk through creating a new Database in the FaunaDB console complete with some demo data. We do some exploration of the data, introducing concepts like Collections and Indexes, before showing an example FQL query that runs against the database. This sets us up to talk about FQL in future videos

Creating your first FaunaDB database

FaunaDB is a Calvin inspired hosted database marketed towards JAMStack and serverless users. It is geo-replicated across multiple providers (AWS, GCP, and soon Azure), uses a lambda calculus based query language (FQL) or the built-in GraphQL support, and is quick to get started with. Don't worry about the vocabulary here (Consistency, lambda calculus, etc), FaunaDB can be quickly put to work without reading any papers and without knowing what lambda calculus is.

* [Calvin Paper](http://cs.yale.edu/homes/thomson/publications/calvin-sigmod12.pdf) (warning: pdf link)
  - [Morning Paper Overview of Calvin Paper](https://blog.acolyer.org/2019/03/29/calvin-fast-distributed-transactions-for-partitioned-database-systems/) if you don't want to read the whole paper
* [jepsen report](https://jepsen.io/analyses/faunadb-2.5.4)

An Introduction to FaunaDB

FQL is the main query language for interacting with FaunaDB. It supports all JSON types, plus some additional types like Ref, Date, and Set. FQL is based in expressions and as such everything returns a value. This makes it easy to compose logic into larger queries.

Code shown in the shell:

```
Match(Index("all_customers"))
```

Overview of the FaunaDB Query Language

When working with FQL it's often the case that you'll encounter `Ref`s. `Ref`s don't have any fields on them though! So how do we access the fields? `Get`.

```
Collections()
```

```
Collection("customers")
```

```
Ref(Collection("customers"), "244075679454331401")
```

```
Get(Ref(Collection("customers"), "244075679454331401"))
```

```
Get(Collection("customers"))
```



Refs and Get in FaunaDB

FQL Page objects have additional fields like `before`, and `data`, that may make it seem like you need to `Select` to get at the underlying array of results. However, FQL supports passing Page objects directly to functions that operate on arrays and the function will transparently operate on the contained `data` field.

```
Paginate(Match(Index("all_customers")))
```

```
Drop(1, Paginate(Match(Index("all_customers"))))
```

```
Take(1, Paginate(Match(Index("all_customers"))))
```

FQL Page objects can be arguments to array functions

`Ref`s are opaque. To access the fields on a document associated with a Ref, we first need to run `Get` on our results and then we can access fields using `Select`

```
Map(
  Paginate(Match(Index("all_customers"))),
  Lambda("X", Get(Var("X")))
)
```

```
Map(
  Paginate(Match(Index("all_customers"))),
  Lambda("X", Select(["data", "firstName"], Get(Var("X"))))
)
```

Accessing fields through Refs with Select

Overview of the FaunaDB Query Language (FQL)

When working with FQL it's often the case that you'll encounter Refs. Refs don't have any fields on them though! So how do we access the fields? Get.

```
Collections()
```

```
Collection("customers")
```

```
Ref(Collection("customers"), "244075679454331401")
```

```
Get(Ref(Collection("customers"), "244075679454331401"))
```

```
Get(Collection("customers"))
```

Getting fields out of Refs with Get

FQL Page objects have additional fields like before, and data, that may make it seem like you need to Select to get at the underlying array of results. However, FQL supports passing Page objects directly to functions that operate on arrays and the function will transparently operate on the contained data field.

```
Paginate(Match(Index("all_customers")))
```

```
Drop(1, Paginate(Match(Index("all_customers"))))
```

```
Take(1, Paginate(Match(Index("all_customers"))))
```

FQL Page objects can be arguments to Array functions

Lambdas allow you to use functions like Map or Filter effectively in FQL. In this lesson we should the Lambda syntax by operating on some paginated results.

```
Paginate(Match(Index("all_customers")))
```

```
Map(
  Paginate(Match(Index("all_customers"))),
  Lambda("X", Get(Var("X")))
)
```

Using FQL Lambda in Array functions

`Ref`s are opaque. To access the fields on a document associated with a `Ref`, we first need to run `Get` on our results and then we can access fields using `Select`

```
Map(
  Paginate(Match(Index("all_customers"))),
  Lambda("X", Get(Var("X")))
)
```

```
Map(
  Paginate(Match(Index("all_customers"))),
  Lambda("X", Select(["data", "firstName"], Get(Var("X"))))
)
```

Search

Search Results

Full-Stack Serverless Applications with Next.js & Fauna

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

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

The Complete Guide to FaunaDB

Use glamorous with existing CSS

3d Animations with Greensock TweenLite

Install glamorous to start styling React components

Write CSS in JS with glamorous

Creating your first FaunaDB database

An Introduction to FaunaDB

Overview of the FaunaDB Query Language

Refs and Get in FaunaDB

FQL Page objects can be arguments to array functions

Accessing fields through Refs with Select

An Introduction to FaunaDB

Creating your first FaunaDB database

Overview of the FaunaDB Query Language (FQL)

Getting fields out of Refs with Get

FQL Page objects can be arguments to Array functions

Using FQL Lambda in Array functions

Accessing fields through Refs with Select