To develop a platform that let a birthday person send out a custom email(s) to family and friends to rather make a donation to a good cause than to receive money or a present. The user needs to be able to login to select a cause of their choosing and then make use of an email template to fill out the fields required. While the user fills out the fields the template needs to be rendered live for them to be able to see how it will look before they send it off. Also, the causes needed to be attached already with their images, names, description and an auto-generated QR code from the payment gateway. The chosen users would then receive an email from the platform with a dynamically generated template with the QR codes attached for each cause so that they can either scan the code and perform the payment. When they receive the email via their emails they will also have the option to click a button to be taken to the payment process.
The front-end was build using Bootstrap as the theme framework for the app. The instructions, from the client at the time, was to keep the design as simple as possible, wireframe-like. Since Bootstrap makes use of flexbox it makes it a very good proven responsive framework that would cater to all devices.
The app consists of 2x screens, one for the login and selecting of the causes. The second screen is to creating the email template with your own message with an selection option to be able to select which persons you want to send the email to. The second screen also gives you a preview of how the email will look with your custom message and the causes that you selected.
Since I had a limited budget to work on, I decided to use a headless WordPress CMS approach for the backend to store the Causes, Orders, Transactions and Users. The WordPress CMS also acted as the email transaction service to send out the responsive dynamically created emails. So custom PHP & MySQL development was required and build into a 3rd Party custom WordPress build plugin.
The back-end was responsible for .:
- Authentication. Cookie Authentication as mentioned above.
- Login State Session.
- Management of the Causes. Creating, Editing the Causes and sending the content to the front-end app. Title, image, description, cause-id and such.
- Transactions. To store a copy of each transaction, email template content and the selected causes.
- Orders. When the SnapScan API, the payment merchant, responds with a successful or failed transaction via an API call. The whole order is saved as a custom post with custom fields containing all the transaction details, together with a transaction code for reference. You are also able to see who placed the order and what causes they selected. The reason for this is, if my client later decides he wants to reissue the emails, that might have gotten stuck or failed, he could do so with a bit of extra functionality added.
- The backend code was also responsible to make an API connection to the payment merchant to generate the QR codes via the SnapScan API.
Nothing always goes smooth sailing, and there was a problem with the login. You see the WordPress CMS is a server-side, a server rendered CMS app. So in WordPress Authentication, the login method needs to happen server side. If you are familiar with WordPress you will know that WordPress has 2x entry points, pages where you can log in and once login the page reloads to authenticate you. That is because the data is POSTED to WordPress via PHP.
Cookie: contains the user name, secret key hash & time-stamp. This needs to mach the session with authenticated system to perform authenticated tasks.
Since the site already made use of an SSL certificated (two-way traffic encryption between the browser and the server) with an additional firewall, that I setup. I created a custom, secret endpoint(API connection). The endpoint also has CORS with selected attributes enabled. I am not going to give away too much for security reasons, but the short from the long.:
- When the user submits their username and password it is sent via two-way encryption to the server via a custom endpoint.
- The server then checks if the user exists and if the password is invalid.
- If that is true, the server encrypts the password with extra data and together with a session-time-stamp and username issue 2x Cookies to the user’s browser. For both frontend and backend access.
- The browser then stores these Cookies and the user is authenticated with the CMS.
There are some other security steps also involved to make the app extra safe, but as stated I am unable to share those for security reasons.
Setup of a Virtual Private Server(VPS) for the client’s front-end app & back-end CMS system. I also performed other duties like setting up the SSL certifications and domain name.
Build out a small wireframe-look website to display the app and other content.
I think the functionality of the APP turned out quite nicely. It is 100% working and stable and the client already started generating revenue from his new venture. Yes since its an MVP, there is a lot of room for further improvements and adjustments, but its enough to get the client’s startup going for the set budget that was available at the time. I loved every single moment of the project and would like to thank my Client for giving me the opportunity to build out such a solution for him.