Inspiration
At Ngee Ann Polytechnic, the current attendance-taking app, NP Go!, requires students to scan a QR code provided by lecturers almost hourly during class. However, the app is prone to frequent bugs and glitches making it troublesome and complicated for both lecturers and students to take their attendance. These issues often forces lecturers to revert back to manual attendance-taking, effectively defeating the purpose of the app. Additionally, when on medical leave, the process of filing your medical certificates is unnecessarily tedious and confusing, adding to the frustration.
This challenge is not just isolated to Ngee Ann Polytechnic. Other polytechnics, such as Singapore Polytechnic has a poor system too. They require students to enter a 6-digit code to mark themselves as present. While functional, it is easily exploited as students can share the code with their friends, hence bypassing the system. There really isn't one elegant way of managing student's attendance.
Hence, this inspired us to come up with AttendanceGO!, a platform that aims to streamline management of student's attendance, without much physical interaction. AttendanceGO! is versatile, and can also be expanded to other use cases which requires the monitoring of attendances, such as in the workplace.
What it does
AttendanceGO! uses Computer Vision to perform Facial Recognition to streamline the attendance taking process. Lecturers simply have to mount their mobile devices on a stand and position it near the door of the classroom. As students walk in, their faces are recognised by our system, and their attendance is automatically marked. Attendance can be marked as either 'present' or 'late', depending on the configuration set by the lecturer.
The onboarding process is really simple. The school's admin will create user accounts for all students by uploading a .csv file containing some of their information. When the student first logs into their account, they will be prompted to take a Profile Picture. This profile picture is then used to train our Facial Recognition model to assist in the attendance taking process. As little as ONE photo is required, making it super simple for them.
When uploading a Medical Certificate (MC), information from the MC, such as the MC's NRIC, start date, duration, and more are automatically extracted, streamlining the MC approval process for the school's admin.
How we built it
AttendanceGO! is built using Next.JS (TypeScript) and TailwindCSS for our Front-End, with ExpressJS and NodeJS for our Back-End. Firebase (Cloud Firestore, Cloud Storage) powers our database. OpenAI's GPT-4o-Mini model is used to extract information from Medical Certificates, and our Facial Recognition was powered by Tensorflow and Face-API.
Challenges we ran into
- Ensuring Good User Experience: Creating a seamless and intuitive user experience was one of our top priorities. We found it particularly challenging to design a user interface that was both visually appealing and functional for all users. Before coming up with the most ideal user flow, we performed extensive testing and iterating at every step.
- Defining our Database: Designing a database that fits our ever expanding needs was a challenge. As we continued to iterate on our product throughout the hackathon, we found better solutions to existing issues, requiring us to rewrite code multiple times.
- Working within a tight timeline: Working with a timeline of around 24 hours proved difficult. As a team, we were not very accustomed to working on a full-stack project. Together with integrating all the features required to make our idea a reality, we worked around the clock to build our project.
Accomplishments that we're proud of
AttendanceGO!'s seamless method of attendance taking, together with it's visually appealing and intuitive interface makes the chore of 'marking yourself present' much less monotonous. It reduces frustration among all our users, lecturers and students alike, allowing them to focus on their class instead.
All in all, we are very proud of what we have created though this hackathon. It was a significant improvement to projects we have made in previous hackathons while continuing to build on our web development skills, making us extremely proud of our achievements.
What we learned
We've learnt a lot through this project, integrating various innovative features into a Full-Stack Application. This is also the first time in which most of us has dabbled into the use of Computer Vision models in a project, making us extremely proud of how well it turned out.
What's next for AttendanceGO!
Continue improving our various features, including but not limited to:
- Automating Medical Certificate approval through the use of AI
- Expanding our use-cases to target companies
Built With
- express.js
- firebase
- next.js
- openai
- tensorflow
- typescript
Log in or sign up for Devpost to join the conversation.