CarpeDM Dating Member Portal
Visit Member Portal
CarpeDM Dating is an exclusive DC-based matchmaking startup which caters to helping professional,vetted singles seeking meaningful relationships with exceptional Black women. I was approached by Talooka Studio, the design studio who created their visual branding. CarpeDM Dating was in the process of building their mobile app but wanted to avoid apple store fees. To avoid the fees they settled for a web-based payment portal which connected to the mobile app's backend API.
I signed on with CarpeDM as a contractor to help Talooka Studio build the Wordpress powered marketing website and member payment portal which was a standalone web app using Vue.js, Express and the Stripe API.
Planning & Implementation
The primary focuses during planning were;
- Deliverable feasibility
- Based on the deliverabeles there were a few features such as discounts, coupons, and a reward program which made me opt for Stripe's pre-built checkout UI. In order to handle data securely I had to also set up a backend server requests to and from Stripe. The Rewards program called for a third party service called Rewardful which was intergrated with Stripes Dashboard.
- Paywall and member vetting flow
-
CarpeDM Dating made sure all singles went through a background check and thorough vetting before gaining access to the member portal. Before a user became a member they would sign in and go through the following stages of background vetting:
- Profile Submission
- Profile Approval
- Deposit Payment
- Interview Passed
- Background Check
- Membership Payment
-
Pages and flags had to be created to show updates to the application based on status updates.
- Stripe API - Payment Gateway
- Stripe was at the center of the application's dataflow. We had to distinguish signed in "users" (who only paid for their deposit and are still in the vetting phases) from actual members (who paid for their subscription). During each payment checkout success, user data was sent to the Stripe dashboard using webhooks to incrementally create stripe profiles.
Userflow Diagram
Before implementing any code, I created a diagram of the applications dataflow which both helped during development and explaning technical information to the client. I broke the diagram into 4 stages:
-
Login and Signup - This consisted of the signup, login, verification and forget password flows
-
Deposit and Vetting Phase - In this phase the user is being vetted and paying their deposit. They are currently users in the database but they're not paid members. This section contained the most logic in order to update the user's status based on manual and automated vetting.
-
Server Side - The server side section of the diagram explains how payment checkouts are handled on the server side. Payment and user data was saved during checkouts through server webhooks. This allowed me to pass info to both Stripe and the app's database the same time.
-
Membership Phase - The last section of the diagram shows the user flow of paying their membership and becoming a member in the app and Stripe. At this time Stripe contains a customer object which maps 1:1 to that member. This allowed payment updates and rewards to stay up to date with the member.
Implementation
I built the CarpeDM Dating Member Web Portal using Vue.js, Node/Express and the Stripe API. Since the member portal contained a gated membership there were alot of background status checks they had to persist on the frontend. I used Vuex as the state management tool to save flags based on member status updates.
The express server was soley used to talk with Stripe's API during checkout sessions. During each payment session, I used Stripe webhooks to pass user and payment data to Stripe and the app database.
The member portal included the following features:
- Updating account details
- Messaging your matchmaker
- Updating payments
- Display background check status
- Referral link
- Credits for referrals with cash out option
- Member perks and discounts
- Links to community pages
