# Deck Swiper
*Skill Level: Intermediate*
## Before You Begin
* Know about [Databases](https://help.adalo.com/~/revisions/kmzOxqjy7C9sXGVjDKKb/database), [Screens & Components](https://help.adalo.com/~/revisions/kmzOxqjy7C9sXGVjDKKb/component-basics), and [Actions](https://help.adalo.com/~/revisions/kmzOxqjy7C9sXGVjDKKb/action-basics/action-basics)
* Know how to [add components from the Component Marketplace](https://help.adalo.com/~/revisions/kmzOxqjy7C9sXGVjDKKb/component-basics/marketplace-components/how-to-add-components-from-the-marketplace)
* Know about [Magic Text](https://help.adalo.com/~/revisions/kmzOxqjy7C9sXGVjDKKb/glossary#magic-text)
* This component is created and maintained by a third party developer, [Minimum Studio](https://minimum.studio/)
* You do not need a paid Adalo plan to use this feature
## Walkthrough
{% tabs %}
{% tab title="Simple" %}
**1.)** In order for the deck swiper to work, we will need to setup a collection in our database for the items that we want the deck swiper to display. Click on the database tab 
in the left menu of the Adalo Builder, then click **+Add Collection** 
and give it a name such as "Posts".
**2.)** Now we need an image property for the deck swiper to display. Click on **+Add Property** within the new **Posts** collection. Then choose **Image** and give it a name such as "Post Image"
**3.)** Now let's add a one-to-many Relationship property to the Users collection so we know who the Creator of each post is. Click on **+Add Property** , then choose **Relationship > Users.**
**4.)** Since each post can only have one creator, we'll choose the first option, then click **Done** in the lower right. Don't forget to change the name of the property to **"Creator"** here and also change the auto-created **Posts** field in the Users collection to **"Created Posts"**
**5.)** Now we can [install the component](https://help.adalo.com/~/revisions/kmzOxqjy7C9sXGVjDKKb/component-basics/marketplace-components/how-to-add-components-from-the-marketplace) and place it on the desired screen. The setup for the deck swiper is very similar to setting up lists. Click on the deck swiper and in the **What is this a deck of?** dropdown, select **Posts** (or whatever you named your collection). You can also add filtering to the collection to only see specific posts.
**6.)** In the **Card** section dropdown of the component, we have lots of options for what the cards look like and what they display. Let's make sure our image property is set. Click on the **Image** dropdown and choose **Database > Current Post > Image**
**7.)** The name of the post is input as [Magic Text](https://help.adalo.com/~/revisions/kmzOxqjy7C9sXGVjDKKb/component-basics/inserting-dynamic-text) by default, but you can change this and replace it with any Magic Text you like or leave it blank to display nothing.
**8.)** Now, displaying Post cards and swiping them is great, but that's not useful if swiping doesn't actually favorite, save, or upvote them. Back in the Posts collection, let's add a many-to-many **Relationship** property to the **Users** collection. Click on +Add Property , then choose **Relationship > Users.**
**9.)** Since each user can like multiple posts and each post can be liked by multiple users, we'll choose the third option, then click **Done** in the lower right. Don't forget to change the property name to **"Favoriting Users"** or similar and also change the auto-created Posts field in the Users collection to **"Favorited Posts"**
**10.)** Now let's add some swipe actions so the user is actually adding the post to their favorites. Click on the deck swiper component, then click on the **Actions** section dropdown.
**11.)** By default swiping right is labeled as "Liking" a post (you can change this in the **Right Swipe** section dropdown) so we're going to add an action to the **Right Swipe Actions** area. Click on the **+Add Action**  button, then choose **Update > Logged In User**
**12.)** Click the **"Favorited Posts"** property (from Step 9) of the new Update action, then choose **Add > Current Post.** Now whenever a user swipes a card to the right, it will add that post to their Favorites.
**13.)** That's the basic functionality of the Deck Swiper! Be sure to go back to check out the other options in the **Card**, **Left Swipe**, **End of Deck**, and **Right Swipe** section dropdowns of the components where you can change:
* Swiping labels
* Colors
* Card rounding
* Actions that occur once the last card is reached in the deck
* Font weights and colors
* Icons
* Placeholder images
* Actions for right swipe, left swipe, and on card click
{% endtab %}
{% tab title="In-Depth" %}
**1.)** In order for the deck swiper to work, we will need to setup a collection in our database for the items that we want the deck swiper to display. Click on the database tab in the left menu of the Adalo editor, then click **+Add Collection** and give it a name such as "Posts".
**2.)** Now we need an image property for the deck swiper to display. Click on **+Add Property** within the new **Posts** collection. Then choose **Image** and give it a name such as "Post Image"
**3.)** Now let's add a one-to-many Relationship property to the Users collection so we know who the Creator of each post is. Click on **+Add Property** , then choose **Relationship > Users.**
**4.)** Since each post can only have one creator, we'll choose the first option, then click **Done** in the lower right. Don't forget to change the name of the property to **"Creator"** here and also change the auto-created **Posts** field in the Users collection to **"Created Posts"**
**5.)** Now we can [install the component](https://help.adalo.com/~/revisions/kmzOxqjy7C9sXGVjDKKb/component-basics/marketplace-components/how-to-add-components-from-the-marketplace) and place it on the desired screen. The setup for the deck swiper is very similar to setting up lists. Click on the deck swiper and in the **What is this a deck of?** dropdown, select **Posts** (or whatever you named your collection). You can also add filtering to the collection to only see specific posts.
**6.)** In the **Card** section dropdown of the component, we have lots of options for what the cards look like and what they display. Let's make sure our image property is set. Click on the **Image** dropdown and choose **Database > Current Post > Image**
**7.)** The name of the post is input as [Magic Text](https://help.adalo.com/~/revisions/kmzOxqjy7C9sXGVjDKKb/component-basics/inserting-dynamic-text) by default, but you can change this and replace it with any Magic Text you like or leave it blank to display nothing.
**13.)** That's the basic functionality of the Deck Swiper! Be sure to go back to check out the other options in the **Card**, **Left Swipe**, **End of Deck**, and **Right Swipe** section dropdowns of the components where you can change:
* Swiping labels
* Colors
* Card rounding
* Actions that occur once the last card is reached in the deck
* Font weights and colors
* Icons
* Placeholder images
* Actions for right swipe, left swipe, and on card click
{% endtab %}
{% endtabs %}
## Example
Want to see the app we used to make this walkthrough? [Click Here](https://previewer.adalo.com/0b9562a5-5890-4e47-a528-5ea80cbc6275) to use or clone the example app. If you don't know how to clone apps, you can learn to do that[ here](https://help.adalo.com/~/revisions/kmzOxqjy7C9sXGVjDKKb/settings/copying-vs-cloning-your-app/how-to-clone-an-app).
## Learn More
* This component was created and is maintained by [Minimum Studio](https://minimum.studio/). Please reach out to them regarding bug reports or feature requests.
* The deck swiper is also a great way to build quizzes! You can set up a scoring system using left and right swipe actions and even grade the quiz using an "End of Deck" action.
* If you want to prevent users from seeing the same cards again, you can apply a "favorite" type setup by creating a similar relationship for "disliking" posts on left swipe. Then filter the cards to only show the ones where the Logged In User is not in the Post's "Disliking Users" property.
## Help
If you need additional help with this article, you can always ask in our[ community forum](https://forum.adalo.com/)! Be sure to paste the link to this article in your post as well!
Do you have a tutorial or help doc request? [Let us know!](https://ideas.adalo.com/tutorial-requests)