How to Build a Community Portal

Tags
Published
In this tutorial, we’re going to learn how to build a portal for your community with step by step instructions on how to use data from Airtable and Pory for building the interface for the portal.
 

Tutorial Overview

The Greek life community portal helps greek organizations track all aspects of their organization including member information, event lists, member attendance, contacts, community service initiatives, new member recruitment, alumni association contacts, and more.
 
By the end of this tutorial, you'll be able to:
  • Create and manage listings e.g. members directory, events and applications
  • Create different user groups for the community e.g. member, recruitment
  • Invite members to sign up to the community (data will be synced to Airtable)
  • Allow members to RSVP for events
 

Demo

Here's a demo of the final product 👀
User part of the recruitment team:
  • Username: dominica.mirelez@example.edu
  • Password: Pory123!
User as a member:
  • Username: edward.coe@example.edu
  • Password: Pory123!
 

How much does it cost?

  • Airtable has a free tier for up to 1,200 records per base
  • This Portal uses Pory’s Professional plan ($49/mo)
 

Step 1: Using Airtable

New to Airtable? No worries, create a free account first. Airtable is a visual database with the familiarity of a spreadsheet, which makes it perfect for building apps!
 
All the data for the community portal will be stored in the following Airtable base which you can follow along by copying this base into your account or by using your own.
 

Step 2: Creating an App

Now that we have our data ready to go, we'll be creating our portal on Pory. Pory is a platform for creating applications on top of Airtable visually using drag and drop blocks. It also provides your members with user accounts and the ability to edit their own information. All the information is connected and synced to your Airtable, so you’ll never have to worry about creating islands of isolated data.
 
New to Pory? Sign up for a 14 day free trial.
 
  1. Log in or sign up to Pory
    1. notion image
  1. Select Create App from your workspace.
  1. Give your app a name
    1. notion image
  1. Click Create App
    1. notion image
 

Step 3: Creating a Landing Page

Let’s begin by creating a landing page for your community portal. You can skip this step if you plan to subdomain your portal to an existing website i.e. https://community.pory.io
  1. Click on Add Section and choose from a collection of blocks to build out your home page (example uses hero and feature blocks)
    1. notion image
  1. Click on Settings > Appearance to customize your app colors and fonts
    1. notion image
  1. Click on Settings > Assets to upload a logo and favicon
    1. notion image

Step 4: Setting up User Accounts

Let’s now set up user accounts by connecting your user table from Airtable. Users will be able to update their own information, keeping your data up to date.
  1. Click on Users from the left navigation sidebar
    1. notion image
  1. Click on Set Up User Accounts to set up user accounts
 

Step 4.1: Users Table

  1. Select a base: The based used for storing your users. E.g. Community Tutorial App (Airtable base embedded above)
  1. Select a table: The user table in the base E.g. Members
  1. Where is the email stored?: The field for collecting emails E.g Email. This is used by the user to log in so it should be unique. You can ensure this by using the first field in your table.
    1. notion image
 

Step 4.2: Default Group

  1. Group Name: Used to identify who the user is. E.g. Members
  1. Group Description: To help you remember what this group is about
    1. notion image

Step 4.3: User Account Page

This is a user’s “My Account” page containing their profile and their information that’s linked to them via the field type linked records i.e. Their mentee
 

Profile View

  1. Select the fields you want to display in the Profile tab. Users will be able view and update these fields.
notion image

Related information

In some scenarios, you may want a user to also access and update records that are linked to them. You can do that by:
  1. Click on Add linked record (next to Profile)
    1. notion image
In our Greek Life Community, we do not need to display any of the information above in a user’s account page. We will instead create a page listing for each linked record later.
 

Step 4.4: Email Setup

  1. Reply to email: Users will reply to you via this email
  1. Compose email: This is sent out when a new user signs up
    1. notion image
 

Step 4.5: User Flows

User Flows determines where to take your users after an event occurs.
  1. After logging in: Home page
  1. When user is not logged in: Login page
  1. After logging out: Home page
    1. notion image

Step 5: First App User

Once you set up user accounts, you will be taken to the Account page builder. Here you can select different user groups and view as different members to see what each user can view, create, edit and remove in your Airtable.
notion image
 
Since we have no users signed up to our app, there’s no one to view as. Let’s create a new user for testing.
  1. Click on View As
notion image
  1. Create a test user. This will add the user to your members table and assign it to the user group Members (default group).
    1. notion image
Now we can see the sam’s Profile . Let’s update what actions a user who belongs to the group Members can do.
notion image
 

Step 6: Creating Pages

Now that we have our users table connected, let’s turn the data stored in the tables into the following pages: Members Directory, Events, Attendance and Recruitment.
 

Members Directory

The members directory is a place where members can view who’s part of the Greek Life community.

Creating the Page

  1. Create a new page
    1. notion image
  1. Name the page Members Directory
  1. Select the user group “Members” to restrict access from the public

Creating the Members Listing

  1. Click on Add Section to create a data listing
    1. notion image
  1. Select a listing layout for your members
    1. notion image
  1. Hover over the new section and select Edit Listing
    1. notion image
  1. Select Anyone for who you’re creating the listing for (members should be able to access the same list)
    1. notion image
 

Connecting Members Table

  1. Select your Airtable base and table for the listing i.e. Greek Life Community Base and the Members table
    1. notion image
  1. Switch to Permissions and add the View Only permission for the Members user group. We do not want members to be able to create, edit or remove members from the directory. We can create another user group later called admin with more permissions.
    1. notion image
  1. Switch to View Settings and select an Airtable view from your table (optional).
    1. notion image
  1. Switch to Filters Settings and create filters using Select Fields (optional)
    1. notion image
  1. Switch to Search Settings and select which fields are searchable
    1. notion image
  1. Save and continue
 

Creating the Members Listing Card View

  1. Select the fields to use for the listing’s card view. Learn more about updating the appearance detailed view and card template options here.
    1. notion image
  1. Select Save and Continue when you’re ready.
 

Creating the Members Listing Detailed View

  1. Build our your detailed view using a collection of blocks
    1. notion image
  1. Select fields to display in the block similar to the card view.
  1. Click Save when you’re ready.
 
notion image
That’s it your Members directory is now ready!
 

Events Page

The Events page is a place where members can view events in the community. Similar to the Members Directory. Let’s create an Events listing where members can RSVP for events.
  1. Create a form view in the Attendance table. This table is used to store all the members that are attending an event.
    1. notion image
  1. Click on share form
  1. Select embed this form on your app
    1. notion image
  1. Copy just the url part from the iframe
    1. notion image
  1. Create a new field in the Events table called RSVP and paste the form url
    1. notion image
 

Creating the Events Page

  1. Create a new page and call it Events
  1. Add a new section for the Events listing
  1. Hover over the listing and select Editing Listing
  1. Select Anyone for the type of listing (everyone should see the same list of events)
    1. notion image
 

Connecting Events Table

  1. Select the Events table and the field connected to the user to look up
    1. notion image
  1. Switch to Permissions and allow the member to view events only.
    1. notion image
  1. Switch to View Settings to use an Airtable view (optional). Tip: Create a Airtable view for upcoming events only.
  1. Switch to Filter Settings to create filters (optional)
  1. Switch to Search Settings to set up search bar (optional)
  1. Click Save and Continue
 

Events Listing Card View

  1. Select which fields to display for the event
  1. Click Save and Continue
 

Events Listing Detailed View

  1. Select the embed blocks to add an Airtable form for members to RSVP for the event
    1. notion image
  1. Select the RSVP field to display as the embed block
  1. Click Save
 

My Events Page

Members of the community should also be able to view all the events that they’re attending. Similar to the Events page, let’s create a listing that only displays the events that belong to a member.
  1. Follow the steps above, but select the type My Users
    1. notion image
 

Applications Page

Create a page for viewing new community applications that are only visible by members who are part of the recruitment team. You can lookup a member’s position by looking at the Current Position field.
 
Let’s start by creating a new user group
  1. Go to the Users Group page
    1. notion image
  1. Click Create User Group and create a user group called Recruiter
    1. notion image
  1. Create a page called Applications and restrict access to the user group Recruiter
    1. notion image
  1. Similar to the other pages, create a new listing to display member applications (make sure to select the type “My Users”)
 

Step 6: Invite Only App

Greek Life is a safe space and therefore does not allow anyone from the public to create accounts and gain access to the community. To make your app invite only, follow the guide here.
 

Step 7: Inviting Users

Since we have members in Airtable already, we can also create invitation links using an Airtable formula to invite them using automation! To do so, follow the guide here.
 

Step 8: Publishing your App!

3, 2, 1 publish! 🚀 Congrats -  you now have a working community Portal!
 

Try it out!

Here's a demo of the final product 👀
User part of the recruitment team:
  • Username: dominica.mirelez@example.edu
  • Password: Pory123!
User as a member:
  • Username: edward.coe@example.edu
  • Password: Pory123!
 

What’s next?

  1. Give your community a free .pory.app domain or;
  1. Embed your job board into an existing site or;
  1. connect a subdomain i.e. https://careers.company.com or;
  1. Connect a domain i.e. https://company.com.
 
That's it! Let us know how you go and reach out if you have any questions. Hope you enjoyed the tutorial! ✨
 

Need Help?

🌈
We’re here to help! Join our Slack Community