In this tutorial Im going to show you how you can make a simple clone of Meetup.com that will be able to list and create meetups, have attendees, take payments and display how many tickets are left. You'll also be able to manage/update your meetups and account once created.

What you'll need

1 x Adalo Account

Login into Adalo and create a new Desktop Web App. Select a blank template and pick some colours to use for your app.

You should now have 4 screens in front of you. Zoom into the Home Screen on the right. Now we're going to create the basic layout of the Meetup home screen.

Select the nav bar, set Right Icon 1 to a plus Icon and the Right Icon 2 to a Power button icon. We'll use these for login logout.

Next add an Image component and make that Hero Image size. Add Text, make it big enough to be your header. Same for a Sub Heading and a button. Align to the center by selecting the component and selecting Edit Styles.

Now add some more text underneath the hero section and edit it to say Categories. Add another text component and edit that to say 'Browse groups by topics'. Now add an image list component and place that underneath. Select the list component and change the 'Number of columns' to 4. Resize and style to your preference.

Remove the favourite icon.

That's it for this step.

‍

Head to the left hand menu and click Database.

Now add another collection and call it Categories. Add 2 properties, 'Name' and 'Image'.

Click '0 Records', now add a category by pressing 'Add Category'. Add four categories of your choosing.

Back in the main app screen, click your category image list and in the 'What is this a list of' field select 'Categories' from the drop down. This will map them across.

Scroll down and check the category image is mapped correctly to the Image field in the Categories collection. Add a filter if you wish.

Now press preview and if all is well you will see your four categories in the image list.

Exit back out and add in some images into your Categories by opening up the Categories collection. Preview again to check they uploaded correctly.

‍

Go back into your database and add in another collection called 'Meetups' with the following properties.

• Name (text)
• Image (image)
• Date (date)
• Description (text)
• Address (text)
• Paid (true/false)
• Owner - Relationship with Users - (User can have multiple meetups > Meetup can have one user (owner)
• Category - Relationship with Meetup - (Meet up can have one Category > Category can have multiple meetups.

That's it for this step.

‍

Next add a new screen, choose 'Custom List', call it Meetups. Link this list to our Meetups category.

Link the two pages together by going back to the category page and add an action to the Category list, select 'Link', then to the Meetups page we just created.

Now back to the meetups page, select the list and add a filter. Select Current Category > Meetups.

Add a title using the variable feature to pull in the Meetup category name. Then add two text fields onto the Meetup Item so you have Name, Address and another Text Field left unnamed for later.

For the buttons we're going to call the left button 'View' and the right button 'Attend'. Change the View button to be an Outline button and the Attend button to a Contained Button.

Now let's add some ticket information. Go back to your Meetup collection in the database and Add a Property, select Number and name it Number of Tickets.

On the Meetups Screen add another text component and edit the field adding a Formula, Current Meetups > Number of Tickets.

That's it for this step.

‍

Now let's create a meetup. Add a new screen, select info screen with action. Go back to the previous Meetups screen, select your Meetup list component and add an action that links to our new page. Do the same with the view button.

Back to your Meetup, replace the placeholder info with the information from your database mapping across the appropriate fields.

• Name
• Date
• Description
• Image

Add a Text component in to show the number of tickets and map that to the Number of Tickets field.

Back in your Meetups database, add a Meetup or several Meetups filling in the fields with an image, title etc.

Head back to your Meetups screen and preview to test they have been added and mapped across correctly.

Add in styling and formatting to make it presentable :)

Add a filter to only show Meetups for the Current Category.

Preview and continue.

‍

Go to your Meetups screen and add a custom button. Name it 'Create a Meet'.

Copy this onto any other pages you want it to be shown on.

Click the button, add an action, link, to new screen. Select Form as the new screen format.

Name the screen, 'Create a Meetup'.

Select the form and in the 'Which data collection' field selection select Meetups.

Format the page to include the entire form.

Select the list, fields and change the labels to what you want your users to do.

Add a new visible field, select category.

If you have the form in a state that you want, move to the next step.

‍

Next let's configure the payment button.

Select the Submit Button in your form and add an action, select Link, to new screen. Select Modal.

On your newly created screen add Stripe payment component dragging it onto your modal and style to suit.

Select the Stripe component and set the payment amount, description and set the Email Field to Logged in User > Email.

Next add an action, select Update, select Record, click Current Meetup and change Paid to 'True', press Done.

Optional - add a filter on your Meetups list screen to only show 'Paid = True' Meetups.

Preview and test by clicking the Create a Meetup button and adding in all details + checking it's passed to the database.

Now onto the next step.

‍

Go into our database and Add a Property, select Relationship, Many to Many and name it Meetup Attendees. Press save.

Now configure your Attend buttons. Click Attend, add an action, select update, click Current Meetup and on MeetupAttendees, Add > Logged In User.

On your Meetup screen select the Number of Tickets text component and in the Text field add a formula, Custom Formula, Variable, 'Meetup Number of Tickets' - 'Current Meetup > MeetupAttendees > Count'. That gives us the number of tickets left.

Do the same for the other Attend button on your All Meetups Screen.

Now to let the user know they are attending, add another action on the Attend button, Link, new screen, Modal. Name the screen and customise it to show the user that they are attending the Meetup. Add Meetup Name and Date fields for reference.

Change the Link action transition to Modal.

Drag the Link action to the top to make sure it is the first action that takes place.

Optional - add another action, notification, email to send an email to the logged in users email with the details of the meetup.

Add these actions to the other Attend button.

Preview and test results from clicking Attend show up in your database.

‍

Now let's create a User Account page. On your home page change the Right Icon 1 icon to a 'Person' icon and Link to a New Screen, select Form.

Find your new page and map it to the User collection in our database. You should be able to see the fields mapped to match the database.

Remove the username and full name fields.

Go into our Users database collection and add 'Image' and 'Bio' as properties.

Back to the newly created screen and add these properties onto our form.

Reorder, rename and style as you see fit :)

Change the title of the screen in the top bar to 'User Account | LoggedIn FullName'.

Now link the 'Person' icons to our newly created account management screen.

Copy across to other screens.

Preview and test.

Optional - Add a 'User Updated' modal screen to show when the record was updated.

‍

Now let's add in some information about upcoming Meetups onto our User Account page.

Style the page to leave room for a new list.

Add a text field to show the Users Name on the screen.

Add a text field and name it 'Upcoming Meetups'.

Add in a list, map it to the Meetups collection.

Set a filter to show Meetups only for 'LoggedIn User > Meetup Attendees'.

Preview and test.

Sort and limit max number of visible Meetups to between 3-5.

Add Meetup information to the Meetup record e.g. Name, Address and Date.

Select a single record and click Right Section. Add a 'Minus' icon. Set the action to Update, click Current Meetup, MeetupAttendees > Remove > Current Meetup > More LoggedIn User.

This will now let a logged in user remove themselves from the attendee list of a Meetup.

Now back on the User Account screen add another text field, call it My Meetups.

Add a list, map it to Meetups, filter Logged In User > Meetups (Owner). This will show only the Meetups we own.

Sort and style as you see fit :)

Preview and test.

‍

Now let's create a Meetup Management Page.

On your User Account screen, select your My Meetups List then add a Right Section Icon. Select a Pencil or something else that signals 'Edit'.

Add an action and select New Screen then Form.

Change the page title to 'Update Meetup - 'MeetupName variable'. Add a screen name also.

Click the form component on the new page and map it to our Meetup Collection.

Rename the fields to make it clearer to users that they can edit the fields.

Style to make room for a list of Attendees.

Add a text field, place and map to the MeetupName field.

Add another text field and edit it to say 'Attendees:' followed with a 'Current Meetup > Attendees > Count' variable to show the number of attendees.

Add a list and map it to Users and Filter for, Users > Current Meetup > Meetup Attendees.

Select the Title field, in Text, add a variable 'User Full Name' and in the subtitle add a variable 'User Bio'. Save.

Preview and test.

‍

Now let's add Locations into our app.

Go to our database and add a new Collection. Call it Locations.

Rename the text field Location.

Upload a CSV file containing a list of cities if you have one if not add a few in manually or find one on Google. Map the field across and upload.

Now in our Meetups collection in our database add a new location reference field, One to Many.

Rename it Meetup Location.

Do the same for our Users collection.

Go to our Create a Meetup Form, select fields, add a field, select Meet Up Location. Name it as you want.

Now on our Meetup Management page do the same. Add in a field referencing the Meetup Location so we have a way of editing it if we want to.

Rename the field with a more descriptive term.

Next go back to our home screen and add another section which mirrors our Categories section. Copy and paste works.

Name this new section, Meetups by location with a subtitle 'Find meetups near you'.

Click the list, set it to a list of Meetups and set the filter to Logged In User > User Location > Meetups.

Now we can see Meetups that match our location.

Go to update Meetup screen and set the location (for testing purposes remember what you set it to).

Now go to the User Management screen and add in a User Location field into our form. Name it Location. Set the location to the same as the one set previously.

If we preview and test now we should see a result in our Meetups by Location section on our home screen.

Preview and test.

Now go to the Sign Up screen, select the form and add in the Location field to make new sign ups choose a location.

Save.

‍

Optional

Now add some styling to our app to make it presentable.

Format the layout of the text throughout, add a footer and set the font weight of all sections. Add in a Hero Image and format the text + button that overlays it also.

Additionally copy over any header icons so that each is linked up nicely.

Apart from that you now have an application which has the basic functionality of a Meetup like application.

I hope you enjoyed this tutorial and if you have any questions please send me a message in the Makerpad Slack or on Twitter @tomosman.

See you on the next one!

Tom - Makerpad