Tutorials
/
๐Ÿ’ต Fully featured service marketplace - Fiverr clone
Get updated on new tutorials
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

๐Ÿ’ต Fully featured service marketplace - Fiverr clone

This tutorial will show you step by step how to build a fully featured service marketplace, a Fiverr clone. Users can browse and search for services, choose and purchase a service, message the service provider, give a 'like' to the service, create a profile, add several services, edit and delete their services, accept orders from other users and message them. Here's a quick demo:

โ€

The tutorials are in a playlist on YouTube here too. Full tutorial below...

โ€

Let's get started

First you need to make sure you've set up an account on Boundless. Create a new app and give it a name. Go to the Tables tab in the top left of your navigation and create 2 new tables 'Services' and 'Profile'. In the Profile table add 2 new fields; 'Handle' - with field type = Slug and 'Photo' - field type = Image. Go to the User table, edit the field 'Profile' and deselect 'Link to multiple records'. On the Services table add 4 new fields; 'Title' - field type = Single line plain text (character limit 100), 'Description' - field type = Multiple line plain text (character limit 500), 'Price' - field type = Money and 'Banner' - field type = Photo.

Go to the Pages tab in the navigation and click 'Styles'. Here you can customise how you please but in the below example, all the Text fields have been given a bottom margin of 0. The primary colour has been changed to #1177eb but you can choose whatever you like or leave as it is for now! These fields can be changed at any point in building (or after).

Select the page header and position it in the Center. Select the 'Home' button and change the Text to 'Create Profile'. On Actions & Data, select 'Create new page' and title it 'My Profile' and select 'Must be logged in'. In the body of the page + text then + Record List and connect it to the Services table. Add a search element on top and connect to Services table too. Select the Search input and select 'Title' and 'Description' for what to include in search.

Set up a new field in your Services Table named 'Category' - field type = Single Option Select: 'Graphics & Design, Video Recording, Marketing'.

Let's tweak the Search a little more. Add a Select element, connect it to 'Category', remove the Label and change the placeholder to 'All'. *Make sure your search element is sitting IN the Record List (otherwise you will not be able to perform searches).

With the Record List selected, change 'Records per row' to 3. Add an image into the record, then in the Data Field dropdown select 'Services.Banner' and add width 360 and height 200. Now add a text field in the record and type = to bring up the dynamic text. Select 'Current Services.Created by.Profile.Handle' - Now add an image to the left of the Text field and connect the Data field 'Services.Created By.Profile.Photo' with width and height at 24. Select the column where the profile image is placed and select 'Fit Content' in the Grid Cols. Do the same for the Column where the Text field is.

In the Services Table, add a new field 'Total Price' - field type: Formula =price + 5. (This is to add a $5 service fee to each service on the site). On your homepage, add a text field '= Format_currency(Current services.total price)'. Add another Text field '=current services.title'. Now make the Grid Cols for the'Formact Currency' text column 'Fit Content' to match the others.

Head to the 'My Profile page and add a Text field 'Personal Info'. Add a space to the left, select the columns and make Grid Cols '2'. Then select the column for the text field and make Grid Cols '8'. Add another text field with a sentence and add a form underneath connected to Profile. In the Actions & Data, select 'Edit Record' for form type and 'Current User.Profile' for Data Source. Select the field in our form and check 'Required'. Do the same for the Choose Photo button. Select the 'Create' button and change the label to 'Create Profile'. On the dropdown of the button you can click 'Manage variants and rules'. Add variant 'Update Profile' and set a rule '=current profile' โ†’ is present โ†’ display as 'Update Profile'. (This means if you're logged in as the current user, the button will say 'Update Profile').

Select the button (in default dropdown), go to Actions and Data, select Go To โ†’ URL โ†’ Create new page 'Dashboard' and select 'Must be logged in'. Now select the button dropdown to 'Update Profile', go to Actions and Data, select Go To โ†’ URL โ†’ Dashboard. Then in Appearance, change the label to 'Update Profile'.

Select the button 'Create Profile' in the page header, and in dropdown go to 'Manage Variants & Rules'. Add variant 'My Profile', and set a rule '=current profile' โ†’ is present โ†’ display as 'My Profile'. (This means if you're logged in as the current user, the button will say 'My Profile'). Select 'My profile' in the button dropdown and change the label to 'My Profile'.

Add a button next to 'Create/My Profile' and in the style select 'Link Text', label it 'My Services' and in Actions & Data, select Dashboard as the URL. Now add variant 'No Profile' with a rule =current user.profile is blank display as no profile. Select in the dropdown and delete the label text.

Now head to the Dashboard page and Add text 'My Services' with a Spacer (format columns as we did before). Add Record List 'Services' with a filter 'ervices.created by' is current user. Add a button and right align it 'Create new service' with Actions & Data URL โ†’ Create new page 'Create new service' and select must be logged in.

Go to the Create new service page. Add Text, Spacer and format columns as before. Add a form and connect to Services. Move Category to the right hand side of Price (if you want to!) Selecting Description, change the height to 200. Then select the other fields and make them Required. Re-label the Create button 'Start Selling', Actions & Data โ†’ Go To โ†’ Record Page โ†’ New Record Page called 'Services'.

Select the form and add variant 'Has Profile' and set rule 'Current User.Profile' โ†’ is present โ†’ display as 'Has Profile'. Add text inside the form prompting a user to create a profile. Hyperlink some of the text to go to 'My Profile'. Then delete all the form fields. Flick between the form 'Has Profile' and 'Default' to check it works.

On our Dashboard page, Add an image and connect the data field with 'Services.Banner', width 360 height 200. Add text to the right '=Current services.title' and vertical align. Select the whole 'Record' and in Actions & Data, the actions should Go To โ†’ Record page โ†’ URL 'Services'.

On the homepage, highlight the Record Title, and link it to Current Services โ†’ Services page.

Go to the Services page. Add an image with data field 'Services.Banner' width 720 and height 400. Center align and set columns as 8. Add a background and border. Add a form and connect to New Table called 'Orders'. Remove the field. Select the column and give them grid col 3. Add a spacer in the middle with a column 1. Add text below of Current Service Title and another field for Description. Go to the Page settings and map the Title, description and share image to the right fields.

Change the button label to 'Order Now' and Add Text 'Price' above the button. Add another text field to the right of '=format_currency(current service.price)'. Format and align how you want. Then duplicate in place and change the bottom text to 'Total' and format currency to include total price. Change the middle text to Service fee and set the currency at 5.

Order now button โ†’ Actions & Data โ†’ Collect payment โ†’ '=Services.total price', description 'Services'. Add another action, Go To โ†’ Record Page โ†’ Create new page 'Orders', check must be logged in.

On the Orders page, Add a text field, spacer and format as previously. Add a form and Create new table 'Order Messages'. Add Record list connected to Order Messages. Add a spacer next to the Create button and re-label 'Send Message'. Select the message body field, Actions & Data and create a new data field 'Message' - field type 'Multiple line plain text'. Re-label and change the placeholder.

On the Send Message button, add another action 'Clear Form'. Now add text in the Record List to pull in the data to display. In page settings, restrict access to 'Orders.Created By'. Select the whole section and duplicate to palette.

Create a new Record page, connect with Orders, 'Seller Orders' and must be logged in. In Page settings, restrict access to 'Orders.Services.Created By'. Add an element and at the bottom, click 'Section'. Change the text accordingly.

This next section walks through how to set up email notifications for different actions.

On the homepage, Add a submit element, fit content and delete the text label but select 'Heart Outline' and play with some spacing. Change the button style to Danger Outline.

In our Services table, add a field 'Liked by' with field type 'Association', association model 'User' and select link to multiple records. In our User table, rename the last field to 'Liked services' and link to multiple records.

Select the button, Actions & Data โ†’ Update Record โ†’ Services.Liked By โ†’ by adding โ†’ current user. Add a variant 'Liked'. Add rule '=current services.liked by' โ†’ Includes โ†’ Current user โ†’ display as โ†’ Liked. Now on the button drop down select 'Liked', change the icon to 'Heart' and in Actions & Data, remove the current action and add 'Update Record' โ†’ Services.Liked By โ†’ by removing โ†’ Current User.

In the Orders Table, Add a field 'Status' with a field type 'Single Option Select' with one option 'Completed'. Go to the Seller Order page, Add a form to the right of your order text. Connect Orders Table. Remove the field and format your columns. Change the button style and label 'Mark Complete', Actions & Data โ†’ Update Record โ†’ Order Status โ†’ Completed.

On the Orders page, add text field 'Status' and pull in the Current Order.Status. and format the rows.

Go to your Dashboard page and add a a text field, add spacer and format as previously. Add a record list and connect to Orders. Add filter 'Orders.Services.Created By' is Current User. Add another filter 'Order.Status' not equal to Completed. Add text field, select the record to go to 'Record Page' โ†’ Seller Orders.

Head to your service page to do some styling. On the homepage, select the image โ†’ Go To โ†’ Record page โ†’ services page. Do some styling on the records here. On your 'Create new service' page is where we will start checking the mobile friendliness and fix any issues.

Same goes for the Service page but it may be slightly tricker.

Let's add a character counter under our description field on Create new service.

Go to the Dashboard page, select your 'My Services' record and remove the Action and Data. Select the image โ†’ Actions & Data โ†’ Go To โ†’ Record Page โ†’ service page. Hyperlink your Title text too. Add a text field 'Edit'. Create a new page โ†’ Record page โ†’ Services โ†’ 'Edit Service' and must be logged in. In the page settings restrict access to 'Services.Created By'. Add a form connected to Services' โ†’ 'Edit Record'. Format as per your Services form. Select Update button โ†’ Actions & Data โ†’ Go To โ†’ URL โ†’ Dashboard. Go back to the Dashboard page and hyperlink the 'Edit' text to go to the Edit Service page.

Add a button 'Delete' with style 'Danger Outline' plus another button for 'Edit' (delete the hyperlinked text 'Edit'). Link the Edit button to the Edit Service page. Create a new record page โ†’ Services โ†’ 'Delete Service' must be logged in. Add a form 'Services' โ†’ Edit Record. Delete all the fields. Add text fields and format. Add a botton next to the current 'Update' button, rename the Update to Delete Service โ†’ Style 'Danger'. Rename the other button 'Cancel' with a style outline then Actions & Data โ†’ URL 'Dashboard'. In the Service table Add a field 'Status' โ†’ Single Option Select โ†’ 'Deleted'. Now select the 'Delete Service' button โ†’ Actions & Data โ†’ Update Record โ†’ Services.status โ†’ Deleted.

On your dashboard page, connect the delete button the the 'Delete Service' page.Then select the Record list and add filter 'Services.Status' not equal 'Deleted'. Add this same filter to the record list on the homepage.

Lastly, on our Delete Service button, add another action which goes to URL โ†’ Dashboard.

That's it!!! We're done.

If you need help with this then upgrade to PRO and message me on Slack.

You must be a member to view the full lesson

Access all tutorials & the community today and lock-in your price for life.
Get updated on new tutorials
Share Makerpad via Twitter
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

If you'd like this template, message @bentossell on Slack with your email for the account to send this template.