Project: Firebase JavaScript PWA
Project Summary
Project Description: A progressive web application design, integration, and development to help the development and evaluation of children of Ottawa's Francophone community.
Users (parents and educators) can register and login to the system and save their profile information. An educator with the role of "Admin" can create and manage classrooms, adding multiple educators and parents to each class. Once enrolled to a class, the parents can periodically fill and submit ASQ questionnaire forms. After the forms are submitted, each educator can review and approve them for the parents in their class. If a parent needs to consult with a professional regarding the status of their child, they can create a request for an appointment, which the "Admin" can then review, edit, and approve. The admin control panel provides various user management functionalities.
Visit PWATechnologies Used
Frontend
PWA, Vanilla JavaScript,
HTML, CSS, Bootstrap
Backend
Firestore NoSQL Database,
Firebase Authentication,
Firebase Backend Functions
Details
Authentication
- New users can register in the system as parents or educators, and their roles will be added to the JWT token.
- Once registered, the users will receive a verification email. At this stage, the users can only complete their profile information and do not have any other permissions. After the users verify their email address, a system admin can enrol them into classrooms. Once enrolled, the users will have access to the forms and appointment request UI.
- Educators can only register in the system if they own an organizational email address. And even then, they will not have any access until a system admin verifies their identity. The system admins can assign (multiple) educators to each classroom. A class educator can then review the forms and appointment requests of those parents who are enrolled in their class.
- The admins can enable/disable/delete the accounts of all parents and educators.
Security
- Aside from the front end verifications, Firestore rules have been implemented on the backend to prevent any unauthorized access request. Most requests are only allowed for logged in users who are verified by a system admin.
- Firebase backend cloud functions handle sensitive actions such as assigning roles to users and verification of parents and educators by system admins. These functions are completely secure and private and cannot be tampered with from the front end.
- The system has been carefully designed to provide a balance of performance by utilizing caching on the client side, while keeping the most sensitive functions on the server side, where they are securely stored, but not cacheable.
PWA & User Experience
- The progressive web application can be run in a browser or installed on Android and IOS phones. The HTML code is responsive and has been tested on various screen sizes.
- All the ASQ forms are created on-demand using JavaScript by fetching the form questions from the database.
- The parents have the choice to submit or save the forms for later, and if they fail to submit a previously saved form within the specified deadline, an automated function on the server which runs every day would automatically submit the form on their behalf.
- When the parents send an appointment request, the admins will be notified by email, and they can view, edit, and approve the request, and the parents will see the updated information in their user interface.