Starting a New App: CounTic

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, Behavior, Symptom, or 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!

It’s Finished!

After many months and many long days, my capstone for the MITxPro Coding Bootcamp is finally finished!

I used my frontend Bad Bank website and added a backend and database to it. Specifically, I created the backend using ExpressJS and NodeJS, and incorporated a MongoDB database. I deployed my frontend and backend on Heroku and my database as a serverless MongoDB instance on Mongo Atlas. This sounds so much easier than it felt at the time!

For the backend, the ExpressJS web framework worked great and I used NodeJS to build my APIs. I used POST to create accounts by sending information through the body. Rich explained that using a POST request would also make querying for users safer, so I used that to return user information as well. When updating information I used the HTTP PUT verb and for getting all accounts, I used the GET verb.

To help abstract the data from the logic, I wrote functions for the Data Access Layer, or DAL. This was by far the most difficult part. I used MongoClient to connect to my MongoDB serverless instance where my database was deployed. I had several connection issues, but finally figured out that Heroku needed the MongoDB environmental variables to facilitate the connection. This made it so that I only had to call the process.env when making the connection to the database URL. The next issue I faced was that the database return took longer than the API calls and this was interfering with my results. I had to make the DAL function async and await each and every part of the connection. This took a really long time to figure out and I ran out of time to add extra authentication and roles to the database like I wanted.

My first full stack application is now complete! Its a fully deployed and functional website which you can check out here! I had a great time making this application and I look forward to improving it in the future.

You can check out my GitHub repository for the code that created this beautiful application.