Super Mario Voting Platform | A Xano Build Project with Jake Spirek

Welcome to this beginner-friendly guide on creating a fun and interactive Nintendo character voting app using Xano, a no-code platform for building backend services. In this tutorial, we'll walk through the process of setting up databases, creating APIs, handling authentication, and integrating with external APIs, all without writing a single line of code. Let's get started!

Prerequisites

Before we dive in, make sure you have the following:

• A Xano account (you can sign up for free at xano.io)
• A basic understanding of databases and APIs (don't worry, we'll explain everything along the way!)

Step 1: Planning the Project

Like any good project, it's always a good idea to start with a plan. In our case, we'll be building an app that allows users to vote for their favorite Nintendo characters. The main features we want to include are:

• Connecting to an external API (the Nintendo Character API) to fetch character images
• Implementing authentication to allow admin users to delete characters
• Storing user submissions and votes in a database
• Allowing users to either manually enter a character name or get a random character suggestion

To visualize the data structure and flow, we can use a tool like FigJam to map out our database tables and API endpoints. In this case, we'll need three tables: `submissions` (to store character data), `votes` (to track user votes), and `users` (for authentication).

Step 2: Setting Up the Database

In Xano, head over to the "Database" section and create three new tables with the following schemas:

1. Submissions

• `name` (text)
• `image` (file)
• `totalVotes` (number)

1. Votes

• `submissionId` (relation to `submissions`)

1. Users

• `email` (text)
• `password` (text)

With our tables in place, we're ready to start building the APIs that will power our app.

Step 3: Creating the APIs

In Xano, navigate to the "APIs" section and let's create our first endpoint: `submissions`.

Endpoint 1: `submissions` (POST)

This endpoint will handle new character submissions and vote counting. Here's how to set it up:

1. Make an API request to the Nintendo Character API, passing in the submitted character name.
2. Check the response to ensure a matching character was found.
3. Create an image resource from the API response and upload it to the `submissions` table.
4. Check for duplicates in the `submissions` table. If the character already exists, add a new vote. Otherwise, create a new submission record and add the first vote.
5. Return the total vote count for the character.

Endpoint 2: `submissions` (GET)

This endpoint will retrieve all the submitted characters and their vote counts. Simply create a new GET endpoint that queries the `submissions` table and returns the results.

Endpoint 3: `getFeelingLucky`

Sometimes users might not have a specific character in mind. For those cases, we'll create an endpoint that returns a random character suggestion:

1. Make an API request to the Nintendo Character API without any specific character name.
2. Shuffle the response array to randomize the order of characters.
3. Filter out unwanted characters (e.g., characters with "band" in their name, Mario, or any "yarn" variations).
4. Return the first eligible random character.

Endpoint 4: `deleteCharacter`

For admin users, we'll create an endpoint that deletes a character and all associated votes:

1. Get the related vote records for the character being deleted.
2. Delete all related vote records.
3. Delete the character record from the `submissions` table.

Don't forget to secure this endpoint by requiring authentication!

Step 4: Implementing Authentication

To handle authentication, we'll leverage Xano's built-in authentication functionality:

1. In the "Authentication" section, enable authentication and choose the `users` table as the user data source.
2. Set up the appropriate authentication rules (e.g., require email and password for login).

Now, any endpoints that require authentication can be secured by setting the "Authentication Required" option in the endpoint configuration.

Step 5: Integrating with the Frontend

With our backend APIs ready, it's time to connect them to the frontend. Xano provides a visual interface called WSD (Web & Server Data) that allows you to bind your APIs and database data to your frontend UI elements.

1. In the WSD section, create a new WSD instance and link it to your frontend project (e.g., a Webflow site).
2. Set up data bindings for your UI elements (e.g., character list, form inputs, buttons) using the WSD attribute panel.
3. Connect your APIs to the appropriate UI events (e.g., form submit, button click) using the WSD event handlers.

And that's it! With your backend and frontend connected, users can now interact with your Nintendo character voting app, submit their favorite characters, view the current rankings, and even get random character suggestions.

Bonus: Adding Extra Features

If you're feeling adventurous, you can extend your app with additional features like:

• Implementing upvoting/downvoting instead of simple vote counting
• Allowing users to upload their own character images
• Adding character descriptions or other metadata
• Implementing social sharing or leaderboards

The possibilities are endless with Xano's no-code approach!

We hope this guide has helped you understand the process of building a fun and interactive app using Xano. Remember, the Xano community is always there to support you, so don't hesitate to ask questions or share your creations. Happy building!