Adding AEPSi case study to site (#319)

* Adding AEPSi case study to site

---------

Co-authored-by: Paloma Pechenik <[email protected]>
Co-authored-by: Dan Ivovich <[email protected]>
Co-authored-by: Owen Bickford <[email protected]>

_data/featured_case_studies.yml

@@ -23,6 +23,12 @@
   link: /case-studies/bchd
   description: SmartLogic integrated Elasticsearch and added a number of new features to the Baltimore City Health Department's CHARMcare application, improving usability, filtering, and relevance of search results.
 
+- name: AEPSinteractive
+  logo: aepsi.png
+  headline: Streamline UX, data processing, reporting, and printing features
+  link: /case-studies/aepsi
+  description: SmartLogic developed an early childhood assessment application with customizable features, comprehensive reporting, and seamless lesson planning that tracks and supports progress.
+
 # - name: Simplebet
 #   logo: simplebet-square.png
 #   headline: DevOps architecture for a modern sports betting platform

case-studies/aepsi.html

@@ -0,0 +1,123 @@
+---
+title: AEPSi Case Study
+description: SmartLogic build of web application for AEPSi.
+body-class: case-study
+breadcrumb: AEPSi
+---
+<main class="main" role="main">
+    <section class="section hero hero-no-img">
+      <div class="container">
+        <div class="hero__left">
+          <div class="hero__left-text">
+            <div class="head-text">
+              <h1>AEPSinteractive</h1>
+            </div>
+          </div>
+          <div class="hero__left-desc">
+            <p>SmartLogic and Brookes Publishing teamed up to develop AEPSinteractive, an early childhood assessment application with customizable features, comprehensive reporting, and seamless lesson planning that tracks and supports progress.
+            </p>
+          </div>
+        </div>
+        <div class="hero__right">
+          <div class="hero__right-img">
+            <div class="hero__right-img">
+              <img src="/images/logo/logos-featured-clients/aepsi.png" alt="AEPSi Logo">
+            </div>
+          </div>
+        </div>
+    </section>
+    <div class="content-page-wrapper">
+      <section class="section content-block">
+        <div class="container">
+
+        <ul>
+            <li>Developed a robust early childhood assessment web application using Phoenix LiveView for real-time interactivity and streamlined data management.</li>
+            <li>Integrated Oban for background job processing, enabling efficient and uninterrupted data reporting and CSV generation.</li>
+            <li>Employed Tailwind CSS to create a responsive and accessible interface, ensuring compliance with <a target="_blank"href="https://www.w3.org/WAI/WCAG2AAA-Conformance">WCAG Standards</a> (AA & AAA).</li>
+            <li>Implemented PostgreSQL for scalable and reliable data storage, comprehensive reporting, and customized assessments that meet diverse educational needs.</li>
+          </ul>
+
+          <figure>
+            <img src="{{ site.baseurl }}/images/case-studies/aepsi/AEPS3Dashboard.gif" alt="AEPSi Web Application Dashboard"
+              width="100%">
+            <figcaption>AEPSi Web Application Dashboard</figcaption>
+          </figure>
+
+        </div>
+    </section>
+
+    <div class="content-page-wrapper">
+        <section class="section content-block">
+          <div class="container">
+      <h2>Data-Driven App Development Goals</h2>
+
+      <p>Educators have a crucial role in childhood development, but often face challenges in accurately assessing and supporting each child’s unique progress. AEPS-3 is a comprehensive assessment tool that bridges the gap by providing precise, actionable data.</p>
+
+      <p>The AEPSi web application captures and displays clear data on each child’s growth, enabling educators to tailor their strategies effectively and engage parents in their child's development journey. Brookes Publishing performed <a target="_blank"href="https://aepsinteractive.com/wp-content/uploads/2023/02/AEPS-3-Research_1.23.pdf">extensive research</a> to increase the utility, reliability, and validity of their assessment tools and worked with SmartLogic to apply those findings to the new app design.</p>
+
+      <blockquote>
+        "Without a doubt, I would recommend SmartLogic to anyone looking for a partner to develop applications. I’ve actually worked with SmartLogic for 12 years now. Throughout the years working with them, they bring so much knowledge and expertise."
+        <footer>– Monica Belle, Implementation Manager, Brookes Publishing</footer>
+      </blockquote>
+
+    </div>
+</section>
+
+      <div class="content-page-wrapper">
+        <section class="section content-block">
+          <div class="container">
+
+      <h2>Building a Reliable, User-Friendly Interface with Phoenix LiveView, PostgreSQL, and Tailwind CSS</h2>
+
+ <p>To bring this vision to life, AEPSi needed a reliable and flexible solution that can work in educational settings with a range of technological capabilities. To support these goals, SmartLogic built a system that streamlines data collection, facilitates effective lesson planning, and provides comprehensive reporting.</p>
+
+ <figure>
+    <img src="{{ site.baseurl }}/images/case-studies/aepsi/AEPS3ReadySetAssessment.png" alt="AEPSi Ready Set Assessment"
+      width="100%">
+    <figcaption>AEPSi Ready Set Assessment</figcaption>
+  </figure>
+
+  <p>Leveraging technologies like <a target="_blank"href="https://smartlogic.io/technologies/elixir-phoenix">Elixir, Phoenix LiveView</a>, PostgreSQL, and Tailwind CSS, SmartLogic built a responsive, real-time application that ensures seamless interactivity and data management. The use of Oban for background job processing and custom PDF generation tools allows for efficient data reporting and comprehensive, printable assessments.</p>
+
+</div>
+</section>
+
+<div class="content-page-wrapper">
+    <section class="section content-block">
+      <div class="container">
+
+        <h2>Enhancing Data Collection with Real-Time Interactivity</h2>
+
+        <p>The AEPSi platform incorporates dynamic features like interactive assessments and customizable reporting to enhance data collection efficiency and provide users with real-time feedback. Educators can instantly view and record developmental progress, ensuring that no small increment of growth goes unnoticed.</p>
+
+        <p>By integrating real-time interactivity and <a target="_blank"href="https://smartlogic.io/podcast/elixir-wizards/s12-e03-background-jobs-web-development/">background job processing</a> through Phoenix LiveView and Oban, the platform offers a seamless and responsive user experience. This innovative approach streamlines data management and empowers educators and caregivers with immediate, actionable insights.</p>
+
+        <h2 style="margin-top: 20px;">Advanced Reporting Capabilities</h2>
+
+        <p>To support educators and caregivers in their mission to track and nurture child development, the AEPSi platform includes advanced reporting capabilities. One of the standout features is the child progress record, which is visually engaging and rich with graphical elements such as shapes and arrows. This report provides a clear, comprehensive view of each child's developmental progress, making it easier for educators to identify areas of improvement and success.</p>
+
+        <figure>
+            <img src="{{ site.baseurl }}/images/case-studies/aepsi/AEPS3ChildProgressReportv3.gif" alt="AEPSi Child Progress Record"
+              width="100%">
+            <figcaption>AEPSi Child Progress Record</figcaption>
+          </figure>
+
+          <h2 style="margin-top: 20px;">App Design and Development Highlights </h2>
+
+          <ul>
+            <li><b>Custom PDF Generation:</b> SmartLogic utilized Phoenix components for <a target="_blank"href="https://smartlogic.io/podcast/elixir-wizards/s12-e07-web-to-pdf-printing-solutions/">creating PDF layouts.</a> This system embeds report and assessment content in the main section, with repeating headers containing account, program, or child meta information and footers containing credit text. A backend tool called Prince (CLI) converts this layout HTML into a PDF file with appropriate CSS printing styles.</li>
+            <li><b>Background Processing:</b> Report generation is managed in the background using Oban, ensuring that users can continue their work without waiting for the report to complete. The report is then rendered in the browser for review. Then, users may download CSV and PDF files, which are streamed to the browser using custom JavaScript for a seamless user experience. This solution eliminates the need to store those files temporarily on disk and rely on a background cleanup process.</li>
+            <li><b>Interactive and Customizable Reports:</b> Reports can be customized to focus on specific areas of development, making them highly relevant and actionable. This flexibility allows educators to tailor their strategies for individual children and their unique needs.</li>
+            <li><b>CSV Generation:</b> For raw data reporting and analysis, SmartLogic implemented features that allow users to download CSV files. Using Phoenix JavaScript hooks, the contents of the CSV are generated on the server and streamed to the browser, converting raw file binary into a downloadable format.</li>
+            <li><b>Scalable Data Management:</b> The PostgreSQL database provides robust data storage and management, enabling accurate, reliable, and easily accessible reports through the custom Elixir application.</li>
+          </ul>
+
+          <p>The AEPSi platform empowers educators with the tools they need to make informed, data-driven decisions. This comprehensive reporting system highlights child progress effectively and provides actionable reports for long-term developmental goals.</p>
+
+        </div>
+    </section>
+
+</main>
+<footer class="footer">
+  {% include footer-common.html %}
+</footer>

case-studies/index.html

@@ -66,7 +66,7 @@ <h3>{{ casestudy.headline }}</h3>
             people who are looking to build some sort of custom web app.</p>
         </div>
         <div class="quote__right-author">
-          <p>— Alex Mathews, Techincal Services Specialist, Urban Teachers</p>
+          <p>— Alex Mathews, Technical Services Specialist, Urban Teachers</p>
         </div>
       </div>
     </div>