{"html":"<h1 id=\"pageTitle\" data-x=\"50\" data-y=\"70\" data-fontSize=\"45\" data-gap=\"2\" data-size=\"2\">Client Portal</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 me-auto text-start ps-0 p-md-0 view-site effect-tilt\" href=\"https://demo.onendoneweb.com/?autologin=1\" target=\"_blank\"><div class=\"button\"><span>View Live Site</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/v1740771474/portfolio/projects/kmpasnikx4kdvlacvgij.png\" alt=\"NRJohnson - Client Portal\"/></figure></div><h4>View the Demo</h4><p>I set up a demo with example data. Much of the functionality is disabled, but you can get a feel for how it operates.</p><p><a href=\"https://demo.onendoneweb.com/?autologin=1\" target=\"_blank\"><strong>https://demo.onendoneweb.com</strong></a></p><p>Username: <strong>DemoUser</strong></p><p>Password: <strong>password</strong></p><p><br></p><p>I wanted to create a place where my clients can manage all the details they need to with their site. This portal allows my clients to:</p><p>- Edit Content</p><ul><li class=\"ql-indent-1\">Galleries</li><li class=\"ql-indent-1\">Alert Modals</li><li class=\"ql-indent-1\">Vendors</li><li class=\"ql-indent-1\">Events</li><li class=\"ql-indent-1\">etc.</li></ul><p>- Manage their account with One-n-Done Web</p><p>- View Visitor Activity</p><p>This project represents years of work and was done entirely by me. It does not utilize any dashboard templates. It is a Node.js app with Pug. Vue is used in several modules.</p><h4>Modular:</h4><p>The system is built to be lightweight and provide what each client needs for their page. My philosophy around building it was to make things as simple as possible and only provide the functionality my clients need. Each module is provides base functionality, but I made it in such a way that I can add functionality on a client by client basis to suit their needs.</p><p>Each feature is a folder that has all the necessary scripts, views and database modules. The modules have a base function that is called when the server starts that adds the functionality to the site.</p><h4>Customizable:</h4><p>The colors and names of each feature can be easily customized to match the clients site. For example, the Announcements module can be named Alerts, or the Testimonials module can be names Quotes.</p><p>CSS colors all look to a set of root variables that are set in the common.css file, which is the only file loaded on both the front-end and admin portions of the site.</p><h4>Security:</h4><p>Each user logs in using a username/email and password set up after receiving an invitation by another user with the necessary permissions. Repeated failed login attempts result in wait times that accumulate to the requesting IP address being added to a blacklist.</p><p>If the user is logging in on a new IP for the first time, they must verify the login via email, after which the IP address will be added to a whitelist.</p><h4>User Roles:</h4><p>Roles can be assigned to users by Admins or Owners. These range from view only, to adding, editing and deleting permissions that can be given to a user individually.</p></div></div></section>"}