A fun challenge coming out of the modern smartphone world is to identify a movie based only on a sequence of emoji. Sometimes the emoji “spell out” the words in the title, while other times they identify key plot themes. Test the emoji game of all the movie buffs you know by building a Movie Emoji Quiz app.

In this tutorial, we will build the app using the Remix full-stack web framework, a Fauna database, and Clerk for authentication and user management. Remix is a relatively new, open-source framework for React that has been gaining traction. Fauna is a developer-friendly, cloud-based database platform that offers modern features, such as real-time streaming and GraphQL. Clerk, an authentication provider built for the modern web, has a first-party 

 and integrates with Fauna through its JWT templates feature.

A brief web search didn't come up with any existing Remix and Fauna tutorials. And then I found this tweet from Ryan Florence (

That sold me on moving forward in building with this stack.

This tutorial makes the following assumptions...

Experience with React components and hooks

 accounts already set up (if you haven’t done so, do it now... we’ll wait)

The first step is to create a new application from the Clerk dashboard. We’ll name this application 

 authentication strategy selected. We’re also going to choose 

 as the social login providers, but feel free to select whichever ones you and your friends use.

 button and your Clerk development instance will be created.

The next step is to create the Remix project. Run the following command in your terminal:

It may prompt you to install the create-remix package. Then respond with the following:

It will then ask “TypeScript or JavaScript?”, we’re going with 

 on this one, but that’s up to your personal preference.

As the instructions state, change into the app directory with 

Now install the two dependencies we need for this application:

 to create an environment variables file and replace 

with their respective values from your Clerk instance, which you can get from the 

Once those environment variables are set, spin up the Remix dev server:

To share authentication state with Remix routes, we need to make three modifications to the 

From the Fauna dashboard, create a new database. We named ours 

We only need to create one Collection for this application. You can do so either in the Dashboard UI or in the interactive query shell.

To do it in the shell, type the following:

 button. If it was successful, you should see similar output.

We’re going to seed the database with a few examples to get started. If you’ve never used the Fauna Query Language (FQL) before, the syntax may look a little funny.

This will map over the examples array and create a new document with challenge data for each item in the Challenge collection.

 tab to validate that the data is all set. You can even make edits directly from the user interface if you prefer.

While we’re here, let’s navigate over to the 

 tab and write a couple FQL functions we will need later.

, and then paste the following function body:

This function will get all the challenges and include the unique document ID inside each data object.

You can test out the functionality in the Shell by running:

The second function we’re going to define is called 

 and will take the unique document ID parameter and return the respective challenge data or 

That’s all of the custom functions we’ll need here.

Although Fauna offers built-in identity and basic password authentication, it requires that you manage the user data yourself and does not provide features like prebuilt UI components, 

 access, and other auth strategies such as OAuth social login and magic links. Clerk provides these features and more without the hassle of managing your own user and identity service.

The Clerk integration with Fauna enables you to authenticate queries to your Fauna database using a JSON Web Token (JWT) created with a JWT template.

From your Clerk dashboard, navigate to the 

Take note of the default template name of fauna (as this will come up later). You can leave the default settings and optionally add your own custom claims using convenient shortcodes.

While keeping this tab open, go back to the Fauna dashboard and navigate to the 

 as the name to identify this access provider.

We’re going to play a little pattycake back-and-forth between Fauna and Clerk, but bear with me and we’ll get through it together.

 URL and go back to the Clerk JWT template tab.

: Paste the Audience URL as the value for the 

After those fields have been set, you can save both the Clerk JWT template and Fauna access provider. Whew! That was fun.

Now we can get back into building our application. Open the Remix project in your code editor of choice.

 wraps your entire application in both server and browser contexts.

Clerk requires a few modifications to this file so the authentication state can be shared with your Remix routes. First, add these imports to 

 to handle expired authentication tokens. If you want your own custom boundary, you can pass it in as the first argument.

And finally, we need to wrap the default export with the 

That’s all that’s needed to install and configure Clerk for authentication. The next step will include adding sign in functionality.

 functionality to dynamically add a stylesheet to this route.

Build a Movie Emoji Quiz App with Remix, Fauna, and Clerk

Hope you had fun building this. You now have a complete Cookie Clicker app built using Clerk, Hasura, and Next.js — with no backend code required! To take it even further, you could implement an actual scoreboard that keeps track of all the cookie clicks from multiple users. Then 

, share it with your friends, and see how much idle time they have on their hands. 😆

If you enjoyed this tutorial or have any questions, feel free to reach out to me (

Need help?

Tutorial

Tutorial

RedwoodJS Blog Tutorial with Clerk

Start now,
no strings attached

Pricing built for
businesses of all sizes.

Newsletter!

Tutorial

Tutorial

RedwoodJS Blog Tutorial with Clerk

Start now,no strings attached

Pricing built for.css-qa8l2m{color:var(--chakra-colors-primary-500);}businesses of all sizes.

Newsletter!

Start now,
no strings attached

Pricing built for
businesses of all sizes.