Templates
Template Setup Guides

Seevy - Resume Builder Template

Template page link: https://zeroqode.com/template/seevy---resume-builder-template-1521539558790x528772341382512600

Introduction

Seevy template is a fully responsive no-code automated resume builder app. Information for the CV can be auto-extracted from the user's social media account. Resumes are generated as a web page or can be downloaded as a pdf file. The platform has built-in payment processing systems using Stripe, and an affiliate or referral program that uses the Coinbase API to make commission payouts.

Features

  • Fully responsive pages and dashboard

  • Near real-time resume editing and preview

  • Social sign-up and data import for Twitter, Facebook, Google & LinkedIn

  • Stripe Payments

  • Referral system & Custom affiliate dashboard

Payments: See the documentation on how to set Stripe Payments in Bubble App.

Main Documentation

Data Structure

User

User’s data contains the usual profile info (Photo, Name, Email Address) and also contains additional fields relating to usage, payments, referrals etc.

Resume

Each user has a single resume and it is attached to their user object. Each resume has in addition to normal fields, list of jobs (experience), list of schools (education) list of awards (awards) and list of core skills & other skills (skills).

Rewards

A reward is created when a referred user signs up for a paid plan or when a user referred by an affiliate renews their paid plan.

Payout

A payout is created when a user or affiliate requests to withdraw their rewards/earnings.

Signing up

After a user signs up, the social network they used is stored to their object and they are forwarded to the dashboard. Upon loading the dashboard for the first time their account is setup and marked as such before they can start using the app. The setup process is as follows:

  • Profile info is saved to user

  • Resume is created with info from profile

  • Resume is saved to user

  • Job is created (LinkedIn Only)

  • Job is added to resume (LinkedIn Only)

  • User is marked as setup:yes

  • Workflow is scheduled to create jobs & schools (Facebook only)

Authentication

You would need to create an app/project in the developer console of each social network:

Facebook: https://developers.facebook.com

Twitter: https://apps.twitter.com

Linkedin: https://www.linkedin.com/developer/apps

Google: https://console.developers.google.com

For Facebook, Linkedin & Google ensure that you add all live & test URLs for these pages /u/signup, /u/signin & /dashboard as authorized redirect URLs.

Twitter only requires the base URL.

You can check the Bubble forum or the developer guides of the social networks if you’re having trouble.

Note: The permissions requested by the Facebook authentication API will require your app to be reviewed by Facebook. If you like you can switch to Bubble’s own Facebook plugin or simply reduce the scope of the Oauth setup.

Certain pages utilize a different navigation method and are explained below.

Sign up & sign in

The /u page houses sign up and sign in. The same buttons are used for sign up and sign in with conditional workflows for new users. The text & button CTAs on this page change based on the suffix of the URL which are either /u/signup or /u/signin

Dashboard

Navigation in the dashboard makes use of custom states and conditions on the main groups to hide or show them.

Affiliates and Admin Dashboard

Navigation in this case makes use of custom states, conditions and also URL modification. Navigation buttons change the state and current URL accordingly. When condition is true workflows also change the menu custom state on page load based on the URL content.

Editor

The editor on the left side of the user’s dashboard is where they make all changes to their resume visible on the right.

Show/Hide

The editor makes use of custom states to show and collapse sections and uses conditional workflows to prevent editing when the resume is published.

Sections & Forms

The Basic, Contact & Profile sections contain inputs that are binding on parent element’s thing.

The remaining sections with their own thing type have repeating groups and and buttons for adding or deleting new things. The things can then be editing within the repeating groups with parent-binded inputs.

Note: For a better UI/UX, the photo uploader is custom styled with opacity: 0 and placed above a button while a group shows the uploaded photo.

Publishing

A resume can only be edited, downloaded or publicly viewed when it is published. Download and Web version buttons are hidden when the resume is unpublished while the editor sections are disabled when the resume is published.

When a resume is published, a new PDF is generated and the download PDF and web version buttons become visible again.

PDF Generation

Each time a resume changes from unpublished to published, a new PDF is generated. This is done by converting a webpage to PDF using an external API. The /liveresume page is the webpage used to generated the resumes by passing the unique ID of the resume as a parameter.

The group holding the resume is hidden when the resume’s owner doesn’t meet certain conditions.

The current PDF Generation API is an act on Apify.

Setup instructions

  • Create an account on apify.com for free

  • Add this act to your account https://www.apify.com/yinka/PDF-Generator

  • Go to https://my.apify.com/account#/integrations and copy your API token

  • Paste this token in the token parameter of the PDF API connector call. For that you need to go to the "Plugins" tab, then find "API Connector" plugin, then "Apify" group. Inside there will be "PDF" calls, once you expand it you'll see the POST URL inside of which you need to insert your token (after "runs?token=") as can be seen on this screenshot

Rewards

Each user has a referral code created upon sign up. This code is the same as their resume’s share code and is changed when the share code is changed.

The referral system makes use of HTML5 local storage. Existing users can invite their friends with their referral link which includes their code. When their friends visit this link loads a dedicated page which grabs & stores the referral code to HTML5 storage.

If the visitor proceeds to sign up, a condition is true workflow will retrieve the stored referral code and a custom event will add the referrer to the newly sign up user.

When this newly signed up user subscribes for a paid plan, a reward is created, with the user’s referrer as recipient, in the API workflow triggered by Stripe’s Invoice payment successful webhook.

Payouts/WIthdrawals

Payouts/Withdrawals of earnings are made in Bitcoin using the Coinbase API.

Steps to set it up:

https://resumeclone.bubbleapps.io/version-test/manage/dashboard

https://resumeclone.bubbleapps.io/version-test/manage/dashboard?debug_mode=true

Replace the base URL with your own app’s base URL & ensure to add the live versions above it when you go live

  • Load the /manage/dashboard?debug_mode=true page and setup the Authentication with the Connect your Coinbase account button

  • Go to https://www.coinbase.com/accounts and select your preferred Bitcoin wallet/account

  • Copy the account id from the URL and paste it in the Coinbase send API connector call

  • Send at least $2 as a test transaction to complete setup

Affiliates

This template has a dedicated affiliate panel with extra features. Affiliates are able to sign up with Facebook, Twitter or Google and then submit an application form for manual approval by the admin.

Their status will remain as pending until admin approval and it becomes approved. Approved affiliates can then set their referral code and create a discount coupon after which their status becomes active and they can view the main affiliate panel.

Plans & Billing

New users are automatically subscribed to the free plan. The limitation of the free plan currently is in number of PDF downloads. When the number is exhausted they would no longer be able to download PDFs from the dashboard or web version of their resume.

Payments for the Pro plan are powered by Stripe using a combination of Stripe.js plugin and API calls. The API calls allows for canceling subscriptions on period end, uncancelling them, creating coupon codes and creating subscriptions with affiliate coupon codes applied.

For first time subscribers, their plan is updated to Pro by a front-end workflow once the card is created successfully. The renew API workflow triggered by Stripe’s webhook for Invoice Payment Successful ensures the Pro Plan is actually paid for and sets the user’s plan to Pro as before after which it processes rewards if need be. If the payment ended up not being successful the user is downgraded by the downgrade API workflow.

Webhooks

This template uses two Stripe webhooks. One for invoice payment successful and one for unsuccessful.

To configure them

Notes

You will find over 60 notes for this template in Bubble. They are for workflows and fields that need explaining. Mostly in User data fields, dashboard workflows and API workflows.

Custom Code

Dashboard Page

  • Do when Card form is visible workflow: The custom javascript used here does not need to be changed. It is used for card validation and feedback. It also relies on the JavascriptToBubble elements which must not be removed or edited.

  • Do when Card form mobile is visible workflow: The custom javascript used here does not need to be changed. It is used for card validation and feedback. It also relies on the JavascriptToBubble elements which must not be removed or edited.

  • Do when Current User's referred_code is empty workflow: The custom javascript used here does not need to be changed. It is used for referral attribution. It also relies on the JavascriptToBubble elements which must not be removed or edited.

  • JavascripttoBubble Ref event workflow: The custom javascript used here does not need to be changed. It is used for referral attribution. It also relies on the JavascriptToBubble elements which must not be removed or edited.

Tip: You can find the above workflows & elements using the search bars in design tab or workflow tab as the case may be.

Demo to preview the template