Building an Online Timetable - Vitalik-Hakim.

Summer Break and the Idea

During the summer, probably two weeks before school reopened. I had an idea about making my school timetable accessible from anywhere and everywhere in the school. Just incase my laptop is not working. This however has been easily solved by the school by making everyone's timetable open sourced. So that it will be easy to find your current class on someone's laptop. This is also a major contribution in my project. The open source nature of timetables made it easy for me to do this project.

The problem

Okay so this is not really a major issue in the school because everyone has PDFs of the timetable of others but I wanted to take it to another level by making it available on the web for everyone in the school. This as an alternative to searching through many pages of PDFs to find your Timetable schedule for the current time.

The benefits or addons of this product to the traditional looking through PDF's

• Students can find their current period and the next three periods by just searching their name. The results appear in less then a second

• Teachers and students can search other students name and find the class they have and find them if they are looking for them.

• The Indications of Period Start time and Period End Time will help students realize how late or early they are into the period.

• The timetable could always be edited to adjust to changes if a student drops a class or there is a mistake.

Building the project

This project took about two weeks of free time to bring up a working prototype.
I used the previous year timetable to test for functionality and user experience.
I am currently rolling out a beta testing program with this year's timetables. The format of the timetable has changed a little bit, so I had to change some part of the code to fit the new timetable structure.

Coding and Technical Information

I talked a bit about the timetable being in a PDF format.
So indexing something that's in a PDF format will be quite challenging based of the final form of data that you need.
In my case I need a JSON file with all the student as the main key and the other keys being subjects, days , periods(time).

But how do you go from something that is almost un-editable in its raw state to something well structured like a json?
This was a big task actually and I had no plans whatsoever to enter data manually.

I would want to jump ahead of myself and list how the PDF becomes a structured Json.

Process

PDF -> JPG -> Edited JPG -> Excel Sheet -> Edited Excel Sheet -> JSON(Unstructured) -> Structured JSON

• PDF - This is real timetable and raw data that is going to be processed. This is my timetable from the last year(MYP5)

• JPG - To work on it I first converted the PDF into an image using Python PDFtoImage Library

• Edited JPG - Now I use Python CV2. I drew lines on the timetable to cut new boxes for Lunch and Snack time because they become empty spaces.

• Excel Sheet - This is next stage which involves converting the image into an excel sheet. This excel sheet format will make it easy for me to remove some words and add some in the timetable

• Edited Excel sheet - This sheet is the new cleaned data version of the original converted from the Image. Whitespaces, Empty cells and table labelling has been done to this Excel.

• Json(Unstructured) - This is a json file that was made by converting the edited excel sheet into a json format. The tables that were labeled in the edited excel sheet are now keys and values. However, Some tables merged by mistake and uncertainty.
  Due to this error I also need to find those instances and replace them with a "&&" token. Just as an identifier for other later programs who would work on the json such as the Backend, API and the Frontend.

• Structured JSON - Finally this our master file with all the data that may be needed by the API rest of the web Application.
  I will give a sneak peak into how it looks like. This was semester's timetable btw
  

"ABDUL-HAKIM AREMEYAW": {
            "0": {
                "0": "Free Period",
                "1": "Monday",
                "2": "Tuesday",
                "3": "Wednesday",
                "4": "Thursday",
                "5": "Friday"
            },
            "1": {
                "0": "Period Zero",
                "1": "FORM\nMEETING\nREGISTRATI\nON",
                "2": "FORM\nMEETING\nREGISTRATI\nON",
                "3": "FORM\nMEETING\nREGISTRATI\nON",
                "4": "FORM\nMEETING/\nREGISTRATI\nON",
                "5": "7:15 - 8:00\n\nASSEMBLY"
            },
            "2": {
                "0": "Period One",
                "1": "MC\n\nMATH STD1\n\nMR4",
                "2": "TO\n\nPHY2\n\nPL",
                "3": "CT\n\nENG L/LIT3\n\nER4",
                "4": "AK\n\nFRE4\n\nAVR1",
                "5": "CA\n\nMATH EXT2\n\nMR3"
            },
            "3": {
                "0": "Period Two",
                "1": "Snack Break",
                "2": "Snack Break",
                "3": "Snack Break",
                "4": "Snack Break",
                "5": "Snack Break"
            },
            "4": {
                "0": "Period Three",
                "1": "PH\n\nICT4\n\nMLR1",
                "2": "MATH EXT2\n\nCA MR3",
                "3": "NM\n\nDRA2\n\nER3",
                "4": "ENG LILIT3\n\nCT MR1",
                "5": "Free Period"
            },
            "5": {
                "0": "Period Four",
                "1": "FRE4\n\nAK AVR1",
                "2": "MD\n\nBIO3\n\nBL",
                "3": "MATH STD1\n\nMC MR1",
                "4": "NM\n\nDRA2\n\nMR2",
                "5": "RH\n\nECONS1\n\nHR2"
            },
            "6": {
                "0": "Period Five",
                "1": "Lunch Break",
                "2": "Lunch Break",
                "3": "Lunch Break",
                "4": "Lunch Break",
                "5": "Lunch Break"
            },
            "7": {
                "0": "Period Six",
                "1": "BIO3\n\nBL\n&&\n PHY2\n\nPL",
                "2": "ECONS1\n\nRH HR2\n&&\n CHEM1\n\nCL",
                "3": "SM\n\nTS3\n\nMLR3",
                "4": "DA\n\nVA1\n\nAR",
                "5": "VE\n\nCHEM1\n\nCL"
            }

            "8": {
                "0": "Period Seven",
                "1": "Free Period",
                "2": "MATH SUP2\n\nEAA MR2",
                "3": "DA\n\nVA1\n\nAR",
                "4": "Free Period",
                "5": "14:50 - 15:40\n\nMATH SUP2\n\nEAA MR2"
            },

This is how the final data looks like and this can be queried by our API and then processed to look presentable on our frontend.

Backend, Frontend and API

After the first challenge has been completed and we have JSON data.

Lets now talk about how the web Application was built.

Backend

I built the Backend First because it was exciting.

I used Python's FastAPI framework to build the backend application. I used this because of the Asynchronous nature and how fast it was. And also the UVICORN SERVER. I will be dealing with a lot of requests so I had to decide on a simple but fast framework and I settled on FastAPI.

The backend was simple it would handle GET request with params such as name and time. The time was internally generated by python with a Accra/Africa Time-zone because I will host the app on a US server.

Example when a request like this is made to the server

http://127.0.0.1:8000/load/students This is request to the server will return the list of all the students. This is used by the Frontend for Autocomplete if the user is searching a name.

http://127.0.0.1:8000/search/{name}` A request like this make to the server will return a the current period data and the next three periods for the that matches the records in the json file.

Other requests will be made for special cases.

Frontend

So fortunate for me during the summer I interned at two software companies. One company used Vue.js and Laravel as their tech stack. So I obliged myself to learn them. I already had experience with Laravel but not Vue.js. I had always done React.js. So it was very exciting to try out something new.

I picked up Vue.js very fast. I was even surprised how I did it.
So when I had the idea to do this project. I said why not use Vue.js as the frontend to enhance my skills in the framework.

So I started working on the frontend.

I spent so much time on the CSS and other things I needed to make the frontend work. I had the experience if throwing in some little jQuery to make some magic work too.

The Date and time was also done in the frontend. which was rewarding to do.
I managed to finish that so quickly than I thought.

API

I won't spend time on this because the API is FastAPI and was queried using the normal fetch and return. I will use AXIOS later but I want everything to be simple for now.

Firebase

As a student I don't have any choice but to utilize the Firebase hosting service to host my Frontend Vue.js.

Heroku

Again as a student I just had to host my backend FastAPI on Dyno on Heroku. Which has been quite rewarding and helpful.

Moving forward

I think I will still be working on this to improve and I am also accepting suggestions to make it better because its not fully fledged done and its not open sourced yet. It will be open sourced once it is live for the whole school.

I really learnt a lot by doing this project I got introduced to many practices and many ideas of doing things that also introduced in my code.

There were stumbling blocks at every stage. I just took a break outside to do sports or just cycle, And I would find the solution to the bug. Trust me it works every time! . Some problems seemed like a dead end for my project but I managed to overcome them. I am looking on to building new projects and learning more. This is next major project I have built since the inception of Antimony(CryptoCurrency)