As a teacher, I often had to track student behavior for a variety of reasons. Most of the tracking was logged on paper and, occasionally, an Excel spreadsheet. I hated these antiquated methods because they usually involved carrying a clipboard or laptop from lesson to lesson or room to room. I wished there was an easier method that I could access via my phone or tablet.
I decided to build a tracking app myself. I’m using React and Bootstrap to build the frontend. So far I’ve added a
Types component where the user can log the category of the event being counted. For example,
Positive Response. I’ve added an
Add Card component that allows the user to enter the name and description of event being counted and allows it to be assigned a category. The user decides what color to assign each category and the card changes colors based on this category.
Next, I’m going to build the cards that will hold each event and the counter to keep track of the events. These cards will be color coded according to the category, or
Type, assigned to them. The card will include the name, description, and counter. The card will also allow the user to click on a link to a modal that lists all of the tics and the date and time they were selected. This is important as much of the tracking teachers do is to record the number of incidents and date/time for the specific events.
On another page, I will have a table that lists all of the events and their types, along with dates they were created. I plan allowing users to create accounts and manage their tracking so that they can come back and revisit their counts as needed. All of this data will be stored in a MySQL database that I plan to build myself. I haven’t decided how I want to build the backend yet, as I’m thinking about trying something other than NodeJS and ExpressJS.
Below is a screenshot of the current status of my build. I’m loving the colors and how well the components are exchanging data so far. This app is easier in many regards than the banking app, but is challenging as I have no reference for how it should be built. I’m enjoying this task I’ve set for myself and I can’t wait to continue building on this idea. Check out my GitHub Repo for this application!
Leave a Reply