Parent Connect

Creating parent-teacher communities with equity.

Comment

Parent Connect

Currently deployed via Vercel; Click here to check it out!

Header

A 2022 ShellHacks Project aiming to create parent-teacher communities with equity.

Hello! We are a team of three! We are Emma, Jose, and Faisal! When we first set off on this project, we wanted to focus on something that is actually affecting people today to see if we could put something together that could alleviate that pain point. We landed on parents and their access to their students school life.

Parent Connect is a school hub application for parents to use in order to participate in their children's education. As a parent, one of the biggest priorities you have is your child. Their health, wellbeing and success is at the forefront of everything you do. Unfortunately, parents can't be super heroes 24/7. Some parents work multiple jobs to support their children, and as a result, may not have the luxury of connecting with teachers, attending PTA meetings, having a say in what their kid's school experience is like. Parent Connect was created with these parents in mind. They give everything they have, it's time we gave back.

Inspiration

Growing up, we experienced struggles with our parents being involved in our academic careers from an early age. Often times activities such as field trips, science-fair projects, PTA meetings and school activities were overlooked by parents who were just too busy with work and life. We recognized from a young age that our parents may have not had the luxury, or the literacy, or the availability, to make an impact on our education. We often wished for ways to get our parents to be be involved, we also knew our parents wished they could be there for us. From this came an idea; a way for parents to be able to make sure we have forms filled, ways for parents to connect with teachers and other parents, ways for them to be there for us in even more ways; a way for parents to connect.

What it does

Parent Connect is the hub for parents to access in order to participate in the academic lives of their children. From filling out forms, to noting important dates, to reviewing grades, submitting important forms, connecting with teachers and other parents alike, even having a list of important resources to empower them to be the best parents they can be! Parent Connect is one place to do many things to help you be the best parent. A full breakdown of features will be listed below.

How we built it

using VSCode Live Share and GitHub, we collaborated on this project together, working on individual components and then bringing them together. We used technology such as React.js, JSX, JavaScript ES6, HTML5, Node.js, Bootstrap and Vercel in order to write and execute the code, bring it all together, and then deploy it as a functional, standalone app.

Challenges we ran into

Our ambitions were huge. Far too huge. We are relatively new in our coding journeys, only having a few months worth of experience. This, combined with our limited time, meant we had to come back to the drawing board many times. We wanted so much for Parent Connect. We wanted to implement so much and showcase so many features, but one of the biggest challenges we faced was deciding what we wanted to showcase the most. We felt with our experience and with the time we had, it would be best to present a demonstration, a mock-up of the power and influence an app like Parent Connect could bring.

We ran into some hiccups with making sure we returned JSX elements for our React.js app. Sometimes it's easy to confuse JavaScript, HTML and JSX, which resulted in our app breaking more times than we'd probably like to admit. Overall though we managed to pull through using our collective knowledge and skillsets (and lots and lots of caffeine).

Accomplishments that we're proud of

Faisal is most proud of the poste create component, the form submission and the implementation of React Router. When we first started with this idea, we struggled with where to begin, so Faisal decided to start by building out our basic switch/route system. Once that was built, we snowballed into production, coming up with more routes, more components and more features to add. It was almost overwhelming how motivated we were!! As we continued, Faisal decided to implement forms we could submit, in the form of a field-trip permission slip. Finally, when we originally came up with the idea to have a parent forum, the idea was to initially just have a few parent posts displayed. It was only after doing so that Faisal felt it was missing something, so he went on to create a form and function to allow the user to create posts that would display!

Jose was proud of our data implementation. He singlehandedly wrote out our database files, troubleshooted them, and then connected them to active components on the page. His ability to brainstorm a solution to our disadvantages was impressive. Jose also was proud of using advanced JS features like array methods, ternary operators and bootstrap elements to elevate our code and how it looks on the page. Using these advanced JS features allows for our code to be applied in creative ways, stay DRY, and makes it friendly to read, from beginners to experts.

Emma was incredibly proud of the google translate API implementation. Using other technology shows initiative, collaboration and creativity. Her approach to solving a universal problem such as language barriers was extremely impressive. Emma also was extremely proud of breathing life into the project. If Jose and Faisal wove the book together, Emma definitely helped put words on the pages in the form of a comprehensive about page that speaks to the goals of our project, utiziling creative bootstrap elements to bring components together in the form of a NavBar, and rewriting components through and through until she got them just right. her attention to detail was a breath of fresh air that helped motiate us til the very end.

What we learned

We were very happy to learn, above all, that we CAN do this! We struggled with getting our feet off the ground but once we did, we started applying better concepts to help elevate our code, like single-responsibility components, DRY code, and implementing advanced/modern features! We learned that 2 (or 3) heads are way better than one. All alone, we definitely may have struggled with building an app like this, but together, we really bounced off each other and kept excellent momentum. We learned (the hard way) that sometimes, lack of experience and time constraints force us to take detours, revisit the drawing board and rethink our approach, and that's okay! We managed to find solutions to our problems that were within our means and we managed to create a project that fit our standards as beginner coders. We couldn't be happier with how things turned out.

What's next for parent connect?

We want to build more components that allow parents to connect directly with teachers on a 1x1 level. We hope to build out a message system and user functionality so that parents can create accounts and customize aspects of their user experience. We hope to even one day have enough components to where users can make changes to their dashboard, showing what's important to them at the very top and then giving them the option to search for other components. The sky is the limit!

Features

- Interactive Dashboard

Dashboard

Interactive components greet you on your personalized homepage. Here you will find information regarding your student and their teacher, announcements, upcoming events, grades, and even a poll! The announcements and poll components are interactable, allowing you to click or tap to vote for options, reach important forms, and view other pages.

Interactive Components

The upcoming events calendar allows you to schedule additonal events, such as parent-teacher confrences, tutorial sessions and more! Grades are color-coded and easily available to view, so that you can monitor your student's progress at a glance!

Interactive Components

- Embedded page translation using Google's API!

Translation

We recognize the overlap between parents who may often work hard and can't devote as much time to their student's academic participation, and parents who may have english as a second language. As a contributer with ESL parents, often times my parents didn't participate as often due to the intimidation of not having perfect english. Tools like this allow us to connect in ways that make us all feel equal.

- Full Admin Hub

Want your voice to be heard? Want to be involved in PTA meetings, or catch up on ones you've missed? The admin hub has it all. From easy polls you can vote for, to meeting digests in the form of downloadable PDF's, rest easy knowing that your participation is just a click away!

Admin Hub

### - Interactive Parent's Forum Page

Parent Forum

We've taken interactivity to an exciting level in the form of a forum page! View other parent's posts! Get involved in your community by getting to know local parents, you can even create your own post! Watch as we show a post in the making:

Create Post

Once posted, it joins the others!

Create Post

### - Form Submission

Often times I struggled to get my parents to sign a field-trip permission slip. Those are now a thing of the past, with the ability to create online forms, parents can fill the information in and submit electronically!

Field trip form

### - Teacher's Forum Page

Teacher Forum

Parents can quickly view posts and information from teachers and faculty! All conveniently stored in a single place!

## Below is a list of tools and concepts used to help implement this webpage

Single-responsibility principle

A principle that states that each module, function, or component in a program should have responsibility for one single part of the program.

Frontend Routing via React Router

React Router is the de facto library for keeping React UI in sync with the URL. It has a simple API with powerful features. When you're building your app in React, React Router can help you make the URL your first thought, rather than an afterthought. As the visitor navigates around the site, they expect the URL to change along with the content on the page. Frontend navigation offers many benefits:

  • It allows visitors to bookmark pages.

  • It allows visitors to share links to specific content and pages.

  • It allows visitors to move forward and backward in their browsing history.

  • Routing between views is generally faster than backend routing.

  • Smooth transitions and animations between views are easier to implement.

  • Breaking up your code by page helps promote modularity.

The <Route> component may be the most important component in React Router. Its responsibility is to render some UI when its path matches the current URL. Wrapping a component with <Route> is similar to wrapping it in an if statement. If the URL matches the path property of the route, the component will be rendered.

Programmatic navigation

It is common for a web application to automatically go to a different page in response to the visitor's actions. Most often, navigation is triggered by the user clicking a link. Yet, in some situations, the application needs to create, update, or delete some data before navigating to the new page. This can be implemented using programmatic navigation, which is navigation that causes a user to be redirected as a result of an event—such as logging in or saving—that occurs on a route

Nested Routes

Sometimes, as the visitor navigates through the site, you want to change only a small part of the screen, not the entire page. The solution is to use nested routes to display more than one component at the same time. Nested routes, or child routes, are routes displayed inside of another route. This means that there can be more routes inside a component that is rendered by another route.

Share this project:

Updates