Y / 2022
The Cornerstone App
Problem
In June 2020, it was clear that the next school year would consist of virtual learning. It was also clear we did not have a system to track all of our Chromebooks and which student had a specific Chromebook. Solving this problem would not only give us an automated system to track our devices; it would become the start of automating many processes in our school, especially systems that used tons of paper. This would lead to my position as not only 'Technology Specialist', but a new position, "Director of Going Paperless"
Tech Stack
FRONT END
React
Typescript
Tailwind
Sass
BACK END
NodeJS
Express
Typescript
MongoDB
GraphQL
DEPLOYMENT
Heroku
Branding
#2972E7
#4338CA
#6B7280
Even though our web application will hardly be seen by students or parents , it is part of the Cornerstone ecosystem and therefore the color palette was based on the colors of the brand. One of the main tasks was to find a proper design system that would work throughout the whole system starting with typography.
Components
Resources
There are 9 main resources within this app:
Devices
Textbooks
Reimbursements
Timesheets
Leaves
Directory/Users
Tickets
Aftercare
Students
Devices
Each device has 5 states to choose from:
- The device is working and can be checked out for a student.
The device should only used by the assigned student. The device is still in the school. - The device is currently checked out to a student.
- The device is broken and cannot be checked out to student until the error(s) is rectified.
- No action can be taken on the device.
Selecting a student to check out an available device
A Chromebook currently checked out by student
Check out and error logs for a device
Textbooks
A textbook is book used as a standard work for the study of a particular subject. Our textbooks are defined by their status and quality.
Status
- Textbook can be checked out
- Textbook is currently checked out
Textbook has been replaced by another one- Textbook cannot be checked out
Quality
A set of textbooks entered in our system
Adding a set of textbooks to the system
Checking out textbooks to students
Reimbursement
Our teachers often buy materials for their classrooms. Instead of having the schools buy the items they need, they can choose to purchase their items themselves. When that happens they fill out a reimbursement form and send it to the finance office, where they can get their money back for the purchase.
New Digital Reimbursement Form
Viewing current user reimbursements
Receiving a notification for a reimbursement request
Viewing a reimbursement
Timesheets
At the school, we use timesheets for non-salaried and part time employees. In the past, we initially used a physical binder for timesheets. We later used Google Sheets for entries. We now use our online system to track all timesheets entries and approvals.
Employee timesheet view (Month)
Employee timesheet view (Week)
Add timesheet entry
View timesheet entry
Pending timesheets to approve (Admin view)
View employee timesheet entries (Admin view)
Leave Requests
Any employee must submit a leave request when they plan to be away from work. In the past we used Google Forms for reimbursement requests but the submissions were not easy to query and not stored in a centralized place.
Creating a leave request
Viewing approved leave requests
Directory
The directory manages all of the users and the departments they are in.
The list of active users
Settings for an individual user
Users in a department
Adding users to a department
Tickets
When issues arise in the school, teachers and staff can submit tickets to get the right person on the job.