Digital designer & consultant.

8 easy steps to build a webapp (WordPress based)

Last month I was commissioned to build a webapp to lets users reporting online gender hate speech.

I decided to use WordPress as cms, with WpForms plugin (that comes with registration addon, offline form and multipage steps).

As usual the 2 macro steps of a project (at least for my types of projects) are: design the layout and build it in code.

If you want to take a look to the layout, you can find more details about this project in my portfolio link or view directly the final result: appdigitall.it

If you interested in what the development process looks like, please continue reading.

What do we need before to start

  • A platform where users can submit their reports (upload photos, write content).
  • A Database to storage datas.
  • An admin area to show a complete reports list.
  • Push notifications.
  • Offline local storage.
  • An https hosting to deploy the webapp.

This tutorial let you easily build a webapp based on WordPress. You need basic skills of WordPress and local javascript environment (npm)

Here the 8 steps to build a WordPress web app

1 – Install WordPress

I used Sage template from Bedrock guys, that let me build a local environment using npm and import dependencies, test the webapp locally and using scss.

The documentation is great, just follow the steps to setup your machine. Here’s the doc section

I used MAMP for local server. After the sage installation you just need to configure this 2 files:

wp-config
define(‘WP_HOME’,’your-mamp-path’);
define(‘WP_SITEURL’,’your-mamp-path’); 

resources/assets/config.json
“publicPath”: “/wp-content/themes/your-theme-name”,
“devUrl”: “your-mamp-path”,
“proxyUrl”: “http://localhost:3000”,

2 – Install WpForm plugin

WpForms is a great wp plugin. It comes with lots of features like conditional logic, multipage form, registration and offline forms. 
Download it here https://wpforms.com

3 – Configure wpform plugin

The wpform documentation is well written, you just need to follow this two links to create a registration form and a multipage form, where logged users will submit the report.

Login/Registration

https://bit.ly/2YSDImD

Create a multi page form

https://bit.ly/2JJw8r1

4 – Install push notifications plugin

A good plugin for that is OneSignal; even if is free only for a limited number of subscription, is still enough for small projects. Just install it and follow the config settings. https://onesignal.com/

5 – Create a manifest.json file

this file let users save your web app to their home screen. Google guys made a great tutorial about it.

6 – Create a service workers file

for caching offline files, as the link before, the google tutorial a got everything you need.

7 – Testing with Lighthouse

Lighthouse is a very useful chrome extension to testing your webapp.

8 – Deploy

To deploy your site on your hosting, follow this sage doc section.

(As hosting service I choosed Siteground).

Here we are!

Your webapp should be online right now, well done. 
I hope this tutorial made your life easier and if you got any question feel free to ask. 

Need help for your digital project?
Contact me for a free call at me-at-lucavercellio.com or +39.340.2494082

Get my newsletter!

I talk about digital design, making stuff with computers, and freelance life.

You can unsubscribe in one click, and I will never share your email address.