vuefront

VueFront is a modern Frontend Framework that allows any WordPress and Woocommerce website to become a fast Single Page Application (SPA) and a Progressive Web App (PWA).
<a href="https://wordpress.vuefront.com/" title="VueFront Web App DEMO" rel="nofollow ugc">DEMO: VueFront Web App</a>
VueFront Web App is built on JAMstack and comes with AMP, GraphQL, Vuejs, Nuxt inside.
The VueFront WordPress Plugin is required to add a GraphQL API to your website to feed the data into the Web App. 
When installed it will provide you with a CMS Connect URL. Use it to setup your VueFront Web App as discribed in the <a href="https://vuefront.com/guide/setup.html" title="VueFront Quick Setup Guide" rel="nofollow ugc">VueFront Quick Setup Guide</a>.
<h3>How to Use</h3>
Once the plugin is activated, the CMS Connect URL will function automatically, providing VueFront Web App access to the website data.
You can now build and deploy your PWA and SPA Web App directly from the comfort of your WordPress Admin Panel.
If you have WooCommerce installed and activated, the plugin will automatically provide that data as well.
You do not need to do anything from the admin panel. It should work out-of-the-box.
Just enjoy the new PWA & SPA.

VueFront PWA & SPA

Free PWA & SPA for WordPress & Woocommerce with AMP & GraphQL.

sakurapixel

OxyLeaf is a wellness and productivity tool that creates personalised ambient environments for focus, relaxation, and sleep. Built as a modern Single Page Application (SPA), OxyLeaf lets users mix calming sounds like rain, ocean waves, and forest ambience while displaying beautiful backgrounds to create their perfect work or relaxation space.
Think of it as a personal ambient sound studio – create custom playlists that blend multiple sounds together, each with individual volume control, and pair them with stunning visual backgrounds.
<a href="https://sakuraleaf.com/products/oxygen-working-and-relaxing-app-saas-ready/" rel="nofollow ugc">Home</a> | <a href="https://sakuraleaf.com/showcase/oxygen/" rel="nofollow ugc">Showcase</a> | <a href="https://sakuraleaf.com/showcase/oxygen/documentation/" rel="nofollow ugc">Docs</a>
<h4>Key Features</h4>
<ul>
<li>Custom Sound Playlists – Create and save personalized playlists mixing multiple ambient sounds</li>
<li>Individual Volume Control – Fine-tune each sound’s volume in your playlists</li>
<li>Beautiful Backgrounds – Choose from curated images or videos to display while sounds play</li>
<li>Playlist Backgrounds – Set unique backgrounds for each playlist that auto-switch when playing</li>
<li>Sleep Mode – Schedule daily automatic sound fade-out at your bedtime</li>
<li>Time & Date Display – Optional full-screen clock mode</li>
<li>User Accounts – Save your playlists and settings across devices</li>
<li>Google Sign-In – Quick login with your Google account</li>
<li>Multi-language Support – Interface available in multiple languages</li>
<li>Clean, Distraction-Free Interface – Minimalist design that gets out of your way</li>
</ul>
<h4>In Pro version</h4>
Complete SaaS business in a box. With built-in user management, payment processing via Paddle, multi-language support, and a beautiful single-page application interface, you can launch your own productivity SaaS platform immediately after installation.
<ul>
<li><a href="https://sakuraleaf.com/products/oxygen-working-and-relaxing-app-saas-ready/" rel="nofollow ugc">Front-end demo</a></li>
<li>Subscription and Payment Processing (Complete Paddle integration for hassle-free billing)</li>
<li>Paddle Billing API (Full integration with Paddle.com)</li>
<li>Free and Pro plans (Proven freemium business model)</li>
<li>Monthly and yearly billing (Maximise revenue with both options)</li>
<li>Trial period support (Offer free trials to boost conversions)</li>
<li>Automatic renewals (Recurring revenue on autopilot)</li>
<li>Cancellation management (Graceful handling with scheduled downgrades)</li>
<li>Global coverage (Sell in 200+ countries with automatic tax compliance)</li>
<li>Admin Pro access grants (Give complimentary Pro to specific users)</li>
<li>Subscription dashboard (Users can manage their subscription from the app)</li>
<li>Premium backgrounds (Add exclusive content for Pro subscribers)</li>
<li>Premium sounds (Add exclusive sounds for Pro subscribers)</li>
</ul>
<h3>Use Cases</h3>
<ul>
<li>Focus & Deep Work – Create distraction-free ambient environments perfect for coding, writing, or studying</li>
<li>Meditation & Relaxation – Mix calming sounds with serene backgrounds for meditation sessions</li>
<li>Sleep Aid – Use Sleep Mode to automatically fade sounds at bedtime for better sleep routines</li>
<li>Background Ambience – Display beautiful backgrounds with calming sounds during breaks or downtime</li>
<li>White Noise – Mask distracting office or home noises with customizable ambient soundscapes</li>
<li>Creative Work – Set the perfect mood for design, art, or creative writing sessions</li>
</ul>
<h3>Admin Features</h3>
Site administrators have full control over: 
* Adding and managing ambient sounds (upload audio files, set icons, organize in categories) 
* Curating background library (images and videos with attribution support) 
* Setting user limits (max playlists, sounds per playlist) 
* Configuring Google Sign-In and Cloudflare Turnstile 
* Managing multiple languages and translations 
* Choosing default backgrounds 
* Customizing frontend page placement
<h4>Resources</h4>
Here are some resources from which you can get sounds and backgrounds:
<ul>
<li><a href="https://freesound.org/" rel="nofollow ugc">freesound.org (Sounds)</a></li>
<li><a href="https://zapsplat.com/" rel="nofollow ugc">zapsplat.com (Sounds)</a></li>
<li><a href="https://uppbeat.io/" rel="nofollow ugc">uppbeat.io (Sounds)</a></li>
<li><a href="https://elements.envato.com/audio" rel="nofollow ugc">elements.envato.com/audio (Sounds)</a></li>
<li><a href="https://unsplash.com/" rel="nofollow ugc">unsplash.com (Image backgrounds)</a></li>
<li><a href="https://pexels.com/" rel="nofollow ugc">pexels.com (Video backgrounds)</a></li>
<li><a href="https://coverr.co/" rel="nofollow ugc">coverr.co (Video backgrounds)</a></li>
<li><a href="https://shutterstock.com/" rel="nofollow ugc">shutterstock.com (Video and image backgrounds)</a></li>
</ul>
<blockquote>
Tip! Make sure the sounds and video backgrounds have a perfect loop.
Tip! To obtain the best performance and speed, use AWS S3 storage. 
 There are free solutions out there as plugins. Example: 
 <a href="https://wordpress.org/plugins/amazon-s3-and-cloudfront/" rel="ugc">amazon-s3-and-cloudfront</a>
</blockquote>
<h3>External Services</h3>
This plugin connects to the following external third-party services:
<h4>Google Fonts</h4>
What it is: Google Fonts CDN (Content Delivery Network)
<h4>Google Sign-In (Optional)</h4>
What it is: Google OAuth 2.0 Authentication Service
<h4>Cloudflare Turnstile (Optional)</h4>
What it is: Cloudflare Turnstile CAPTCHA service
Important: Google Sign-In and Cloudflare Turnstile are optional features that must be explicitly enabled by the site administrator in Settings > OxyLeaf App. They are disabled by default and will not connect to external services unless configured with API credentials.
<h3>Credits (third-party libraries)</h3>
<ul>
<li><a href="https://getbootstrap.com/" rel="nofollow ugc">Bootstrap</a></li>
<li><a href="https://fonts.google.com" rel="nofollow ugc">Google Fonts</a></li>
<li><a href="https://github.com/lipis/flag-icons" rel="nofollow ugc">Flag-icons</a></li>
<li><a href="https://github.com/CodeSeven/toastr" rel="nofollow ugc">Toastr</a></li>
<li><a href="https://github.com/select2/select2" rel="nofollow ugc">Select2</a></li>
</ul>

OxyLeaf – Working and Relaxing App (SaaS ready)

OxyLeaf helps users improve focus and boost productivity with customizable ambient soundscapes and beautiful backgrounds.

VueFront PWA & SPA vs OxyLeaf – Working and Relaxing App (SaaS ready)