Ever been on a school trip where the teacher spends 20-30 minutes counting students to make sure everyone is there? Us too, and that's why we made a simple mobile web-app called Step to ease that process. Let's Step into it.

What it does

Step aims to ease student check-ins, and to ensure the safety of students during field trips/events. Teachers can set a geolocation to check in, where students will have to be in that area to check-in with the teacher. The teacher can then see who has checked in, and can see who hasn't checked in, easing the process. In addition, the Teacher can set a region in which they will be notified if a student leaves, so they can take appropriate action.

How I built it

The front-end was first developed in Figma (first time!), where HTML elements were extracted online, and the front end code was given in-app. Using this, it became easier to reconstruct the web-app in editor. For the backend, we used NodeJS and the express module to connect to's server. We called to the APIs and was able to retrieve a list of users in a certain location radius (geofence). We were able to detect the entry and exit of the users from the geofence toolkit app. We were also able to narrow down the radius of our geofence, however at the expense of accuracy and confidence level.

Challenges I ran into

For the front end, we struggled with translating Figma into HTML and CSS as some CSS elements would not work properly with other elements, and cause irregularities not seen beforehand. To fix that issue, we played around with each element to discover an extra property which overrode some of their other properties, which was a big mess. For the backend, we were having troubles retrieving the JSON data from the API requests due to some unforeseen async issues.

Accomplishments that I'm proud of

For the front end, we're proud of learning how to use Figma, HTML, and CSS in conjunction to create a good-looking front-end. We managed to create a working app that performs the basic functions we planned for.

What I learned

For the front end, how to use Figma, and how to integrate it with HTML and CSS! Documentation is king!

What's next for Step.

Connecting the back-end with the front-end, and integrating APIs for added functionality.

Built With

Share this project: