The new MemberMatters frontend. You'll need the backend API to use this UI. Please check the memberportal folder for instructions.
The frontend software is a modern JavaScript SPA. It utilises Vue.js, Webpack, NPM, Capacitor and Electron. It also uses eslint for code formatting and linting. The frontend can be built into a normal SPA web app, a semi native iOS and Android app, and a desktop "kiosk" mode.
Note
These commands should be run from within the
MemberMatters/src-frontend
folder!
Ensure you have nvm (node version manager) installed. Once you've installed nvm, you should install node 18 with nvm install 18
.
If you're using Ubuntu, you may need:
sudo apt install libpng-dev
If using Fedora, you may need:
sudo dnf install libpng-devel
npm install
npm run dev
Take note of the IP and port. In this case, open your favourite browser and go to https://127.0.0.1:8080/
. You should
be presented with the home page of the web app. Assuming you loaded the database fixtures in the backend, you can login with the username "[email protected]" and password
"MemberMatters!". You should create a new account, then use the default account to give your new account admin rights. You can do so using the Django admin page for the user
model which can be accessed at https://localhost:8080/admin/profile/user/. Make sure to select "super user", "staff", and "admin" for your new account. You should change the password of the default admin account or remove it once you've setup your new account.
npm run build
This will generate the app icons for every supported target of the MemberMatters portal (web, iOS, Android and Electron).
With the icon overlayed on a plain white splashscreen.
npm run icons
With the icon overlayed on a gradient background for the splashscreen.
npm run icons:bg
This project uses a combination of eslint and prettier to detect common errors and enforce common code style.
You should set up a file watcher as explained below, but you can also manually lint the front end by running:
npm run lint
This frontend project uses the Quasar framework for components and building/config. All source code
can be found in the src
folder.
All code must pass the eslint rules. In fact, the dev server will throw an exception if your code
generates an eslint error. It is recommended that you set up some sort of file watcher in your IDE
that automatically runs eslint --fix <changed_file>
. You should also set up your IDE to show
you eslint errors or warnings (most can do this).
In the file pages/pageAndRouteConfig.js
you'll find an object. This is where all of our routes
and main menu pages, page titles and components are specified. If you'd like to add a new page you
must add it to this file. Currently pages one level deep are supported under the children
property.
{
title: 'Dashboard', // this is the page title
icon: 'fad fa-columns', // this is the icon to use in the main menu
to: '/dashboard', // this is the how the URL should appear in the browser
name: 'dashboard', // this is the page and tab title
component: () => import('pages/Dashboard.vue'), // this specifies the component to use
}
NOTE: you must specify the component as a generator like above for lazy loading to work correctly.