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

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 Remix authentication package 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 (@ryanflorence), the co-founder of Remix:

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

This tutorial makes the following assumptions...

The first step is to create a new application from the Clerk dashboard. We’ll name this application Movie Emoji Quiz and leave the default Password authentication strategy selected. We’re also going to choose Google and Twitter as the social login providers, but feel free to select whichever ones you and your friends use.

Click the Add application 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 JavaScript on this one, but that’s up to your personal preference.

As the instructions state, change into the app directory with cd movie-emoji-quiz/

Now install the two dependencies we need for this application:

Next, touch .env to create an environment variables file and replace <YOUR_FRONTEND_API> and <YOUR_CLERK_API_KEY> with their respective values from your Clerk instance, which you can get from the API keys page.

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 app/root.jsx file:

Clerk supports Remix SSR out-of-the-box.

From the Fauna dashboard, create a new database. We named ours emoji-movie-quiz and chose the Classic Region Group.

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:

Then press the Run query 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.

You can navigate to the Collections 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 Functions tab and write a couple FQL functions we will need later.

Click the New Function button, name it getChallenges, 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 getChallengeById and will take the unique document ID parameter and return the respective challenge data or null if it doesn’t exist.

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, <UserProfile /> 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 JWT Templates screen. Click the New template button and choose the Fauna template.

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 Security page.

Click on the Roles tab and then create a New Custom Role. Name this role user and give it Read and Create access to the challenge collection as well as Call permission for both getChallenges and getChallengeById functions.

If everything looks correct, click Save to create the user role.

Next, click on the Providers tab and click on the New Access Provider button.

Enter Clerk 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.

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.

In Remix, app/root.jsx 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 app/root.jsx:

Second, export rootAuthLoader as loader taking in the args parameter.

Next, we need to export the ClerkCatchBoundary as CatchBoundary 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 ClerkApp higher-order component.

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

We’re going to use the Clerk hosted <SignIn /> component to render the sign in form.

Update app/routes/index.jsx with the following:

We’re using Remix’s route styles functionality to dynamically add a stylesheet to this route.

Create a styles directory inside of the app folder and save the following as index.css:

Your app should now look something like:

If you see a blank screen, you may be already signed in. We will handle that case momentarily.

Inside of the app directory, create a folder called components and a file called header.jsx.

Drop in the following code:

Here we’re making use of the <SignedIn> control flow component and the <UserButton /> which will allow us to edit our profile and sign out.

Go back to app/routes/index.jsx and import the <Header /> component and add it just above the <main> element:

If you sign in, you should now see your avatar. Click on it to see the user profile menu.

You can now sign in, sign out, and manage your account. Clerk makes it super easy with their hosted components.

In order to start fetching data from our Fauna database, we need to set up the Fauna client.

Create a utils folder inside of app and a file named db.server.js.

Add the following code:

Here we are using the getAuth function from Clerk to check if we have a userId (e.g. if the user is signed in) and to get access to the getToken function, which when called with our Fauna JWT template name (it was simply “fauna” if you remember), will be passed to the Fauna client as the authentication secret.

If the user is signed in and we get access to the Fauna JWT template, we should then be able to make queries against our Fauna database.

We are also exporting q here, which is a convention when using faunadb.query. This way all our database helper functions are kept in the same place.

Now it’s time to display some of these challenges.

First let’s create a new route at /challenges. We do this by creating a file app/routes/challenges.jsx and populating it with the following:

This should look the same as the index route, with the exception being <SignIn /> is replaced with the Remix <Outlet /> component.

Next, import the database utils we previous created and export a loader function with the below code:

You can see we’re using the Fauna client to perform a FQL query to call the getChallenges function we created. If all went well, check your terminal window (not the browser console) and you should see the response data.

Create a new file app/components/sidebar.jsx that will loop over this data and create links to each challenge based on its ID.

Import the <Sidebar /> component in the index route directly under the main element.

To access the data from the loader, we will use the aptly named useLoaderData hook from Remix and pass the data property to the Sidebar component:

If you visit http://localhost:3000/challenges, you should now see the emoji challenges rendered as links in the sidebar:

If you click on the links, they will cause an error because we haven’t created those individual challenge routes. Let’s do that now.

Let’s create a new stylesheet that will hold the challenge styles at app/styles/challenge.css.

Next, create a file inside a folder at the path app/routes/challenges/$id.jsx

The $ prefix is important here as it creates a dynamic segment.

Add the following code:

This code follows a similar pattern to what we did in the sidebar with the loader and the useLoaderData hook. The difference here is we’re calling the getChallengeById FQL function and passing it the id parameter, which comes from the $id dynamic route.

We are also using a Remix convention of throwing Response objects for error scenarios (e.g. invalid ID, challenge not found).

If you click on the links in the sidebar, you should now see each emoji challenge rendered in its full glory (a large type size).

Now it’s time to add the form to submit guesses for the emoji challenges. Form handling is one area where Remix really shines.

Add the following form markup below the emoji:

This is pretty standard JSX form markup. Nothing too fancy going on here.

Let’s import our DB utils as well as the json Response helper from Remix.

Then export the following action function:

Here we’re using native FormData methods to read the guess input and comparing it against the challenge title we get by calling our FQL getChallengeById function with the challenge ID from the route params.

Based on whether the guess matches the title (case insensitive), we return an appropriate JSON response. We can access the action data using the useActionData hook (also aptly named).

Now we can update the UI to display the correct message based on the guess submitted.

If an incorrect guess is submit, we provide the user a way to reveal the answer.

The form should now work to submit correct and incorrect guesses.

Because the form is shared between different challenge routes, if you enter text in one input and go to another challenge, you will see the input value is not being cleared.

We can fix this by using the useTransition hook, putting a ref on the form element, and then resetting the form when the transition is a normal page load.

You will need to add the necessary hook imports from React and Remix.

After that is added, the form should clear when choosing a different challenge.

This app is not much so much fun if users can’t submit their own movie emoji challenges. So that’s the functionality we’re going to add now.

As with most things in Remix, the first thing we need to do is create a new route.

Create app/routes/challenges/new.jsx with the following: