{"id":9904,"date":"2026-10-08T21:20:25","date_gmt":"2026-10-09T02:20:25","guid":{"rendered":"https:\/\/krisbunda.com\/blog\/?p=9904"},"modified":"2026-10-08T21:20:27","modified_gmt":"2026-10-09T02:20:27","slug":"a-dead-simple-web-app-for-small-projects","status":"publish","type":"post","link":"https:\/\/krisbunda.com\/blog\/2026\/10\/08\/a-dead-simple-web-app-for-small-projects\/","title":{"rendered":"A Dead-Simple Web App for Small Projects"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\" style=\"font-size:28px\">Need to make a small dynamic website but spinning up a WordPress or React app feels like overkill? Check out this lightweight web app demo. It has <abbr title=\"Single Page App\">SPA<\/abbr>-style navigation, forms interactivity, data persistence, and an admin dashboard\u2014all on a minimal tech stack.<\/p>\n\n\n\n<p class=\"has-background has-medium-font-size wp-block-paragraph\" style=\"background:linear-gradient(93deg,rgb(126,252,252) 0%,rgba(93,224,81,0.52) 100%)\"><strong>Demo site:<\/strong> <a href=\"https:\/\/krisbunda.com\/_apps\/simple-3-pager\/\" target=\"_blank\" rel=\"noopener\" title=\"Open demo web app in new tab\">The Minimalist Stack PoC<\/a><br \/><strong>GitHub repo:<\/strong> <a href=\"https:\/\/github.com\/bunda3d\/htmx-3-pager\" target=\"_blank\" rel=\"noopener\" title=\"Open repo in new tab\">github.com\/bunda3d\/htmx-3-pager<\/a><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Why make this Proof of Concept?<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">I read an <a href=\"https:\/\/www.infoworld.com\/article\/4221778\/get-started-with-htmx-4.html\" target=\"_blank\" rel=\"noopener\" title=\"Open InfoWorld article on 'htmx' library in new tab\">article about JavaScript library &#8220;htmx&#8221;<\/a>. <code>htmx<\/code> provides short code to insert into <code>HTML<\/code> markup to perform API actions (i.e., <code>GET<\/code> data from a DB).<\/p>\n\n\n<style>.kb-image9904_64f9d3-1c .kb-image-has-overlay:after{opacity:0.3;}.kb-image9904_64f9d3-1c img.kb-img, .kb-image9904_64f9d3-1c .kb-img img{border-top:2px solid #000000;border-right:2px solid #000000;border-bottom:2px solid #000000;border-left:2px solid #000000;box-shadow:20px 20px 30px 0px rgba(0, 0, 0, 0.2);}@media all and (max-width: 1024px){.kb-image9904_64f9d3-1c img.kb-img, .kb-image9904_64f9d3-1c .kb-img img{border-top:2px solid #000000;border-right:2px solid #000000;border-bottom:2px solid #000000;border-left:2px solid #000000;}}@media all and (max-width: 767px){.kb-image9904_64f9d3-1c img.kb-img, .kb-image9904_64f9d3-1c .kb-img img{border-top:2px solid #000000;border-right:2px solid #000000;border-bottom:2px solid #000000;border-left:2px solid #000000;}}<\/style>\n<figure class=\"wp-block-kadence-image kb-image9904_64f9d3-1c size-large\"><a href=\"https:\/\/krisbunda.com\/blog\/wp-content\/uploads\/2026\/10\/infoworld_htmx_dynamic_web_page_article.png\" class=\"kb-advanced-image-link\"><img loading=\"lazy\" decoding=\"async\" width=\"1200\" height=\"1371\" src=\"https:\/\/krisbunda.com\/blog\/wp-content\/uploads\/2026\/10\/infoworld_htmx_dynamic_web_page_article-1200x1371.png\" alt=\"Screenshot of an InfoWorld article about using JavaScript library &quot;htmx&quot; to create dynamic web pages.\" class=\"kb-img wp-image-9914\" srcset=\"https:\/\/krisbunda.com\/blog\/wp-content\/uploads\/2026\/10\/infoworld_htmx_dynamic_web_page_article-1200x1371.png 1200w, https:\/\/krisbunda.com\/blog\/wp-content\/uploads\/2026\/10\/infoworld_htmx_dynamic_web_page_article-600x685.png 600w, https:\/\/krisbunda.com\/blog\/wp-content\/uploads\/2026\/10\/infoworld_htmx_dynamic_web_page_article-131x150.png 131w, https:\/\/krisbunda.com\/blog\/wp-content\/uploads\/2026\/10\/infoworld_htmx_dynamic_web_page_article-1345x1536.png 1345w, https:\/\/krisbunda.com\/blog\/wp-content\/uploads\/2026\/10\/infoworld_htmx_dynamic_web_page_article.png 1630w\" sizes=\"auto, (max-width: 1200px) 100vw, 1200px\" \/><\/a><figcaption>InfoWorld article &#8211; using htmx for dynamic web pages<\/figcaption><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">My initial reaction was &#8216;Why would anyone need this when they can just write <code>JavaScript AJAX<\/code> calls?&#8221; But the more I thought about it, the more plausible use cases surfaced from my internal devil&#8217;s advocate. I realized <code>htmx<\/code> could be the API handler and URL router of a <strong>very lightweight web app<\/strong> because it adds little bulk to the code base. In my opinion, htmx.js does for AJAX what Bootstrap does for CSS. <\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Compare line counts on equivalent <span style=\"text-decoration: underline;\">htmx<\/span> &amp; <span style=\"text-decoration: underline;\">JavaScript AJAX<\/span> functions<\/h4>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro cbp-has-line-numbers cbp-highlight-hover\" data-code-block-pro-font-family=\"Code-Pro-Fira-Code\" style=\"font-size:clamp(14px, .875rem, 21px);font-family:Code-Pro-Fira-Code,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;--cbp-line-number-color:#F8F8F2;--cbp-line-number-width:calc(2 * 0.6 * .875rem);--cbp-line-highlight-color:rgba(253, 253, 237, 0.2);line-height:clamp(20px, 1.25rem, 30px);--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span style=\"display:flex;align-items:center;padding:10px 0px 10px 16px;margin-bottom:-2px;width:100%;text-align:left;background-color:#333545;color:#efefe1\">HTML<\/span><span role=\"button\" tabindex=\"0\" style=\"color:#F8F8F2;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><pre class=\"code-block-pro-copy-button-pre\" aria-hidden=\"true\"><textarea class=\"code-block-pro-copy-button-textarea\" tabindex=\"-1\" aria-hidden=\"true\" readonly>&lt;!-- SPA-style content loading: htmx version -->\n&lt;main\n  id=\"main-content\"\n  class=\"container my-5 flex-grow-1\"\n  hx-get=\"api\/backend.php?action=page&amp;page=home\"\n  hx-trigger=\"load\"\n  hx-swap=\"innerHTML\"\n>\n  &lt;!-- Page fragment loads here -->\n&lt;\/main><\/textarea><\/pre><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M4.5 12.75l6 6 9-13.5\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M16.5 8.25V6a2.25 2.25 0 00-2.25-2.25H6A2.25 2.25 0 003.75 6v8.25A2.25 2.25 0 006 16.5h2.25m8.25-8.25H18a2.25 2.25 0 012.25 2.25V18A2.25 2.25 0 0118 20.25h-7.5A2.25 2.25 0 018.25 18v-1.5m8.25-8.25h-6a2.25 2.25 0 00-2.25 2.25v6\"><\/path><\/svg><\/span><pre class=\"shiki dracula\" style=\"background-color: #282A36\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #6272A4\">&lt;!-- SPA-style content loading: htmx version --&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">&lt;<\/span><span style=\"color: #FF79C6\">main<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">  <\/span><span style=\"color: #50FA7B; font-style: italic\">id<\/span><span style=\"color: #FF79C6\">=<\/span><span style=\"color: #E9F284\">&quot;<\/span><span style=\"color: #F1FA8C\">main-content<\/span><span style=\"color: #E9F284\">&quot;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">  <\/span><span style=\"color: #50FA7B; font-style: italic\">class<\/span><span style=\"color: #FF79C6\">=<\/span><span style=\"color: #E9F284\">&quot;<\/span><span style=\"color: #F1FA8C\">container my-5 flex-grow-1<\/span><span style=\"color: #E9F284\">&quot;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">  <\/span><span style=\"color: #50FA7B; font-style: italic\">hx-get<\/span><span style=\"color: #FF79C6\">=<\/span><span style=\"color: #E9F284\">&quot;<\/span><span style=\"color: #F1FA8C\">api\/backend.php?action=page&amp;page=home<\/span><span style=\"color: #E9F284\">&quot;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">  <\/span><span style=\"color: #50FA7B; font-style: italic\">hx-trigger<\/span><span style=\"color: #FF79C6\">=<\/span><span style=\"color: #E9F284\">&quot;<\/span><span style=\"color: #F1FA8C\">load<\/span><span style=\"color: #E9F284\">&quot;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">  <\/span><span style=\"color: #50FA7B; font-style: italic\">hx-swap<\/span><span style=\"color: #FF79C6\">=<\/span><span style=\"color: #E9F284\">&quot;<\/span><span style=\"color: #F1FA8C\">innerHTML<\/span><span style=\"color: #E9F284\">&quot;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">  <\/span><span style=\"color: #6272A4\">&lt;!-- Page fragment loads here --&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">&lt;\/<\/span><span style=\"color: #FF79C6\">main<\/span><span style=\"color: #F8F8F2\">&gt;<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro cbp-has-line-numbers cbp-highlight-hover\" data-code-block-pro-font-family=\"Code-Pro-Fira-Code\" style=\"font-size:clamp(14px, .875rem, 21px);font-family:Code-Pro-Fira-Code,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;--cbp-line-number-color:#F8F8F2;--cbp-line-number-width:calc(2 * 0.6 * .875rem);--cbp-line-highlight-color:rgba(253, 253, 237, 0.2);line-height:clamp(20px, 1.25rem, 30px);--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span style=\"display:flex;align-items:center;padding:10px 0px 10px 16px;margin-bottom:-2px;width:100%;text-align:left;background-color:#333545;color:#efefe1\">HTML<\/span><span role=\"button\" tabindex=\"0\" style=\"color:#F8F8F2;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><pre class=\"code-block-pro-copy-button-pre\" aria-hidden=\"true\"><textarea class=\"code-block-pro-copy-button-textarea\" tabindex=\"-1\" aria-hidden=\"true\" readonly>&lt;!-- SPA-style content loading: JavaScript AJAX version -->\n&lt;main \n  id=\"main-content\" \n  class=\"container my-5 flex-grow-1\"\n>\n  &lt;!-- Page fragment loads here -->\n&lt;\/main>\n\n&lt;script>\n  document.addEventListener(\"DOMContentLoaded\", function () {\n    fetch(\"api\/backend.php?action=page&amp;page=home\")\n      .then((response) => response.text())\n      .then((html) => {\n        document.getElementById(\"main-content\").innerHTML = html;\n      })\n      .catch((err) => {\n        console.error(\"AJAX GET failed:\", err);\n      });\n  });\n&lt;\/script><\/textarea><\/pre><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M4.5 12.75l6 6 9-13.5\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M16.5 8.25V6a2.25 2.25 0 00-2.25-2.25H6A2.25 2.25 0 003.75 6v8.25A2.25 2.25 0 006 16.5h2.25m8.25-8.25H18a2.25 2.25 0 012.25 2.25V18A2.25 2.25 0 0118 20.25h-7.5A2.25 2.25 0 018.25 18v-1.5m8.25-8.25h-6a2.25 2.25 0 00-2.25 2.25v6\"><\/path><\/svg><\/span><pre class=\"shiki dracula\" style=\"background-color: #282A36\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #6272A4\">&lt;!-- SPA-style content loading: JavaScript AJAX version --&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">&lt;<\/span><span style=\"color: #FF79C6\">main<\/span><span style=\"color: #F8F8F2\"> <\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">  <\/span><span style=\"color: #50FA7B; font-style: italic\">id<\/span><span style=\"color: #FF79C6\">=<\/span><span style=\"color: #E9F284\">&quot;<\/span><span style=\"color: #F1FA8C\">main-content<\/span><span style=\"color: #E9F284\">&quot;<\/span><span style=\"color: #F8F8F2\"> <\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">  <\/span><span style=\"color: #50FA7B; font-style: italic\">class<\/span><span style=\"color: #FF79C6\">=<\/span><span style=\"color: #E9F284\">&quot;<\/span><span style=\"color: #F1FA8C\">container my-5 flex-grow-1<\/span><span style=\"color: #E9F284\">&quot;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">  <\/span><span style=\"color: #6272A4\">&lt;!-- Page fragment loads here --&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">&lt;\/<\/span><span style=\"color: #FF79C6\">main<\/span><span style=\"color: #F8F8F2\">&gt;<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">&lt;<\/span><span style=\"color: #FF79C6\">script<\/span><span style=\"color: #F8F8F2\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">  document.<\/span><span style=\"color: #50FA7B\">addEventListener<\/span><span style=\"color: #F8F8F2\">(<\/span><span style=\"color: #E9F284\">&quot;<\/span><span style=\"color: #F1FA8C\">DOMContentLoaded<\/span><span style=\"color: #E9F284\">&quot;<\/span><span style=\"color: #F8F8F2\">, <\/span><span style=\"color: #FF79C6\">function<\/span><span style=\"color: #F8F8F2\"> () {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">    <\/span><span style=\"color: #50FA7B\">fetch<\/span><span style=\"color: #F8F8F2\">(<\/span><span style=\"color: #E9F284\">&quot;<\/span><span style=\"color: #F1FA8C\">api\/backend.php?action=page&amp;page=home<\/span><span style=\"color: #E9F284\">&quot;<\/span><span style=\"color: #F8F8F2\">)<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">      .<\/span><span style=\"color: #50FA7B\">then<\/span><span style=\"color: #F8F8F2\">((<\/span><span style=\"color: #FFB86C; font-style: italic\">response<\/span><span style=\"color: #F8F8F2\">) <\/span><span style=\"color: #FF79C6\">=&gt;<\/span><span style=\"color: #F8F8F2\"> response.<\/span><span style=\"color: #50FA7B\">text<\/span><span style=\"color: #F8F8F2\">())<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">      .<\/span><span style=\"color: #50FA7B\">then<\/span><span style=\"color: #F8F8F2\">((<\/span><span style=\"color: #FFB86C; font-style: italic\">html<\/span><span style=\"color: #F8F8F2\">) <\/span><span style=\"color: #FF79C6\">=&gt;<\/span><span style=\"color: #F8F8F2\"> {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">        document.<\/span><span style=\"color: #50FA7B\">getElementById<\/span><span style=\"color: #F8F8F2\">(<\/span><span style=\"color: #E9F284\">&quot;<\/span><span style=\"color: #F1FA8C\">main-content<\/span><span style=\"color: #E9F284\">&quot;<\/span><span style=\"color: #F8F8F2\">).innerHTML <\/span><span style=\"color: #FF79C6\">=<\/span><span style=\"color: #F8F8F2\"> html;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">      })<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">      .<\/span><span style=\"color: #50FA7B\">catch<\/span><span style=\"color: #F8F8F2\">((<\/span><span style=\"color: #FFB86C; font-style: italic\">err<\/span><span style=\"color: #F8F8F2\">) <\/span><span style=\"color: #FF79C6\">=&gt;<\/span><span style=\"color: #F8F8F2\"> {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">        console.<\/span><span style=\"color: #50FA7B\">error<\/span><span style=\"color: #F8F8F2\">(<\/span><span style=\"color: #E9F284\">&quot;<\/span><span style=\"color: #F1FA8C\">AJAX GET failed:<\/span><span style=\"color: #E9F284\">&quot;<\/span><span style=\"color: #F8F8F2\">, err);<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">      });<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">  });<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">&lt;\/<\/span><span style=\"color: #FF79C6\">script<\/span><span style=\"color: #F8F8F2\">&gt;<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n<h2 class=\"wp-block-heading\">Who needs a &#8216;very lightweight&#8217; web app?<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">For devs or technical souls who want to make a simple website with at least one dynamic feature (i.e., a form, a database, a newsletter service), they don&#8217;t need the complexity baked into the average web app framework. It&#8217;s overkill and can cause other issues down the road, like maintainability problems.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">When your small business website is too complicated to update<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">I created an Angular app-as-website for a small business. The business was sold and the new owners&#8217; marketing consultants contacted me because they wanted to update the website, but no one on their dev team had Angular experience. <\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Some JS front-end framework staples were mystifying to them. I think they were WordPress developers; maybe had experience customizing <code>JS<\/code> and <code>PHP<\/code>, or maybe just knew the <abbr title=\"What You See Is What You Get\">WYSIWYG<\/abbr> editor&#8230; And that&#8217;s relatable<strong>\u2014<\/strong>no dev has deep muscle memory for a multitude of app frameworks.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Maintainability Matters<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">The lesson is: a 3-pager doesn&#8217;t need a framework with a build step and deployment pipeline. Write a handful of files to a folder, FTP that sumbitch to a shared hosting plan, call it a day. Then you won&#8217;t have trouble finding someone who can update your site later. When it&#8217;s simple enough, using standard languages and popular libraries, you&#8217;ll find people who can &#8216;figure it out&#8217; when it comes time to update and upgrade.<\/p>\n\n\n<style>.kb-image9904_fa2d65-82 .kb-image-has-overlay:after{opacity:0.3;}<\/style>\n<figure class=\"wp-block-kadence-image kb-image9904_fa2d65-82 size-full\"><a href=\"https:\/\/krisbunda.com\/blog\/wp-content\/uploads\/2026\/10\/file_tree.png\" class=\"kb-advanced-image-link\"><img loading=\"lazy\" decoding=\"async\" width=\"428\" height=\"889\" src=\"https:\/\/krisbunda.com\/blog\/wp-content\/uploads\/2026\/10\/file_tree.png\" alt=\"Screenshot of a full-stack web app&#039;s file tree, illustrating simplicity and maintainability as there&#039;s only about a dozen files in the tree.\" class=\"kb-img wp-image-9910\" srcset=\"https:\/\/krisbunda.com\/blog\/wp-content\/uploads\/2026\/10\/file_tree.png 428w, https:\/\/krisbunda.com\/blog\/wp-content\/uploads\/2026\/10\/file_tree-72x150.png 72w\" sizes=\"auto, (max-width: 428px) 100vw, 428px\" \/><\/a><figcaption>Entire full-stack web app&#8217;s file tree contains a dozen small files, indicating simplicity and maintainability.<\/figcaption><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">How does this architecture solve for complexity?<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Unlike JavaScript frontend frameworks (Angular, React, etc.) or full-stack frameworks (ASP.NET, Ruby on Rails, etc.), this approach avoids complex build tools, extensive library imports, and heavy middleware wiring (the code that connects frontend to backend). <\/p>\n\n\n\n<h4 class=\"wp-block-heading\">For this small web app workflow, the developer: <\/h4>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Edits page content as HTML<\/li>\n\n\n\n<li>Styles responsively with Bootstrap (<a href=\"https:\/\/www.index.dev\/skill-vs-skill\/tailwind-css-vs-bootstrap-vs-material-ui\" target=\"_blank\" rel=\"noopener\" title=\"Compare Bootstrap, Material-UI, Tailwind CSS\">or another CSS framework library<\/a>)<\/li>\n\n\n\n<li>Handles server requests with PHP<\/li>\n\n\n\n<li>Uses <a href=\"https:\/\/github.com\/bigskysoftware\/htmx\" target=\"_blank\" rel=\"noopener\">htmx<\/a> to handle API responses<\/li>\n\n\n\n<li>Writes <abbr title=\"Structured Query Language\">SQL<\/abbr> queries to access or persist data<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">This stack of popular, basic, and simplicity-minded languages and libraries produces a responsive <abbr title=\"Single Page Application\">SPA<\/abbr>-style user experience (<abbr title=\"User eXperience\">UX<\/abbr>) from a minimal, maintainable architecture.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Dependable<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">There&#8217;s no build pipeline. No need for special hosting servers. No separate apps for frontend and backend. Just get a shared hosting plan and <abbr title=\"File Transfer Protocol\">FTP<\/abbr> one small folder to the server.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">The app will run because it uses the same server language as most websites in the world<strong>\u2014<\/strong>PHP. And the database will work because most hosts&#8217; PHP config supports SQLite. When things are simple and &#8216;just work,&#8217; they&#8217;re considered low maintenance. People like low maintenance.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Responsive Design<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">CSS frameworks make it easy now to accommodate multiple device types and screen sizes. When I still see an app or site that isn&#8217;t responsive<strong>\u2014<\/strong>i.e., the UI explodes and becomes unusable on a different screen size<strong>\u2014<\/strong>I think &#8220;that&#8217;s a choice.&#8221; Perhaps the company&#8217;s products have too much tech debt and too few devs to update the UI<strong>\u2014<\/strong>but those conditions are borne of choices as well.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Anyway, if you&#8217;re unclear on the concept of responsive UI behavior here&#8217;s a demonstration using the <a href=\"https:\/\/krisbunda.com\/_apps\/simple-3-pager\/#admin\" target=\"_blank\" rel=\"noopener\" title=\"Open demo app's Admin Dashboard page in a new tab\">&#8216;Admin Dashboard&#8217; page<\/a> from the demo app. First shown collapsed in the phone or small viewport mode. Then shown expanded to large viewport mode (like for a tablet or monitor device).<\/p>\n\n\n<style>.kb-image9904_66d1f5-8c .kb-image-has-overlay:after{opacity:0.3;}<\/style>\n<figure class=\"wp-block-kadence-image kb-image9904_66d1f5-8c size-full\"><a href=\"https:\/\/krisbunda.com\/blog\/wp-content\/uploads\/2026\/10\/responsive_admin_dashboard_view_1_phone.png\" class=\"kb-advanced-image-link\"><img loading=\"lazy\" decoding=\"async\" width=\"793\" height=\"1849\" src=\"https:\/\/krisbunda.com\/blog\/wp-content\/uploads\/2026\/10\/responsive_admin_dashboard_view_1_phone.png\" alt=\"Showing an app&#039;s &#039;Admin Dashboard&#039; page&#039;s responsive design characteristics--this image shows the page in the collapsed phone or small viewport mode.\" class=\"kb-img wp-image-9923\" srcset=\"https:\/\/krisbunda.com\/blog\/wp-content\/uploads\/2026\/10\/responsive_admin_dashboard_view_1_phone.png 793w, https:\/\/krisbunda.com\/blog\/wp-content\/uploads\/2026\/10\/responsive_admin_dashboard_view_1_phone-600x1399.png 600w, https:\/\/krisbunda.com\/blog\/wp-content\/uploads\/2026\/10\/responsive_admin_dashboard_view_1_phone-64x150.png 64w, https:\/\/krisbunda.com\/blog\/wp-content\/uploads\/2026\/10\/responsive_admin_dashboard_view_1_phone-659x1536.png 659w\" sizes=\"auto, (max-width: 793px) 100vw, 793px\" \/><\/a><figcaption>Demo app&#8217;s &#8216;Admin Dashboard&#8217; page with responsive design characteristics\u2014shown in collapsed mode for phone screen or a small viewport.<\/figcaption><\/figure>\n\n\n<style>.kb-image9904_ca92be-4a .kb-image-has-overlay:after{opacity:0.3;}<\/style>\n<figure class=\"wp-block-kadence-image kb-image9904_ca92be-4a size-full\"><a href=\"https:\/\/krisbunda.com\/blog\/wp-content\/uploads\/2026\/10\/responsive_admin_dashboard_view_2_monitor.png\" class=\"kb-advanced-image-link\"><img loading=\"lazy\" decoding=\"async\" width=\"2010\" height=\"1850\" src=\"https:\/\/krisbunda.com\/blog\/wp-content\/uploads\/2026\/10\/responsive_admin_dashboard_view_2_monitor.png\" alt=\"Showing an app&#039;s &#039;Admin Dashboard&#039; page&#039;s responsive design characteristics--this image shows the page in the expanded mode for a tablet \/ monitor device or large viewport.\" class=\"kb-img wp-image-9924\" srcset=\"https:\/\/krisbunda.com\/blog\/wp-content\/uploads\/2026\/10\/responsive_admin_dashboard_view_2_monitor.png 2010w, https:\/\/krisbunda.com\/blog\/wp-content\/uploads\/2026\/10\/responsive_admin_dashboard_view_2_monitor-600x552.png 600w, https:\/\/krisbunda.com\/blog\/wp-content\/uploads\/2026\/10\/responsive_admin_dashboard_view_2_monitor-1200x1104.png 1200w, https:\/\/krisbunda.com\/blog\/wp-content\/uploads\/2026\/10\/responsive_admin_dashboard_view_2_monitor-150x138.png 150w, https:\/\/krisbunda.com\/blog\/wp-content\/uploads\/2026\/10\/responsive_admin_dashboard_view_2_monitor-1536x1414.png 1536w\" sizes=\"auto, (max-width: 2010px) 100vw, 2010px\" \/><\/a><figcaption>Demo app&#8217;s &#8216;Admin Dashboard&#8217; page with responsive design characteristics\u2014shown in expanded mode for tablet \/ monitor screen or a large viewport.<\/figcaption><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">How do I re-purpose this demo app for my next small web project?<\/h2>\n\n\n\n<p class=\"has-background has-medium-font-size wp-block-paragraph\" style=\"background:linear-gradient(93deg,rgb(126,252,252) 0%,rgba(93,224,81,0.52) 100%)\"><strong>Demo site:<\/strong> <a href=\"https:\/\/krisbunda.com\/_apps\/simple-3-pager\/\" target=\"_blank\" rel=\"noopener\" title=\"Open demo web app in new tab\">The Minimalist Stack PoC<\/a><br \/><strong>GitHub repo:<\/strong> <a href=\"https:\/\/github.com\/bunda3d\/htmx-3-pager\" target=\"_blank\" rel=\"noopener\" title=\"Open repo in new tab\">github.com\/bunda3d\/htmx-3-pager<\/a><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Clone the repo to your machine and update the content. <\/p>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro cbp-has-line-numbers\" data-code-block-pro-font-family=\"Code-Pro-Fira-Code\" style=\"font-size:clamp(14px, .875rem, 21px);font-family:Code-Pro-Fira-Code,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;--cbp-line-number-color:#F8F8F2;--cbp-line-number-width:calc(1 * 0.6 * .875rem);line-height:clamp(20px, 1.25rem, 30px);--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span style=\"display:flex;align-items:center;padding:10px 0px 10px 16px;margin-bottom:-2px;width:100%;text-align:left;background-color:#333545;color:#efefe1\">PowerShell<\/span><span role=\"button\" tabindex=\"0\" style=\"color:#F8F8F2;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><pre class=\"code-block-pro-copy-button-pre\" aria-hidden=\"true\"><textarea class=\"code-block-pro-copy-button-textarea\" tabindex=\"-1\" aria-hidden=\"true\" readonly>git clone \"https:\/\/github.com\/bunda3d\/htmx-3-pager.git\" my-project-folder-name<\/textarea><\/pre><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M4.5 12.75l6 6 9-13.5\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M16.5 8.25V6a2.25 2.25 0 00-2.25-2.25H6A2.25 2.25 0 003.75 6v8.25A2.25 2.25 0 006 16.5h2.25m8.25-8.25H18a2.25 2.25 0 012.25 2.25V18A2.25 2.25 0 0118 20.25h-7.5A2.25 2.25 0 018.25 18v-1.5m8.25-8.25h-6a2.25 2.25 0 00-2.25 2.25v6\"><\/path><\/svg><\/span><pre class=\"shiki dracula\" style=\"background-color: #282A36\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #F8F8F2\">git clone <\/span><span style=\"color: #E9F284\">&quot;<\/span><span style=\"color: #F1FA8C\">https:\/\/github.com\/bunda3d\/htmx-3-pager.git<\/span><span style=\"color: #E9F284\">&quot;<\/span><span style=\"color: #F8F8F2\"> my<\/span><span style=\"color: #FF79C6\">-<\/span><span style=\"color: #F8F8F2\">project<\/span><span style=\"color: #FF79C6\">-<\/span><span style=\"color: #F8F8F2\">folder<\/span><span style=\"color: #FF79C6\">-<\/span><span style=\"color: #F8F8F2\">name<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n<h3 class=\"wp-block-heading\">There are 2 &#8216;Most Important Files&#8217; to be acquainted with<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Let&#8217;s look at the files that do most of the heavy lifting and discuss at least one process they execute together in order to gain insight on how the app works and effectively make changes. <\/p>\n\n\n\n<h4 class=\"wp-block-heading\">backend.php<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">This PHP file acts as an <abbr title=\"Application Programming Interface\">API<\/abbr>, receiving client requests and returning responses. You can see the &#8220;Action Handler&#8221; <code>switch<\/code> function which accepts a request (<code>$action<\/code> parameter) and has <code>case<\/code> statements to process each type of <code>$action<\/code>.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/krisbunda.com\/blog\/wp-content\/uploads\/2026\/10\/backend_php_script.png\"><img loading=\"lazy\" decoding=\"async\" width=\"1200\" height=\"1036\" src=\"https:\/\/krisbunda.com\/blog\/wp-content\/uploads\/2026\/10\/backend_php_script-1200x1036.png\" alt=\"Screenshot of backend.php file, focused on a switch statement that accepts $action parameters\" class=\"wp-image-9937\" srcset=\"https:\/\/krisbunda.com\/blog\/wp-content\/uploads\/2026\/10\/backend_php_script-1200x1036.png 1200w, https:\/\/krisbunda.com\/blog\/wp-content\/uploads\/2026\/10\/backend_php_script-600x518.png 600w, https:\/\/krisbunda.com\/blog\/wp-content\/uploads\/2026\/10\/backend_php_script-150x129.png 150w, https:\/\/krisbunda.com\/blog\/wp-content\/uploads\/2026\/10\/backend_php_script-1536x1326.png 1536w, https:\/\/krisbunda.com\/blog\/wp-content\/uploads\/2026\/10\/backend_php_script.png 1956w\" sizes=\"auto, (max-width: 1200px) 100vw, 1200px\" \/><\/a><figcaption class=\"wp-element-caption\">backend.php file: note the switch statement that accepts $action parameters<\/figcaption><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">The first case is selected when requested <code>$action<\/code> type is &#8216;page&#8217;. The case should return HTML content (a page fragment) to the calling HTML element. The element can replace its content with this response, which is how we implement the Single Page App scheme.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/krisbunda.com\/blog\/wp-content\/uploads\/2026\/10\/backend_php_script-switch_case_spa_router.png\"><img loading=\"lazy\" decoding=\"async\" width=\"1200\" height=\"1114\" src=\"https:\/\/krisbunda.com\/blog\/wp-content\/uploads\/2026\/10\/backend_php_script-switch_case_spa_router-1200x1114.png\" alt=\"Screenshot of backend.php file, focused on a switch function case statement handling &quot;page&quot; $action parameters.\" class=\"wp-image-9940\" srcset=\"https:\/\/krisbunda.com\/blog\/wp-content\/uploads\/2026\/10\/backend_php_script-switch_case_spa_router-1200x1114.png 1200w, https:\/\/krisbunda.com\/blog\/wp-content\/uploads\/2026\/10\/backend_php_script-switch_case_spa_router-600x557.png 600w, https:\/\/krisbunda.com\/blog\/wp-content\/uploads\/2026\/10\/backend_php_script-switch_case_spa_router-150x139.png 150w, https:\/\/krisbunda.com\/blog\/wp-content\/uploads\/2026\/10\/backend_php_script-switch_case_spa_router-1536x1426.png 1536w, https:\/\/krisbunda.com\/blog\/wp-content\/uploads\/2026\/10\/backend_php_script-switch_case_spa_router.png 1866w\" sizes=\"auto, (max-width: 1200px) 100vw, 1200px\" \/><\/a><figcaption class=\"wp-element-caption\">backend.php file&#8217;s switch case that handles &#8220;page&#8221; $action parameters.<\/figcaption><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">For example, using <a href=\"https:\/\/htmx.org\/docs\/\" target=\"_blank\" rel=\"noopener\" title=\"Open htmx.js documentation in new tab\">htmx.js<\/a> library&#8217;s <code>hx-get<\/code> function, this <code>&lt;div><\/code> sends a <code>GET<\/code> request to backend.php with the <code>action<\/code> value &#8216;page&#8217; and the <code>page<\/code> value &#8216;contact&#8217;. This is interpreted as: the contents of file <code>contact.html<\/code> are to be returned to the div. Upon receipt, the div will replace its inner content with the response per the <code>hx-swap<\/code> instruction.<\/p>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro cbp-has-line-numbers\" data-code-block-pro-font-family=\"Code-Pro-Fira-Code\" style=\"font-size:clamp(14px, .875rem, 21px);font-family:Code-Pro-Fira-Code,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;--cbp-line-number-color:#F8F8F2;--cbp-line-number-width:calc(1 * 0.6 * .875rem);line-height:clamp(20px, 1.25rem, 30px);--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span style=\"display:flex;align-items:center;padding:10px 0px 10px 16px;margin-bottom:-2px;width:100%;text-align:left;background-color:#333545;color:#efefe1\">HTML<\/span><span role=\"button\" tabindex=\"0\" style=\"color:#F8F8F2;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><pre class=\"code-block-pro-copy-button-pre\" aria-hidden=\"true\"><textarea class=\"code-block-pro-copy-button-textarea\" tabindex=\"-1\" aria-hidden=\"true\" readonly>&lt;div \n  hx-get=\"api\/backend.php?action=page&amp;page=contact\"\n  hx-swap=\"innerHTML\"\n>\n  &lt;!-- this is where content gets swapped in (loaded) -->\n&lt;\/div><\/textarea><\/pre><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M4.5 12.75l6 6 9-13.5\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M16.5 8.25V6a2.25 2.25 0 00-2.25-2.25H6A2.25 2.25 0 003.75 6v8.25A2.25 2.25 0 006 16.5h2.25m8.25-8.25H18a2.25 2.25 0 012.25 2.25V18A2.25 2.25 0 0118 20.25h-7.5A2.25 2.25 0 018.25 18v-1.5m8.25-8.25h-6a2.25 2.25 0 00-2.25 2.25v6\"><\/path><\/svg><\/span><pre class=\"shiki dracula\" style=\"background-color: #282A36\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #F8F8F2\">&lt;<\/span><span style=\"color: #FF79C6\">div<\/span><span style=\"color: #F8F8F2\"> <\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">  <\/span><span style=\"color: #50FA7B; font-style: italic\">hx-get<\/span><span style=\"color: #FF79C6\">=<\/span><span style=\"color: #E9F284\">&quot;<\/span><span style=\"color: #F1FA8C\">api\/backend.php?action=page&amp;page=contact<\/span><span style=\"color: #E9F284\">&quot;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">  <\/span><span style=\"color: #50FA7B; font-style: italic\">hx-swap<\/span><span style=\"color: #FF79C6\">=<\/span><span style=\"color: #E9F284\">&quot;<\/span><span style=\"color: #F1FA8C\">innerHTML<\/span><span style=\"color: #E9F284\">&quot;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">  <\/span><span style=\"color: #6272A4\">&lt;!-- this is where content gets swapped in (loaded) --&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">&lt;\/<\/span><span style=\"color: #FF79C6\">div<\/span><span style=\"color: #F8F8F2\">&gt;<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n<h5 class=\"wp-block-heading\">SPA Routing<\/h5>\n\n\n\n<p class=\"wp-block-paragraph\">The demo site works similar to the example above, but it also has routing functionality. See the screenshots below: in the first image, the <a href=\"https:\/\/krisbunda.com\/_apps\/simple-3-pager\/#about\" target=\"_blank\" rel=\"noopener\">about.html<\/a> page fragment is loaded to the <code>&lt;main><\/code> element and &#8216;<code>\/#about<\/code>&#8216; is displayed in the URL bar (that&#8217;s the routing part). When the &#8216;<em>Explore the Contact Fragment<\/em>&#8216; button is clicked, content from <a href=\"https:\/\/krisbunda.com\/_apps\/simple-3-pager\/#contact\" target=\"_blank\" rel=\"noopener\">contact.html<\/a> file loads into the <code>&lt;main><\/code> element and the URL bar updates to display &#8216;<code>\/#contact<\/code>&#8216;. Because of routing, pages can be navigable, shared, bookmarked, SEO-friendly, while preserving the speed of the SPA experience.<\/p>\n\n\n\n<figure class=\"wp-block-gallery has-nested-images columns-default is-cropped wp-block-gallery-2 is-layout-flex wp-block-gallery-is-layout-flex\">\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/krisbunda.com\/blog\/wp-content\/uploads\/2026\/10\/htmx_SPA_page_load_example-about.png\"><img loading=\"lazy\" decoding=\"async\" width=\"1200\" height=\"1232\" data-id=\"9951\" src=\"https:\/\/krisbunda.com\/blog\/wp-content\/uploads\/2026\/10\/htmx_SPA_page_load_example-about-1200x1232.png\" alt=\"\" class=\"wp-image-9951\" srcset=\"https:\/\/krisbunda.com\/blog\/wp-content\/uploads\/2026\/10\/htmx_SPA_page_load_example-about-1200x1232.png 1200w, https:\/\/krisbunda.com\/blog\/wp-content\/uploads\/2026\/10\/htmx_SPA_page_load_example-about-600x616.png 600w, https:\/\/krisbunda.com\/blog\/wp-content\/uploads\/2026\/10\/htmx_SPA_page_load_example-about-146x150.png 146w, https:\/\/krisbunda.com\/blog\/wp-content\/uploads\/2026\/10\/htmx_SPA_page_load_example-about-1496x1536.png 1496w, https:\/\/krisbunda.com\/blog\/wp-content\/uploads\/2026\/10\/htmx_SPA_page_load_example-about.png 1910w\" sizes=\"auto, (max-width: 1200px) 100vw, 1200px\" \/><\/a><\/figure>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/krisbunda.com\/blog\/wp-content\/uploads\/2026\/10\/htmx_SPA_page_load_example-contact.png\"><img loading=\"lazy\" decoding=\"async\" width=\"1200\" height=\"1235\" data-id=\"9950\" src=\"https:\/\/krisbunda.com\/blog\/wp-content\/uploads\/2026\/10\/htmx_SPA_page_load_example-contact-1200x1235.png\" alt=\"\" class=\"wp-image-9950\" srcset=\"https:\/\/krisbunda.com\/blog\/wp-content\/uploads\/2026\/10\/htmx_SPA_page_load_example-contact-1200x1235.png 1200w, https:\/\/krisbunda.com\/blog\/wp-content\/uploads\/2026\/10\/htmx_SPA_page_load_example-contact-600x618.png 600w, https:\/\/krisbunda.com\/blog\/wp-content\/uploads\/2026\/10\/htmx_SPA_page_load_example-contact-146x150.png 146w, https:\/\/krisbunda.com\/blog\/wp-content\/uploads\/2026\/10\/htmx_SPA_page_load_example-contact-1492x1536.png 1492w, https:\/\/krisbunda.com\/blog\/wp-content\/uploads\/2026\/10\/htmx_SPA_page_load_example-contact.png 1909w\" sizes=\"auto, (max-width: 1200px) 100vw, 1200px\" \/><\/a><\/figure>\n<\/figure>\n\n\n\n<h4 class=\"wp-block-heading\">index.html<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">The other &#8220;Most Important Files&#8221; is <code>index.html<\/code>. This is the main template of the SPA-type app. It&#8217;s the page with the Bootstrap <code>&lt;nav><\/code> bar component up top and <code>&lt;footer><\/code> element at bottom. In between is the <code>&lt;main><\/code> element, where the other HTML fragments load. Also note the JavaScript that sends &#8216;page&#8217; requests to <code>backend.php<\/code> in order to handle page loading and routing functionality.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/krisbunda.com\/blog\/wp-content\/uploads\/2026\/10\/index_html.png\"><img loading=\"lazy\" decoding=\"async\" width=\"1200\" height=\"931\" src=\"https:\/\/krisbunda.com\/blog\/wp-content\/uploads\/2026\/10\/index_html-1200x931.png\" alt=\"\" class=\"wp-image-9938\" srcset=\"https:\/\/krisbunda.com\/blog\/wp-content\/uploads\/2026\/10\/index_html-1200x931.png 1200w, https:\/\/krisbunda.com\/blog\/wp-content\/uploads\/2026\/10\/index_html-600x466.png 600w, https:\/\/krisbunda.com\/blog\/wp-content\/uploads\/2026\/10\/index_html-150x116.png 150w, https:\/\/krisbunda.com\/blog\/wp-content\/uploads\/2026\/10\/index_html-1536x1192.png 1536w, https:\/\/krisbunda.com\/blog\/wp-content\/uploads\/2026\/10\/index_html-2048x1589.png 2048w\" sizes=\"auto, (max-width: 1200px) 100vw, 1200px\" \/><\/a><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Comment with questions &amp; suggestions<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">I threw this project together after reading an article on the htmx.js library and became intrigued with its possibilities to simplify web app development for &#8220;small&#8221; projects. It got me thinking of ways to reduce complexity, increase maintainability, and be accessible to more hobbyists, technical-minded business owners, and differently-skilled devs.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">I didn&#8217;t do an exhaustive explanation of the demo site&#8217;s features, nor on how to update the code to make it suit your use cases. But there&#8217;s more info on the live demo and repo README. <\/p>\n\n\n\n<p class=\"wp-block-paragraph\">If you want to use this repo as the basis for your next small web project, but you&#8217;re confused on how to do something, comment on this blog or contact me via email. And if you do appropriate this repo for a project or practice, show it off in a comment!<\/p>\n\n\n\n<p class=\"has-background has-medium-font-size wp-block-paragraph\" style=\"background:linear-gradient(93deg,rgb(126,252,252) 0%,rgba(93,224,81,0.52) 100%)\"><strong>Demo site:<\/strong> <a href=\"https:\/\/krisbunda.com\/_apps\/simple-3-pager\/\" target=\"_blank\" rel=\"noopener\" title=\"Open demo web app in new tab\">The Minimalist Stack PoC<\/a><br \/><strong>GitHub repo:<\/strong> <a href=\"https:\/\/github.com\/bunda3d\/htmx-3-pager\" target=\"_blank\" rel=\"noopener\" title=\"Open repo in new tab\">github.com\/bunda3d\/htmx-3-pager<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Need to make a small dynamic website but spinning up a WordPress or React app feels like overkill? Check out this lightweight web app demo with SPA-style navigation, forms interactivity, data persistence, and an admin dashboard\u2014all on a minimal tech stack.<\/p>\n","protected":false},"author":1,"featured_media":9957,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"inline_featured_image":false,"kt_blocks_editor_width":"","_kad_blocks_custom_css":"","_kad_blocks_head_custom_js":"","_kad_blocks_body_custom_js":"","_kad_blocks_footer_custom_js":"","footnotes":""},"categories":[4],"tags":[958,781,640,959,772],"class_list":["post-9904","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-designer","tag-poc","tag-responsive","tag-apps","tag-full-stack","tag-web-development"],"aioseo_notices":[],"aioseo_head":"\n\t\t<!-- All in One SEO 5.0.3 - aioseo.com -->\n\t<meta name=\"description\" content=\"Need to make a small dynamic website but spinning up a WordPress or React app feels like overkill? Check out this lightweight web app demo with SPA-style navigation, forms interactivity, data persistence, and an admin dashboard\u2014all on a minimal tech stack.\" \/>\n\t<meta name=\"robots\" content=\"max-image-preview:large\" \/>\n\t<meta name=\"author\" content=\"Kris Bunda\"\/>\n\t<meta name=\"google-site-verification\" content=\"nClePLp4QbLXXv7FON_y2QT65NP7LibU8DWgB3TaPyY\" \/>\n\t<meta name=\"msvalidate.01\" content=\"D9A2CA8C318137423BE8EC5CD4C5DBBE\" \/>\n\t<meta name=\"p:domain_verify\" content=\"6096666fee42f7673dae5027429ae8fd\" \/>\n\t<meta name=\"keywords\" content=\"poc,responsive,apps,full stack,web development\" \/>\n\t<link rel=\"canonical\" href=\"https:\/\/krisbunda.com\/blog\/2026\/10\/08\/a-dead-simple-web-app-for-small-projects\/\" \/>\n\t\t<meta name=\"generator\" content=\"All in One SEO (AIOSEO) 5.0.3\" \/>\n\t\t<meta property=\"og:locale\" content=\"en_US\" \/>\n\t\t<meta property=\"og:site_name\" content=\"Kris Bunda Design\" \/>\n\t\t<meta property=\"og:type\" content=\"article\" \/>\n\t\t<meta property=\"og:title\" content=\"A Dead-Simple Web App for Small Projects\" \/>\n\t\t<meta property=\"og:description\" content=\"Need to make a small dynamic website but spinning up a WordPress or React app feels like overkill? Check out this lightweight web app demo with SPA-style navigation, forms interactivity, data persistence, and an admin dashboard\u2014all on a minimal tech stack.\" \/>\n\t\t<meta property=\"og:url\" content=\"https:\/\/krisbunda.com\/blog\/2026\/10\/08\/a-dead-simple-web-app-for-small-projects\/\" \/>\n\t\t<meta property=\"og:image\" content=\"https:\/\/krisbunda.com\/blog\/wp-content\/uploads\/2026\/10\/SIMPLE_WEB_APP_DEV.png\" \/>\n\t\t<meta property=\"og:image:secure_url\" content=\"https:\/\/krisbunda.com\/blog\/wp-content\/uploads\/2026\/10\/SIMPLE_WEB_APP_DEV.png\" \/>\n\t\t<meta property=\"og:image:width\" content=\"1920\" \/>\n\t\t<meta property=\"og:image:height\" content=\"1080\" \/>\n\t\t<meta property=\"article:tag\" content=\"poc\" \/>\n\t\t<meta property=\"article:tag\" content=\"responsive\" \/>\n\t\t<meta property=\"article:tag\" content=\"apps\" \/>\n\t\t<meta property=\"article:tag\" content=\"full stack\" \/>\n\t\t<meta property=\"article:tag\" content=\"web development\" \/>\n\t\t<meta property=\"article:tag\" content=\"designer\" \/>\n\t\t<meta property=\"article:published_time\" content=\"2026-10-09T02:20:25+00:00\" \/>\n\t\t<meta property=\"article:modified_time\" content=\"2026-10-09T02:20:27+00:00\" \/>\n\t\t<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n\t\t<meta name=\"twitter:title\" content=\"A Dead-Simple Web App for Small Projects\" \/>\n\t\t<meta name=\"twitter:description\" content=\"Need to make a small dynamic website but spinning up a WordPress or React app feels like overkill? Check out this lightweight web app demo with SPA-style navigation, forms interactivity, data persistence, and an admin dashboard\u2014all on a minimal tech stack.\" \/>\n\t\t<meta name=\"twitter:image\" content=\"https:\/\/krisbunda.com\/blog\/wp-content\/uploads\/2026\/10\/SIMPLE_WEB_APP_DEV.png\" \/>\n\t\t<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t\t<meta name=\"twitter:data1\" content=\"Kris Bunda\" \/>\n\t\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t\t<meta name=\"twitter:data2\" content=\"8 minutes\" \/>\n\t\t<script type=\"application\/ld+json\" class=\"aioseo-schema\">\n\t\t\t{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/krisbunda.com\\\/blog\\\/2026\\\/10\\\/08\\\/a-dead-simple-web-app-for-small-projects\\\/#article\",\"name\":\"A Dead-Simple Web App for Small Projects | Kris Bunda Design\",\"headline\":\"A Dead-Simple Web App for Small Projects\",\"author\":{\"@id\":\"https:\\\/\\\/krisbunda.com\\\/blog\\\/author\\\/kris-bunda\\\/#author\"},\"publisher\":{\"@id\":\"https:\\\/\\\/krisbunda.com\\\/blog\\\/#person\"},\"image\":{\"@type\":\"ImageObject\",\"url\":\"https:\\\/\\\/krisbunda.com\\\/blog\\\/wp-content\\\/uploads\\\/2026\\\/10\\\/SIMPLE_WEB_APP_DEV.png\",\"width\":1920,\"height\":1080,\"caption\":\"Dead-Simple Web App Development\"},\"datePublished\":\"2026-10-08T21:20:25-05:00\",\"dateModified\":\"2026-10-08T21:20:27-05:00\",\"inLanguage\":\"en-US\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/krisbunda.com\\\/blog\\\/2026\\\/10\\\/08\\\/a-dead-simple-web-app-for-small-projects\\\/#webpage\"},\"isPartOf\":{\"@id\":\"https:\\\/\\\/krisbunda.com\\\/blog\\\/2026\\\/10\\\/08\\\/a-dead-simple-web-app-for-small-projects\\\/#webpage\"},\"articleSection\":\"Designer, PoC, Responsive, apps, full stack, web development\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/krisbunda.com\\\/blog\\\/2026\\\/10\\\/08\\\/a-dead-simple-web-app-for-small-projects\\\/#breadcrumblist\",\"itemListElement\":[{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/krisbunda.com\\\/blog\\\/#listItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/krisbunda.com\\\/blog\\\/\",\"nextItem\":{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/krisbunda.com\\\/blog\\\/category\\\/designer\\\/#listItem\",\"name\":\"Designer\"}},{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/krisbunda.com\\\/blog\\\/category\\\/designer\\\/#listItem\",\"position\":2,\"name\":\"Designer\",\"item\":\"https:\\\/\\\/krisbunda.com\\\/blog\\\/category\\\/designer\\\/\",\"nextItem\":{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/krisbunda.com\\\/blog\\\/2026\\\/10\\\/08\\\/a-dead-simple-web-app-for-small-projects\\\/#listItem\",\"name\":\"A Dead-Simple Web App for Small Projects\"},\"previousItem\":{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/krisbunda.com\\\/blog\\\/#listItem\",\"name\":\"Home\"}},{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/krisbunda.com\\\/blog\\\/2026\\\/10\\\/08\\\/a-dead-simple-web-app-for-small-projects\\\/#listItem\",\"position\":3,\"name\":\"A Dead-Simple Web App for Small Projects\",\"previousItem\":{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/krisbunda.com\\\/blog\\\/category\\\/designer\\\/#listItem\",\"name\":\"Designer\"}}]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/krisbunda.com\\\/blog\\\/#person\",\"name\":\"Kris Bunda\",\"image\":{\"@type\":\"ImageObject\",\"@id\":\"https:\\\/\\\/krisbunda.com\\\/blog\\\/2026\\\/10\\\/08\\\/a-dead-simple-web-app-for-small-projects\\\/#personImage\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/0dea2176fcad4070f74ce4ee1a63460edd0cc3017656f3a98fa152e791f87b55?s=96&d=mm&r=r\",\"width\":96,\"height\":96,\"caption\":\"Kris Bunda\"}},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/krisbunda.com\\\/blog\\\/author\\\/kris-bunda\\\/#author\",\"url\":\"https:\\\/\\\/krisbunda.com\\\/blog\\\/author\\\/kris-bunda\\\/\",\"name\":\"Kris Bunda\",\"image\":{\"@type\":\"ImageObject\",\"@id\":\"https:\\\/\\\/krisbunda.com\\\/blog\\\/2026\\\/10\\\/08\\\/a-dead-simple-web-app-for-small-projects\\\/#authorImage\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/0dea2176fcad4070f74ce4ee1a63460edd0cc3017656f3a98fa152e791f87b55?s=96&d=mm&r=r\",\"width\":96,\"height\":96,\"caption\":\"Kris Bunda\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/krisbunda.com\\\/blog\\\/2026\\\/10\\\/08\\\/a-dead-simple-web-app-for-small-projects\\\/#webpage\",\"url\":\"https:\\\/\\\/krisbunda.com\\\/blog\\\/2026\\\/10\\\/08\\\/a-dead-simple-web-app-for-small-projects\\\/\",\"name\":\"A Dead-Simple Web App for Small Projects | Kris Bunda Design\",\"description\":\"Need to make a small dynamic website but spinning up a WordPress or React app feels like overkill? Check out this lightweight web app demo with SPA-style navigation, forms interactivity, data persistence, and an admin dashboard\\u2014all on a minimal tech stack.\",\"inLanguage\":\"en-US\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/krisbunda.com\\\/blog\\\/#website\"},\"breadcrumb\":{\"@id\":\"https:\\\/\\\/krisbunda.com\\\/blog\\\/2026\\\/10\\\/08\\\/a-dead-simple-web-app-for-small-projects\\\/#breadcrumblist\"},\"author\":{\"@id\":\"https:\\\/\\\/krisbunda.com\\\/blog\\\/author\\\/kris-bunda\\\/#author\"},\"creator\":{\"@id\":\"https:\\\/\\\/krisbunda.com\\\/blog\\\/author\\\/kris-bunda\\\/#author\"},\"image\":{\"@type\":\"ImageObject\",\"url\":\"https:\\\/\\\/krisbunda.com\\\/blog\\\/wp-content\\\/uploads\\\/2026\\\/10\\\/SIMPLE_WEB_APP_DEV.png\",\"@id\":\"https:\\\/\\\/krisbunda.com\\\/blog\\\/2026\\\/10\\\/08\\\/a-dead-simple-web-app-for-small-projects\\\/#mainImage\",\"width\":1920,\"height\":1080,\"caption\":\"Dead-Simple Web App Development\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/krisbunda.com\\\/blog\\\/2026\\\/10\\\/08\\\/a-dead-simple-web-app-for-small-projects\\\/#mainImage\"},\"datePublished\":\"2026-10-08T21:20:25-05:00\",\"dateModified\":\"2026-10-08T21:20:27-05:00\"},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/krisbunda.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/krisbunda.com\\\/blog\\\/\",\"name\":\"Kris Bunda Design\",\"description\":\"Creative Development & Technical How-Tos\",\"inLanguage\":\"en-US\",\"publisher\":{\"@id\":\"https:\\\/\\\/krisbunda.com\\\/blog\\\/#person\"}}]}\n\t\t<\/script>\n\t\t<!-- All in One SEO -->\n\n","aioseo_head_json":{"title":"A Dead-Simple Web App for Small Projects | Kris Bunda Design","description":"Need to make a small dynamic website but spinning up a WordPress or React app feels like overkill? Check out this lightweight web app demo with SPA-style navigation, forms interactivity, data persistence, and an admin dashboard\u2014all on a minimal tech stack.","canonical_url":"https:\/\/krisbunda.com\/blog\/2026\/10\/08\/a-dead-simple-web-app-for-small-projects\/","robots":"max-image-preview:large","keywords":"poc,responsive,apps,full stack,web development","webmasterTools":{"google-site-verification":"nClePLp4QbLXXv7FON_y2QT65NP7LibU8DWgB3TaPyY","msvalidate.01":"D9A2CA8C318137423BE8EC5CD4C5DBBE","p:domain_verify":"6096666fee42f7673dae5027429ae8fd","miscellaneous":""},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/krisbunda.com\/blog\/2026\/10\/08\/a-dead-simple-web-app-for-small-projects\/#article","name":"A Dead-Simple Web App for Small Projects | Kris Bunda Design","headline":"A Dead-Simple Web App for Small Projects","author":{"@id":"https:\/\/krisbunda.com\/blog\/author\/kris-bunda\/#author"},"publisher":{"@id":"https:\/\/krisbunda.com\/blog\/#person"},"image":{"@type":"ImageObject","url":"https:\/\/krisbunda.com\/blog\/wp-content\/uploads\/2026\/10\/SIMPLE_WEB_APP_DEV.png","width":1920,"height":1080,"caption":"Dead-Simple Web App Development"},"datePublished":"2026-10-08T21:20:25-05:00","dateModified":"2026-10-08T21:20:27-05:00","inLanguage":"en-US","mainEntityOfPage":{"@id":"https:\/\/krisbunda.com\/blog\/2026\/10\/08\/a-dead-simple-web-app-for-small-projects\/#webpage"},"isPartOf":{"@id":"https:\/\/krisbunda.com\/blog\/2026\/10\/08\/a-dead-simple-web-app-for-small-projects\/#webpage"},"articleSection":"Designer, PoC, Responsive, apps, full stack, web development"},{"@type":"BreadcrumbList","@id":"https:\/\/krisbunda.com\/blog\/2026\/10\/08\/a-dead-simple-web-app-for-small-projects\/#breadcrumblist","itemListElement":[{"@type":"ListItem","@id":"https:\/\/krisbunda.com\/blog\/#listItem","position":1,"name":"Home","item":"https:\/\/krisbunda.com\/blog\/","nextItem":{"@type":"ListItem","@id":"https:\/\/krisbunda.com\/blog\/category\/designer\/#listItem","name":"Designer"}},{"@type":"ListItem","@id":"https:\/\/krisbunda.com\/blog\/category\/designer\/#listItem","position":2,"name":"Designer","item":"https:\/\/krisbunda.com\/blog\/category\/designer\/","nextItem":{"@type":"ListItem","@id":"https:\/\/krisbunda.com\/blog\/2026\/10\/08\/a-dead-simple-web-app-for-small-projects\/#listItem","name":"A Dead-Simple Web App for Small Projects"},"previousItem":{"@type":"ListItem","@id":"https:\/\/krisbunda.com\/blog\/#listItem","name":"Home"}},{"@type":"ListItem","@id":"https:\/\/krisbunda.com\/blog\/2026\/10\/08\/a-dead-simple-web-app-for-small-projects\/#listItem","position":3,"name":"A Dead-Simple Web App for Small Projects","previousItem":{"@type":"ListItem","@id":"https:\/\/krisbunda.com\/blog\/category\/designer\/#listItem","name":"Designer"}}]},{"@type":"Person","@id":"https:\/\/krisbunda.com\/blog\/#person","name":"Kris Bunda","image":{"@type":"ImageObject","@id":"https:\/\/krisbunda.com\/blog\/2026\/10\/08\/a-dead-simple-web-app-for-small-projects\/#personImage","url":"https:\/\/secure.gravatar.com\/avatar\/0dea2176fcad4070f74ce4ee1a63460edd0cc3017656f3a98fa152e791f87b55?s=96&d=mm&r=r","width":96,"height":96,"caption":"Kris Bunda"}},{"@type":"Person","@id":"https:\/\/krisbunda.com\/blog\/author\/kris-bunda\/#author","url":"https:\/\/krisbunda.com\/blog\/author\/kris-bunda\/","name":"Kris Bunda","image":{"@type":"ImageObject","@id":"https:\/\/krisbunda.com\/blog\/2026\/10\/08\/a-dead-simple-web-app-for-small-projects\/#authorImage","url":"https:\/\/secure.gravatar.com\/avatar\/0dea2176fcad4070f74ce4ee1a63460edd0cc3017656f3a98fa152e791f87b55?s=96&d=mm&r=r","width":96,"height":96,"caption":"Kris Bunda"}},{"@type":"WebPage","@id":"https:\/\/krisbunda.com\/blog\/2026\/10\/08\/a-dead-simple-web-app-for-small-projects\/#webpage","url":"https:\/\/krisbunda.com\/blog\/2026\/10\/08\/a-dead-simple-web-app-for-small-projects\/","name":"A Dead-Simple Web App for Small Projects | Kris Bunda Design","description":"Need to make a small dynamic website but spinning up a WordPress or React app feels like overkill? Check out this lightweight web app demo with SPA-style navigation, forms interactivity, data persistence, and an admin dashboard\u2014all on a minimal tech stack.","inLanguage":"en-US","isPartOf":{"@id":"https:\/\/krisbunda.com\/blog\/#website"},"breadcrumb":{"@id":"https:\/\/krisbunda.com\/blog\/2026\/10\/08\/a-dead-simple-web-app-for-small-projects\/#breadcrumblist"},"author":{"@id":"https:\/\/krisbunda.com\/blog\/author\/kris-bunda\/#author"},"creator":{"@id":"https:\/\/krisbunda.com\/blog\/author\/kris-bunda\/#author"},"image":{"@type":"ImageObject","url":"https:\/\/krisbunda.com\/blog\/wp-content\/uploads\/2026\/10\/SIMPLE_WEB_APP_DEV.png","@id":"https:\/\/krisbunda.com\/blog\/2026\/10\/08\/a-dead-simple-web-app-for-small-projects\/#mainImage","width":1920,"height":1080,"caption":"Dead-Simple Web App Development"},"primaryImageOfPage":{"@id":"https:\/\/krisbunda.com\/blog\/2026\/10\/08\/a-dead-simple-web-app-for-small-projects\/#mainImage"},"datePublished":"2026-10-08T21:20:25-05:00","dateModified":"2026-10-08T21:20:27-05:00"},{"@type":"WebSite","@id":"https:\/\/krisbunda.com\/blog\/#website","url":"https:\/\/krisbunda.com\/blog\/","name":"Kris Bunda Design","description":"Creative Development & Technical How-Tos","inLanguage":"en-US","publisher":{"@id":"https:\/\/krisbunda.com\/blog\/#person"}}]},"og:locale":"en_US","og:site_name":"Kris Bunda Design","og:type":"article","og:title":"A Dead-Simple Web App for Small Projects","og:description":"Need to make a small dynamic website but spinning up a WordPress or React app feels like overkill? Check out this lightweight web app demo with SPA-style navigation, forms interactivity, data persistence, and an admin dashboard\u2014all on a minimal tech stack.","og:url":"https:\/\/krisbunda.com\/blog\/2026\/10\/08\/a-dead-simple-web-app-for-small-projects\/","og:image":"https:\/\/krisbunda.com\/blog\/wp-content\/uploads\/2026\/10\/SIMPLE_WEB_APP_DEV.png","og:image:secure_url":"https:\/\/krisbunda.com\/blog\/wp-content\/uploads\/2026\/10\/SIMPLE_WEB_APP_DEV.png","og:image:width":"1920","og:image:height":"1080","article:tag":["poc","responsive","apps","full stack","web development","designer"],"article:published_time":"2026-10-09T02:20:25+00:00","article:modified_time":"2026-10-09T02:20:27+00:00","twitter:card":"summary_large_image","twitter:title":"A Dead-Simple Web App for Small Projects","twitter:description":"Need to make a small dynamic website but spinning up a WordPress or React app feels like overkill? Check out this lightweight web app demo with SPA-style navigation, forms interactivity, data persistence, and an admin dashboard\u2014all on a minimal tech stack.","twitter:image":"https:\/\/krisbunda.com\/blog\/wp-content\/uploads\/2026\/10\/SIMPLE_WEB_APP_DEV.png","twitter:label1":"Written by","twitter:data1":"Kris Bunda","twitter:label2":"Est. reading time","twitter:data2":"8 minutes"},"aioseo_meta_data":{"post_id":"9904","title":null,"description":null,"keywords":null,"keyphrases":{"focus":{"keyphrase":"simple web app development","score":0,"analysis":[]},"additional":[]},"primary_term":null,"canonical_url":null,"og_title":"#post_title","og_description":"#post_excerpt","og_object_type":"article","og_image_type":"featured","og_image_url":"https:\/\/krisbunda.com\/blog\/wp-content\/uploads\/2026\/10\/SIMPLE_WEB_APP_DEV.png","og_image_width":"1920","og_image_height":"1080","og_image_custom_url":null,"og_image_custom_fields":null,"og_video":"","og_custom_url":null,"og_article_section":null,"og_article_tags":null,"twitter_use_og":false,"twitter_card":"default","twitter_image_type":"featured","twitter_image_url":"https:\/\/krisbunda.com\/blog\/wp-content\/uploads\/2026\/10\/SIMPLE_WEB_APP_DEV.png","twitter_image_custom_url":null,"twitter_image_custom_fields":null,"twitter_title":"#post_title","twitter_description":"#post_excerpt","schema":{"blockGraphs":[],"customGraphs":[],"default":{"data":{"Article":[],"Course":[],"Dataset":[],"FAQPage":[],"Movie":[],"Person":[],"Product":[],"ProductReview":[],"Car":[],"Recipe":[],"Service":[],"SoftwareApplication":[],"WebPage":[]},"graphName":"Article","isEnabled":true},"graphs":[]},"schema_type":"default","schema_type_options":null,"pillar_content":false,"robots_default":true,"robots_noindex":false,"robots_noarchive":false,"robots_nosnippet":false,"robots_nofollow":false,"robots_noimageindex":false,"robots_noodp":false,"robots_notranslate":false,"robots_max_snippet":"-1","robots_max_videopreview":"-1","robots_max_imagepreview":"large","priority":null,"frequency":"default","local_seo":null,"breadcrumb_settings":null,"limit_modified_date":false,"ai":{"faqs":[],"keyPoints":[],"schemas":[],"titles":[],"descriptions":[],"socialPosts":{"email":{"subject":"","preview":"","content":""},"linkedin":[],"twitter":[],"facebook":[],"instagram":[]}},"created":"2026-10-03 23:21:04","updated":"2026-10-09 02:21:51","seo_analyzer_scan_date":null,"focus_keyword":"simple web app development","additional_keywords":null,"truseo_locale":null},"aioseo_breadcrumb":"<div class=\"aioseo-breadcrumbs\"><span class=\"aioseo-breadcrumb\">\n\t\t\t<a href=\"https:\/\/krisbunda.com\/blog\/\" title=\"Home\">Home<\/a>\n\t\t<\/span><span class=\"aioseo-breadcrumb-separator\">\u00bb<\/span><span class=\"aioseo-breadcrumb\">\n\t\t\t<a href=\"https:\/\/krisbunda.com\/blog\/category\/designer\/\" title=\"Designer\">Designer<\/a>\n\t\t<\/span><span class=\"aioseo-breadcrumb-separator\">\u00bb<\/span><span class=\"aioseo-breadcrumb\">\n\t\t\tA Dead-Simple Web App for Small Projects\n\t\t<\/span><\/div>","aioseo_breadcrumb_json":[{"label":"Home","link":"https:\/\/krisbunda.com\/blog\/"},{"label":"Designer","link":"https:\/\/krisbunda.com\/blog\/category\/designer\/"},{"label":"A Dead-Simple Web App for Small Projects","link":"https:\/\/krisbunda.com\/blog\/2026\/10\/08\/a-dead-simple-web-app-for-small-projects\/"}],"taxonomy_info":{"category":[{"value":4,"label":"Designer"}],"post_tag":[{"value":958,"label":"PoC"},{"value":781,"label":"Responsive"},{"value":640,"label":"apps"},{"value":959,"label":"full stack"},{"value":772,"label":"web development"}]},"featured_image_src_large":["https:\/\/krisbunda.com\/blog\/wp-content\/uploads\/2026\/10\/SIMPLE_WEB_APP_DEV-1200x675.png",1200,675,true],"author_info":{"display_name":"Kris Bunda","author_link":"https:\/\/krisbunda.com\/blog\/author\/kris-bunda\/"},"comment_info":0,"category_info":[{"term_id":4,"name":"Designer","slug":"designer","term_group":0,"term_taxonomy_id":4,"taxonomy":"category","description":"Posts focusing on web, graphic, CAD, and other design.","parent":0,"count":93,"filter":"raw","cat_ID":4,"category_count":93,"category_description":"Posts focusing on web, graphic, CAD, and other design.","cat_name":"Designer","category_nicename":"designer","category_parent":0}],"tag_info":[{"term_id":958,"name":"PoC","slug":"poc","term_group":0,"term_taxonomy_id":962,"taxonomy":"post_tag","description":"","parent":0,"count":1,"filter":"raw"},{"term_id":781,"name":"Responsive","slug":"responsive","term_group":0,"term_taxonomy_id":785,"taxonomy":"post_tag","description":"","parent":0,"count":3,"filter":"raw"},{"term_id":640,"name":"apps","slug":"apps","term_group":0,"term_taxonomy_id":644,"taxonomy":"post_tag","description":"","parent":0,"count":2,"filter":"raw"},{"term_id":959,"name":"full stack","slug":"full-stack","term_group":0,"term_taxonomy_id":963,"taxonomy":"post_tag","description":"","parent":0,"count":1,"filter":"raw"},{"term_id":772,"name":"web development","slug":"web-development","term_group":0,"term_taxonomy_id":776,"taxonomy":"post_tag","description":"","parent":0,"count":7,"filter":"raw"}],"amp_enabled":true,"jetpack_featured_media_url":"https:\/\/krisbunda.com\/blog\/wp-content\/uploads\/2026\/10\/SIMPLE_WEB_APP_DEV.png","_links":{"self":[{"href":"https:\/\/krisbunda.com\/blog\/wp-json\/wp\/v2\/posts\/9904","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/krisbunda.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/krisbunda.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/krisbunda.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/krisbunda.com\/blog\/wp-json\/wp\/v2\/comments?post=9904"}],"version-history":[{"count":61,"href":"https:\/\/krisbunda.com\/blog\/wp-json\/wp\/v2\/posts\/9904\/revisions"}],"predecessor-version":[{"id":9977,"href":"https:\/\/krisbunda.com\/blog\/wp-json\/wp\/v2\/posts\/9904\/revisions\/9977"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/krisbunda.com\/blog\/wp-json\/wp\/v2\/media\/9957"}],"wp:attachment":[{"href":"https:\/\/krisbunda.com\/blog\/wp-json\/wp\/v2\/media?parent=9904"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/krisbunda.com\/blog\/wp-json\/wp\/v2\/categories?post=9904"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/krisbunda.com\/blog\/wp-json\/wp\/v2\/tags?post=9904"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}