One of the most valuable features of the SiteGUI App Builder is its ability to link any existing standalone app as a SubApp to another app, establishing a meaningful connection between the main app record and its SubApps' records. This feature empowers developers to create intricate relationships between apps, resulting in well-structured data, simplified workflows, and the ability to build sophisticated applications from multiple components.

To illustrate this concept, we will build a Freelance Request portal composed of several applications, including Freelance Request, Freelance Offer, Payment Prompt, Comment/Message, Freelance Project, Freelance Milestone, and Freelance Task.

The interactive diagram below shows the relationships between these apps. As you can see, the Message app appears as a SubApp in multiple applications. From the Freelance Request page, users can view all offers and explore further to see the associated project, project milestones, and tasks linked to an accepted offer. The SiteGUI App Builder facilitates the creation of infinite levels of relationships like this with ease, regardless of their complexity.

Freelance Request

The Freelance Request application serves as the entry point for clients to submit their project needs. It should include fields for project descriptions, desired skills, budget, and timelines, allowing freelancers to easily understand what is required. The Freelance Request application will require clients to make a small deposit when creating a request to ensure the request is legitimated and automatically publish the request to the portal website when the deposit is received (using Add2Cart automation).

Comment & Message

Effective communication is critical in freelance projects. The Comment (public) and Message (private) application are used as SubApps in multiple Apps to allow clients and freelancers to discuss publicly (before committing) or privately (after committing to the project) to ensure any question can be clarified quickly and efficiently.

Freelance Offer

Offer Response

Freelance Project

Freelance Milestone

The Freelance Milestone application breaks projects into manageable segments. By defining key milestones and required payments, both clients and freelancers can monitor progress and align expectations throughout the project lifecycle. This significantly enhances the experience for both clients and freelancers, as both will receive what they expect. The Freelance Milestone app is a SubApp to the Freelance Project app, making it easier for both the freelancers and clients to track the milestones for each project.

Freelance Task

The Freelance Task application allows for the assignment and tracking of specific tasks within a milestone. This helps ensure that all necessary work is completed on time and keep both the freelancers and clients stay on track. The Freelance Task app is a SubApp to the Freelance Milestone app, this will help associate tasks with milestones. Tasks can be viewed under the milestone page or through the main Freelance Task dashboard.

Payment Prompt

The Payment Prompt app is a SubApp to the Freelance Milestone app, its purpose is to automatically initiate the payment release process when a milestone is delivered. Please note that the payment has already been deposited and sits in an escrow account, when the freelancers set the milestone as delivered, a payment request is automatically prompted to release the payment from the escrow account. If the clients do not object to the prompt within a set amount of days, the payment can be released to the freelancers. In case the deliverables do not meet the clients' expectations, they can place the payment on hold and both the clients and the freelancers need to work out what should be delivered to release the hold.

Step 1: Create an Account

• The client registers on the freelance portal and sets up their profile.

Step 2: Submit a Freelance Request

• The client navigates to the "Freelance Request" application.
• They fill out a form detailing:
  • Project title
  • Description of the work needed
  • Required skills
  • Budget range
  • Deadline for completion
• The client submits the request.
• The client may receive questions from interested freelancers and answer them through Comment SubApp.
  

Step 3: Review Offers

• After submitting, the client receives notifications when freelancers submit their offers. Their Freelance Request page should show all Offers from freelancers
• The client reviews the proposals, which include:
  • Freelancer’s profile
  • Portfolio samples
  • Proposed price, deliverables and timeline
• The client may reject Offers and provide feedbacks using the Offer Response subapp.

Step 4: Select a Freelancer

• Based on the offers received, the client may accept the offer by submitting an Acceptance Response.
• The client will need to make a full deposit for the proposed pricing amount.

Step 5: Monitor Progress

• The freelancer will create a Freelance project with all detailed Milestones and Tasks.
• The client can track the project's progress through the "Freelance Project" application, checking milestones and task updates.

Step 6: Review Deliverables and Release Payment

• Whenever a milestone is delivered, the client should review it to make sure it meets their expectations. In case it does not, the client may place the payment release on hold and request the freelancer to deliver again. Otherwise the client may accept the payment request to release the required amount to the freelancer.

Step 7: Provide Feedback & Rating

• When the last milestone is delivered, the project is set to be done. The client may provide public feedback and rating to the freelancer through the Freelance Project page

Step 1: Create an Account

• The freelancer registers on the freelance portal and sets up their profile.

Step 2: Browse Freelance Requests

• The freelancer navigates to the "Freelance Request" section to view available requests.
• The freelancer may engage with the client via the "Comment" application to clarify project details
  

Step 3: Submit a Freelance Offer

• The freelancer selects a project that interests them and clicks "New Offer"
• They fill out a proposal that includes:
  • Proposed deliverables and price 
  • Timeline for project completion
  • A cover letter outlining their relevant experience
  • Portfolio samples relevant to the project

Step 4: Awaiting Client Decision

• The freelancer waits for the client to review their offer along with offers from other freelancers.
• The client may reject the offer and may include the reason for the rejection. The freelancer may submit another offer if they are still interested.

Step 5: Offer Acceptance, Start the Project

• If the client accepts the freelancer’s offer, they will be required to make a full deposit and the freelancer will receive a notification to start the project.
• The freelancer begins working on the project, utilizing the "Freelance Project" application to track milestones and tasks.
• They may provide additional updates and communicate progress through the messaging system..

Step 6: Submit Deliverables for each Milestone

• Whenever a milestone is complete, the freelancer should send the deliverables to the client and set the milestone as Delivered. This should trigger a Payment Prompt to release the payment.
• If the client is happy with the deliverables, the payment will be released if they promptly accept the request or after a set amount of days has passed without any hold request from the client.
• The client may place the payment prompt on hold if the deliverables are not met their expectations. In this case, the freelance should rectify the deliverables until the clients is happy. In some rare cases, the freelancer may request review from the Marketplace's customer service if the client keeps rejecting their deliverables. 
  

Step 7: Provide Feedback & Rating

• When the last milestone is delivered, the project is set to be completed. The freelancer may provide public feedback and rating to the client through the Freelance Project page

The next step is to develop the actual applications. We'll build each individual application (Freelance Offer, Freelance Project etc) independently and just use the SubApp feature of SiteGUI App Builder to add relevant applications as SubApps. Applications that are meant to be SubApps will have a hidden field having the name of their main Apps i.e: Freelance Task should have a freelance_milestone field, this field is automatically filled when creating SubApp records through the main app. This field can also be used by Automation to update the main app record from the SubApp, i.e: updating Milestone progress when Tasks are completed etc. The Freelance Task app can also have another field to refer back to the Project to which the tasks belong, the value of the field can be filled automatically and can be used in Automation. As you can see, building a complicated app is just as easy as building multiple simple apps. Why don't you try creating an app yourself? 

This is the first part of the blog where we just present an overview of the application, its individual components/SubApps. If there are enough interests, we'll produce the second part where the actual development of each component/SubApp is done (similar to Creating the first application with SiteGUI App Builder: the Task Management app). Please do let us know via the Comment section below if you are interested in the second part or have any question/feedback.