HubSchool

An interactive space for teachers, parents, and students to effectively communicate despite not being in the classroom

Comment

Inspiration

Since we, the developers, are current students at Tufts University, we are all too familiar with the struggle of having online classes. It was diffcult to have motivation and maintain a strong sense of communication with our professors when our classes moved online during the COVID-19 pandemic. We began to think about how this could effect younger students and their parents, especially those that come from diverse (both racially and socioeconomically) backgrounds. As you can imagine, for families that may not have enough resources, parents may face numerous obstacles whe trying to work with their children on staying focused on school, when they are at home. It can also be difficult for parents to know everything that is happening both within the school and their children's respective classes; this communication is further complicated due to language barriers that may also arise between parents and teachers. Therefore, we decided to create a user-friendly tool to help both teachers, students, and parents. We hope you enjoy!

What it does

HubSchool is a resource that we created where teachers, students, and parents can create an account that will help them stay in the loop of all the various school activities. You can imagine it as a social media but for only school purposes. On the Parent/Student end, they can create an account and add pages they want to subscribe to. These pages can be a specific class or club or event; they can search these up by adding a new page to their dashboard and searching for the respective field. The resources can range from anything such as helpful tools, course materials, or general updates about the class. For teachers, they can similarly create an account and add/create pages in order to post helpful information and resources for their students or the students' parents. The entire dashboard can be translated using the powerful Google Translate engine in order to support parents who do not speak English. The teachers can create the resources in English, and then the information will be translated into whichever language the parent prefers on their dashboard. This features helps to make HubSchool accessible to all families, regardless of language background.

How we built it

To create this resource, we mainly utilized our HTML, CSS, and Javascript knowledge to develop an interactive webpage for our users. We integrated Flexbox into our HTML and CSS components in order to create a responsive website to accommodate different screen sizes. The resources for the classes are pulled from the AirTable database and rendered using Javascript functions in order to maximize modularity and flexibility as teachers update resources. We use localStorage to keep track of the current logged in user and to be able to pull the appropriate data from the AirTable when needed. We used a Google Translate API to easily change the language of the page. We utilized AirTable to act as our database where we can store important information such as login authentification and class lists. This is mainly used for our demo purposes but as you can imagine, it can be easily transferable to another database with continued work.

Challenges we ran into

Some of the main challenges we ran into were making our webpage responsive so that our users could access it on their phones or tablets. All three of us have a solid understanding of HTML, CSS, and Javascript, but when we began to add in our various features we realized how difficult responsiveness can be. However, through much persistence, we were able to overcome this hurdle. Another struggle was finding a database that was easy enough to implement quickly given the time restriction, but still could be private enough that we could keep our users' information secure. After finding AirTable and creating functions to make API calls, we were able to figure out together how to connect AirTable with our UI. We also struggled a bit with time management since all three of us communicated virtually and were not in person to work together. We were able to schedule various blocks of time where we would work really hard for a few hours in-between family obligations.

Accomplishments that we're proud of

We are super proud of how many features we were able to build in a short amount of time. Some of these features include the "sign up page" which creates a new user in the database and the "add a page" which subscribes the user to another list of class resources. We were thrilled to have AirTable successfully connect to both of these aspects because it allowed us to save the user's information and open up their accounts with their specific data. It helped us get a better idea of how this could be implemented as a more thorough and real resource in the future.

What we learned

We learned a lot more about Flexbox and how to create a responsive website as well as improved our HTML, CSS, and Javascript abilities. We also learned how quickly an idea can be realized when you really focus. Although we weren't able to work during the entire 72 hours, we still created a fleshed-out project that we are proud of. We learned the importance of screen-sharing to help each other debug code and work together through merge conflicts.

What's next for HubSchool

The next steps for this project would be to implement a more secure database and restructure some of the UI aspects to make it flow more naturally. We would also like to implement more features such as creating different forms for the teachers so that they could add more pages for their classes or clubs. Another aspect we could potentially see us moving forward with is creating a mobile app for HubSchool so that our users can easily view any information on any device.

Share this project:

Updates