{"html":"<h1 id=\"pageTitle\" data-x=\"50\" data-y=\"70\" data-fontSize=\"45\" data-gap=\"2\" data-size=\"2\">Toliver Family Ministry</h1><section class=\"container mt-3\"><div class=\"panel details\"><div class=\"w-100 mx-auto\"><div class=\"details-links row w-100 mx-auto p-0 position-relative\"><a class=\"col-6 ms-auto pe-0 p-md-0 effect-tilt\" href=\"https://github.com/nr-johnson/tfministry\" target=\"_blank\"><div class=\"button ms-auto position-relative\"><span>View GitHub Repo</span></div><span class=\"shadow\"></span></a></div><hr/><div class=\"details-img\"><figure class=\"m-0\"><img src=\"https://res.cloudinary.com/nrjohnson-cloud/image/upload/v1667341145/portfolio/projects/0/project_0_lkydeh.png\" alt=\"NRJohnson - Toliver Family Ministry\"/></figure></div><h4>The Need:</h4><p>A friend of mine does ministry work with Global Training Network and needed a place to share about what he does and provide updates for his supporters.</p><h4>Obstacles:</h4><p>I needed to provide a way to add and edit updates. These updates needed to include images with the optional captions and a main paragraph. They also needed to be user friendly and secure.</p><p>I also needed to provide a way to edit the content of certain pages, i.e. the intro paragraph and embed video on the intro page.</p><p>On his previous webpage the forms were unfiltered, which resulted in many spam submissions.</p><h4>Solutions:</h4><p>To fulfill these needs I created an admin area that can only be accessed with a username and password. In this area I created a number of forms for updating different areas of the webpage and adding updates. I integrated a MongoDB database for storing the data and Cloudinary for images.</p><p>The form for adding updates included many features, including grouping photos that would share a caption and removing images if they changed their mind on including it. The updates also have a checkbox to publish it or to keep it as a draft to be worked on later.</p><p>I created an account with Google reCaptcha and added it to each of the forms. I decided to use the invisible version in order to remove the extra step for visitors.</p></div></div></section>"}