Try out the site live! https://xroads.club/devhigh

Check out the repo! https://github.com/kalinkochnev/XRoadsProd

Inspiration

Schools and their students were hit particularly hard by the pandemic and while efforts were made to make sure that our education could continue amid the Coronavirus, many aspects of school (particularly the fun ones) were lost.

Clubs have been big parts of our high school careers, so naturally we hoped that they could continue. However, this was easier said than done. Finding new members was never easy and keeping track of meeting dates and times across different clubs was a headache.

XRoads, named after our school’s central meeting spot, crossroads, is a platform to connect clubs and extracurriculars with current and prospective members. It aims to address the problems that were worsened by COVID-19 while remaining useful well after we return to in-person education.

What is XRoads

XRoads allows students to connect with clubs that they may have not been exposed to otherwise. Students can explore clubs at their school, learn more about them, see upcoming events and get in touch. The easy to use editor allows club leaders to create a highly customized page for prospective members. The access-code based edit system allows for easy set up for schools and programming-inclined students.

How we built it

Backend

We used Django and Django REST Framework alongside a Postgres database as the backbone of our site. As we were getting closer to deploying our project, we switched over to the easily configurable django-cookiecutter package, which containerizes important components of the backend to speed up the process. However, cookiecutter did not solve all our problems. We ran an instance of Nginx to serve static content, including Django related static files/media and the compiled instance of the react project. We are hosting our site on GCP Compute on a VM.

Frontend

The web app is built entirely in React. We started by developing reusable components for items like the club card and meeting times. These are used across many different pages. The React Router plugin helps with pages and navigation. SCSS was used for styling to allow for the re-use of variables and mixins across the project.

Challenges we ran into

Student Information

Recently, states have begun passing laws that limit the type of student information that can be collected by websites. To make sure our service could be used by our own school district, and any school district for that matter, we wanted to avoid collecting any student information. This meant making XRoads account-less.

We use a system of club codes to restrict the people who can edit a club. The idea is that a teacher advisor could share the corresponding club code with students who want to make changes to the club page. These club codes can be refreshed or disabled when necessary.

Moving from Dev to Production

Switching from development to production was a challenging task. Neither one of us had much experience with creating docker containers. In fact, we had never deployed any kind of applicadtion to the cloud before, but we knew that using docker was an important step to take. Dockerization would allow us to distribute our code to others much more easily, and students could setup their own instances of XRoads for their school if they desired. With any deployment, you have to start worrying about things that weren’t an issue during development, such as static file serving, using a custom domain, CORS requests, and setting up Lets Encrypt. It seemed that every time we got one step closer to deploying our code, five other issues appeared. Eventually, after a few lates nights, we managed to deploy every aspect of our site.

Using the Google API in an unintended way

Google Slides is already a standard tool that most students are familiar with. Because of this (and time constraints), we wanted students to be able to use Slides to create their club slideshows.

We wanted to retrieve the slide data without the embed player that Google Slides provides. Instead, we use the Google Slides API to iterate through each slide in the slideshow and get its unique id. Then, using their standard URL for slide image exports (found through some trial and error), we get the image URL for that slide. These image URLs are sent to the frontend and displayed in the corresponding slideshow. While not very elegant, it works well for the user.

Accomplishments that we're proud of

Look and Feel

XRoads is for students, but we didn’t want it to feel like school. We wanted it to feel inviting and playful while still being usable. Our design revolves around labeled cards that resemble sticky-notes. Today, every web app looks and feels relatively the same. We like that XRoads breaks the mold a little bit.

Deploying a Web App

Like we mentioned earlier, we never have deployed our own app to the cloud, and to finally see it finished after so much time and effort is really satisfying. Some people might say that we over engineered such a simple site, but this was also learning experience for us to explore web technologies that are used to power the world’s largest sites.

Creating Ezform

Our site uses a number of forms to handle club and event editing, so we found ourselves repeating lots of form configuration with the react package, Formik. We created a react hook that can easily generate forms, while still maintaining a high level of control over styling/layout and functionality of the form. We are considering publishing a npm package with an improved version to make form creation as painless as possible.

What we learned

While we learned a lot about libraries and the code needed to create a website from scratch, we also discovered a lot about self motivation and the satisfaction of trying to help others through technology.

Life Lessons

Putting a deadline on a project can mean the difference between success or failure. We’ve wanted to create XRoads for quite a while and the deadline, stress, and excitement of a hackathon is what really enabled us to go from sitting around discussing an idea to actually building it.

We wanted to make a site that could benefit others, and hopefully improve the online world of students today so they can stay connected with some of their most valuable assets, their friends, clubs, and school community. As recent graduates of high school and former club leaders, we know firsthand the toll clubs have taken during the pandemic. Even post-pandemic, we think that XRoads can help students find new clubs that they wouldn’t have been exposed to otherwise.

What's next for XRoads

Clubs aren’t static, so we hope that eventually, clubs will be able to post blog-style updates. Students will be able to get a sense of what’s happening in their school community by viewing recent posts.

We also like the idea of an online bulletin board of sorts where people could submit virtual posters about activities, events and announcements. If desired, we imagine a school could require that these go through a review process before being posted publicly.

Clubs and extracurriculars have been integral to our time as high schoolers and we think that XRoads has the power to bring that experience to even more students by making it easy to find and participate in the things that interest them.

Share this project:

Updates