Wized Maya Cloneable Back-End | Wized + Xano + Webflow

Welcome to this step-by-step guide on building a scalable backend using Xano, the no-code platform for creating and deploying backend services. In this walkthrough, we'll dive into the Wizzed Maya clonable, a fully clonable project that consists of a Xano backend, a Wizzed application, and a Webflow frontend.

Introduction to Xano

Xano offers a no-code solution for building the backend of your application. The backend contains all your data, APIs, and the logic that powers your application behind the scenes. With Xano, you can create data models, craft APIs, set up authentication and authorization, all without writing a single line of code. Xano takes care of the infrastructure, saving you time and resources in developing this crucial part of your application.

Getting Started

Let's jump right into the Wizzed Maya clonable and explore how the backend works. We'll walk through various actions within the application and understand the corresponding function stacks inside Xano.

User Registration

1. Visit the clonable homepage and click the "Sign Up" button.
2. Enter your name, email, and password, then click "Register."
3. You'll be logged in, and the "Login" and "Sign Up" buttons will be replaced with a "Logout" button.

Now, let's look at what happened on the Xano side:

1. In the Xano dashboard, navigate to the "Users" table. You'll find your newly created user record.
2. This record was created by the "auth/signup" API endpoint, which handles user registration.
3. The API takes in the name, email, and password as inputs.
4. In the function stack, Xano first checks if the user already exists by querying the "Users" table for the provided email.
5. If the email doesn't exist, Xano creates a new user record and generates an authentication token.
6. The API returns this authentication token as the response, which the application uses for future authenticated requests.

Viewing Products

1. On the homepage, you'll see a list of products populated from the Xano backend.
2. In Xano, these products are stored in the "Products" table.
3. The "get/products" API endpoint queries all records from this table and returns them as the response.
4. Wizzed then dynamically populates these products on the Webflow frontend using the data from Xano.

You can add or modify products directly in the Xano backend, and the changes will be reflected on the frontend instantly, thanks to the integration between Xano, Wizzed, and Webflow.

Adding to Cart

1. Click the "Add to Cart" button for a product, enter the quantity, and add it to your cart.
2. On the Xano side, this action is handled by the "post/cart" API endpoint.
3. The endpoint takes the user ID, product ID, and quantity as inputs.
4. It adds a new record to the "Cart" table with these details, establishing a relation between the user, product, and quantity.
5. The API returns the newly created cart record as the response.

Removing from Cart

1. Click the "Remove" button next to a product in your cart.
2. This action is handled by the "delete/cart" API endpoint.
3. The endpoint takes the cart record ID as input.
4. It queries the "Cart" table for the provided ID and deletes the corresponding record.

Placing an Order

1. Click the "Order Now" button to place an order for the items in your cart.
2. The "auth/me" API endpoint is called first to verify if the user is authenticated by checking the provided authentication token.
3. If authenticated, the "get/orders/{orderID}" API endpoint is executed.
4. This endpoint retrieves the order details from the "Orders" table and calculates the total cost by looping through each product in the order.
5. The order details, including the total cost, are returned as the response and displayed on the frontend.

Admin Features

The Wizzed Maya clonable also includes administrative features for managing users and orders.

1. In the Xano backend, set the "isAdmin" field to "yes" for your user account.
2. Refresh the application, and you'll see an "Admin Dashboard" option.
3. In the dashboard, you can view and delete user accounts using the "get/users" and "delete/users/{userID}" API endpoints, respectively.
4. You can also view all orders placed on the platform using the "get/orders" API endpoint, which retrieves and calculates the total cost for each order.

The admin features leverage conditional logic and authentication checks in the Xano function stacks to ensure only authorized users can access and perform administrative actions.

Conclusion

This walkthrough has covered the core functionalities of the Wizzed Maya clonable, demonstrating how Xano powers the backend and seamlessly integrates with Wizzed and Webflow. By leveraging Xano's no-code capabilities, you can rapidly build and deploy scalable backend services, streamlining the development process and empowering both technical and non-technical users.

Remember to check out the Wizzed YouTube channel for additional walkthroughs and information on the Wizzed application and Webflow frontend components of this clonable project.