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
Create a multi page form
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.