Last week was marked by an important release: our first Progressive Web App built for publishers with React JS & Semantic UI.

One of our older apps – Mosaic – was rebuilt from the ground up. It uses the WordPress REST API to retrieve content such as categories, posts and pages.

Compared to v1.0, the new Mosaic comes with:

• Better performance. The loading of the content from the API and rendering speed have greatly improved.
• Integration with the latest version of the WordPress REST API.
• Offline mode. This feature will soon be available for pre-order in the PRO version.

The PWA was built using the following tech stack:

• Create-React-App for bootstrapping the project.
• React-Semantic-UI (the official React integration for Semantic UI) for adding UI components such as buttons, grids, forms, etc.
• React-Router for navigating between screens.
• React-Slick for the categories and posts carousels.
• Redux for managing the app state.
• Jest for unit testing.
• Eslint and the Airbnb coding standard.

We have a 85% code coverage rate with unit tests and we’re working on improving this rate. While we do our best to catch any bugs out there, we are aware that some of them might escape us. Please reach out if you happen to come across a nasty one 😊.

If you would like to see the PWA in action, you can find a live demo here: https://demo-mosaic-react.wpmobilepack.com

Currently, the production version of the Mosaic mobile PWA can be used through the free Progressive Web Apps plugin available on wordpress.org.

Alexandra Anghel

Co-founder & CTO at Appticles.com – a platform for building progressive web apps. As an extension of the platform, Appticles has a WordPress plugin (WordPress Mobile Pack) that has surpassed 1M downloads.

We are thrilled to announce the release of Thunder, our first UI8 Kit for building Progressive Web Apps.

Thunder UI Kit is developed in React & Semantic UI and contains 35 screens and 100+ components that you can use out of the box.

Here are the libraries / tools that we have used for implementing the kit:

• Create-React-App for bootstrapping the project.
• React-Semantic-UI (the official React integration for Semantic UI) for adding UI components such as buttons, grids, forms, etc.
• React-Router for navigating between screens.
• React-Chart-JS for chart components.
• Eslint and the Airbnb coding standard.

The layouts from the app are split into multiple components, so they are easy to find and manage.

The kit also includes documentation on how to set up the project and start modifying the app. You can easily add app state management using Redux or Mobx and start transforming it into a fully functional app.

If you would like to see the kit in action, you can find a live demo here: http://bit.ly/ui-kit-thunder-demo

Alexandra Anghel

Co-founder & CTO at Appticles.com – a platform for building progressive web apps. As an extension of the platform, Appticles has a WordPress plugin (WordPress Mobile Pack) that has surpassed 1M downloads.