I came up with the idea when I saw the need to digitize how roll calls are conducted in Ghanaian Secondary Schools. Usually, the housemaster stands in front of students with a big notebook and calls out each student. If you're present, then a tick is made by your name. if you're absent then you're crossed. But I always thought to myself that instead of carrying a big notebook around to conduct a roll call, where you will have to rewrite the names of hundreds of students when the pages in the book get exhausted, why not have an app where you can conduct the roll call on and have the history of those who are present and absent in it. Also, in the 21st century, I think that many activities that use a lot of paper should be digitized in some form to help curb the cutting down of trees to produce more paper thus helping to reduce the effects of climate change on our environment.

What it does

It conducts roll calls for students in Ghanaian Secondary Schools and clubs in Ghanaian Secondary Schools. (It's a novel app solving this kind of problem in Ghana.)

How I built it

I built it using react, material-ui( for the app bar, hamburger menu, buttons, text fields, select fields, icons and alert dialogue) and react-google-charts.

Challenges I ran into

Building it wasn't quite easy because I just started learning react during the lockdown and it was the first project in react I was working on but I already had experience with javascript, html and css so that made things a bit easier albeit I ran into a couple of challenges like learning how to map and render data contained in a nested nested list (no, I didn't make a typo, the data was in a nested nested list. I didn't know that after every map, I had to call return), how to persist data( I originally started using state in react but it's wiped away after every page refresh so I eventually resorted to storing the data in local storage) and countless react errors(like invalid hook call, cannot read property of undefined). To be honest, some of the react errors become frustrating because I didn't understand why there were happening but I eventually learned from my mistakes and will continue to use facebook's technological products to help solve problems in our everyday lives and someday even help contribute to building a Facebook technological product to help countless others bring their dreams to fruition :).

Accomplishments that I'm proud of

Successfullly building a web application with react.

What I learned

React(State, lifecycle methods, functional and class components, conditional rendering using if-else statements and ternary operators, passing down a function as props to a child component, overriding current state with prevstate), Navigating through the app with React-Router, CSS(flexbox), Using local storage to store data permanently, deploying an app to netlify, making a desktop version of a react app with electron.

What's next for Roll Call App

Moving the data stored in local storage to a database like mongodb.

Built With

Share this project: